0

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

1 Answer 1

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.