drz drz - 1 month ago 22
Javascript Question

Google Charts set default date range

I've created a dashboard with the Google Charts API that has a

DateRangeFilter
and a
ComboChart
with a data point for every Monday over 3 months. It contains an actual series (which can be
null
) as a bar graph, and a goal series that always has data associated with it.

Ideally, I would like to set the
DateRangeFilter
to show just the current and previous week, as well as 2 weeks ahead, but still allow me to manipulate the range filter to show additional data.

So far I've tried setting
hAxis.viewWindow.max
and
hAxis.viewWindow.min
to the correct dates, but this just crops the graph, and won't let me go back to the points that get cropped out.

Dashboard setup:



var rangeFitter = new google.visualization.ControlWrapper({
'controlType': 'DateRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Closed Date'
}
});

var lineChart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'chart_div',
'options': {
animation: {
duration: 500,
startup: true,
easing: 'out'
},
hAxis: {
gridlines: {
count: 4,
units: {
days: {
format: ['MMYY']
}

}
},
//this crops the graph :c
viewWindow: {
min: new Date(2016, 0, 11),
max: new Date(2016, 2, 7)
}
},
'height': 300,
tooltip: {
isHtml: true,
trigger: 'selection'
},
seriesType: 'bars',
series: {
0: {
targetAxisIndex: 0
},

1: {
type: 'line',
pointSize: 5
}
}
}
});

dashboard.bind(rangeFilter, lineChart);




drz drz
Answer

Never mind, I figured it out. I was searching for something within the chart options, but it turns out the DateRangeFilter control has a "state" parameter. Here it is implemented in my example

 var rangeFliter = new google.visualization.ControlWrapper({
                    'controlType': 'DateRangeFilter',
                    'containerId': 'filter_div',
                    'options': {
                        'filterColumnLabel': 'Closed Date'  
                    },
                    //this will set the default range based on the values you provide
                    'state': {'lowValue': new Date(2016, 0, 11), 'highValue': new Date(2016, 1, 1)}
                }); 
Comments