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);

Answers


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)}
                }); 

Need Your Help

Fixed window width with Auto Layout

objective-c cocoa autolayout nswindow

I have a window in interface builder and a view. I have resized the window to be the size I want it. I want the window to stay the same width but resize to hug content vertically. I have set a m...

How to populate a jQuery Mobile list view with JSON data from server?

ajax json listview jquery-mobile cordova

I'm using jQuery Mobile with PhoneGap. How can I pull JSON data (from a server) and populate it into a list view.