Reputation: 73
I an pretty much a complete novice when it comes to web coding. I am working on a dashboard for my client and I am using Google Charts to visualize the water level data I collect. I currently have a time series Line Chart that works fine and has a chartRangeFilter control bound to it. The chartRangeFilter control works as expected when its height is large enough. The problem is that the client wants the height to be smaller and when I reduce the height past a certain point the control no longer renders properly.
I have pasted what I believe to be the relevant code here but you can also go directly to my website, https://www.checkthewaves.com, to see what I am talking about. I have 3 water level stations and each one has a different height for the chartRangeFilter control so the client can choose one.
The Merritt Way station is the original version where the control works properly and the code below is from this station.
The Mockingbird Ln station has the height reduced and the control does not render properly.
The SE Manatee Cove Rd. station has the height reduced even further to remove the border but is not the one anyone wants.
Ideally, the Mockingbird Ln station has the right height but it does not render properly. The red line in all the plots is a threshold for the onset of flooding and I have figured out how to remove it with the chartView option as I thought that might be the issue, but it did not make a difference. I have tried many permutations of changing the height using the chart options, chartArea options and the div properties with no luck.
Any help would be greatly appreciated. Thanks in advance.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var programmaticSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control_div',
'options': { 'filterColumnIndex': 0,
'ui': {'chartType':'LineChart' , 'chartOptions':{ 'height':175,'width':400, 'chartArea':{'height':'50%' , 'width':'80%'} ,'hAxis':{ 'format':'M/d','gridlines':{'color':'#333'} }, 'vAxis':{ 'gridlines':
{'color':'#333'},'minorGridlines':{'color':'#333'} } } }
}
});
var programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart_div',
'options': {
'width': 400,
'height': 400,
//'backgroundColor':{'stroke':'black','strokeWidth':3},
'title':stationName,
'legend':'none',
'hAxis':{'title':'Time (UTC)','format':'M/d \n HH:mm','gridlines':{'color':'#333'},'textStyle':{'fontSize':10} },
'vAxis':{'title':'ft NAVD88','gridlines':{'color':'#333'},'minorGridlines':{'color':'#333'},'minValue':-3,'maxValue':3},
//'backgroundColor':'#f4f3f3',
'chartArea':{'height':'80%' , 'width':'80%' , 'backgroundColor':{'stroke':'black','strokeWidth':3}}
}
});
dashboard.bind(programmaticSlider,programmaticChart);
dashboard.draw(stationView);
Relevant body code
<tr style='height:50px;'>
<th style="vertical-align:bottom;text-align: center; font-size: 14px; font-weight:bold">Water Level Time Series</th>
</tr>
<tr>
<td align='center' >
<div id="chart_div"></div>
</td>
</tr>
<tr>
<td align='center'>
<div id="control_div"></div>
</td>
</tr>
Upvotes: 2
Views: 145
Reputation: 73
While I think this is either a code bug on Google's side or there is a chart property that I have either not yet discovered or are not using properly, I have found an adequate workaround or my issue.
The issue was that when I reduced the height of the chartRangeFilter to 80px or less, the plot inside the chart area of the chartRangeFilter would collapse to a straight line. To help myself understand things I tried to replicate this with a manual data table and eliminate everything else that was not directly related to the chart and control. By dumb luck I discovered that this breakdown occurs if you have negative numbers in the underlying data table that the chartRangeFilter uses and for whatever reason the breakdown occurs at 80px, seems bizarre.
Here is the workaround.
I was already passing a dataView to the dashboard.draw() function. So I added a column to the dataView that added a significant enough offset to the water level data so that it will never be negative, see code sample.
stationView.setColumns([0,1,2,{calc:addToPositive,type:'number',label:'CWL'}]);
function addToPositive (station_data,rowNum){
return station_data.getValue(rowNum,1) + 10;
};
This new dataView now gets passed to the dashboard.draw() function.
dashboard.bind(programmaticSlider,programmaticChart);
dashboard.draw(stationView);
But for everything to work properly you have to tell the ChartWrapper and ControlWrapper which columns to use. My stationView columns are 0-date, 1-water level, 2-threshold and 3-offset water level. I only want the chart to see columns 0,1,2 and I want the control to only see columns 0,3. So you have to set these in the relevant chart and control wrappers and the look like this;
var programmaticSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control_div',
'options': { 'filterColumnIndex': 0,
'ui': {'chartType':'LineChart' ,'chartView':{'columns':[0,3]}, 'chartOptions':
{'lineWidth':1, 'chartArea':{'width':'80%', 'backgroundColor':
{'stroke':'black','strokeWidth':1}},'vAxis':{'gridlines':{'count':0}},'hAxis':
{'gridlines':{'count':0}}}}
}
});
var programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart_div',
'view':{'columns':[0,1,2]},
'options': {
'title':stationName,
'legend':'none',
'hAxis':{'title':'Time (UTC)','format':'M/d \n HH:mm','gridlines'
{'color':'#333'},'textStyle':{'fontSize':10} },
'vAxis':{'title':'ft NAVD88','gridlines':{'color':'#333'},'minorGridlines':{'color':'#333'},'minValue':-3,'maxValue':3},
'chartArea':{'height':'80%', 'width':'80%' , 'backgroundColor':{'stroke':'black','strokeWidth':3}}
}
The only settings from above relevant to this discussion are
'chartView':{'columns':[0,3]}
this in the setting in the ControlWrapper that tells the chartRangeFilter to use columns 0 and 3, in my case the date and the offset water level.
And
'view':{'columns':[0,1,2]},
this is in the ChartWrapper that tells the actual chart to use only columns 0,1 and 2, in my case the date, water level and threshold.
After that you can size the chartRangeFilter to as small as you want and maintain the data plot.
You can see the result at https://www.checkthewaves.com and click on one of the water level stations.
I hope this may help someone else at some point, I spent a lot of time working this out.
Upvotes: 1
Reputation: 61275
it probably has something to do with the chartArea
option, here...
'chartOptions':{ 'height':175,'width':400, 'chartArea':{'height':'50%', 'width':'80%'}
in the chartOptions
object, height and width are for the overall chart.
but in chartArea
you're reducing the visible space by 50% & 80% respectively.
try the following approach instead.
height: 175, // overall chart height
width: 400, // overall chart width
chartArea: {
height: '100%', // stretch the chart area to 100% of the chart height
width: '100%', // stretch the chart area to 100% of the chart width
top: 0,
left: 0,
right: 0,
bottom: 8 // allow 8 pixels on the bottom to show x-axis labels
},
then use the top
, left
, right
, & bottom
options to allow room along each side of the chart
you probably only need room on the bottom to show the x-axis labels
start with zero on each side then increase as needed to display labels, etc...
Upvotes: 1