title: Google Charts: Combining ChartRangeFilter with Data Series Selector
body: <p>I have a large set of 8 series of data over time, and currently I have two working graphs, one that has a range selector (allowing you to slide a bar to select which dates to show), and the other has the ability to click on the chart legend to choose which of the series to show and which of the series to hide.</p>
  
  <p>I haven't been able to combine them together, though, into one unified dashboard that does both together. This particular code allows you to filter the date, but hiding/showing a series doesn't work. I've tried various combinations in place of the last line (chart.draw(view);) such as redrawing the dashboard and rebinding the dashboard, but still can't get it working. Any suggestions would be greatly appreciated. Here's the relevant code (edit to include sample json_obj):</p>
  
  <pre><code>    var json_obj = {
              "cols": [{ "label": "Date", "type": "date" },
              { "label": "F1", "type": "number" },
              { "label": "F2", "type": "number" },
              { "label": "F3", "type": "number" },
              { "label": "F4", "type": "number" }],
              "rows": [{
                      "c": [{ "v": Date(6,1,14) },
                          { "v": .25 },
                          { "v": .55 },
                          { "v": .12 },
                          { "v": .067 }
                      ]
                  },
                  {
                      "c": [{ "v": Date(6,2,14) },
                          { "v": .27 },
                          { "v": .52 },
                          { "v": .18 },
                          { "v": .055 }
                      ]
                  },
                  {
                      "c": [{ "v": Date(6,3,14) },
                          { "v": .30 },
                          { "v": .60 },
                          { "v": .17 },
                          { "v": .043 }
                      ]
                  },
                  {
                      "c": [{ "v": Date(6,4,14) },
                          { "v": .33 },
                          { "v": .57 },
                          { "v": .14 },
                          { "v": .05 }
                      ]
                  }]
          };
  var data = new google.visualization.DataTable(json_obj);
  
  var formatter = new google.visualization.NumberFormat({
      pattern: '#.###%'
  });
  
  for (i = 1; i &lt;= 4; i++) {
      formatter.format(data, i);
  }
  
  var dashboard = new google.visualization.Dashboard(
      document.getElementById('dashboard'));
  
  var columns = [];
  var series = {};
  for (var i = 0; i &lt; data.getNumberOfColumns() ; i++) {
      columns.push(i);
      if (i &gt; 0) {
          series[i - 1] = {};
      }
  }
  
  var control = new google.visualization.ControlWrapper({
      controlType: 'ChartRangeFilter',
      containerId: 'control',
      options: {
          // Filter by the date axis.
          filterColumnIndex: 0,
          ui: {
              chartType: 'LineChart',
              chartOptions: {
                  hAxis: {
                      baselineColor: 'none',
                      format: 'MM/dd/yy'
                  }
              },
              // 1 day in milliseconds = 24 * 60 * 60 * 1 * 1000 = 86400000
              minRangeSize: 86400000
          }
      }
  });
  
  var chart = new google.visualization.ChartWrapper({
      chartType: 'LineChart',
      containerId: 'chart',
      options: {
          title: 'Feature Users Over Time',
          vAxis: {
              title: "Percent of Users",
              format: '#.###%',
              viewWindow: { min: 0 }
          },
              lineWidth: 2,
              curveType: 'function',
              series: series
      }
  });
  
  dashboard.bind(control, chart);
  dashboard.draw(data);
  
  google.visualization.events.addListener(chart, 'select', function () {
      var sel = chart.getSelection();
      // if selection length is 0, we deselected an element
      if (sel.length &gt; 0) {
          // if row is undefined, we clicked on the legend
          if (sel[0].row === null) {
              var col = sel[0].column;
              if (columns[col] == col) {
                  // hide the data series
                  columns[col] = {
                      label: data.getColumnLabel(col),
                      type: data.getColumnType(col),
                      calc: function () {
                          return null;
                      }
                  };
  
                  // grey out the legend entry
                  series[col - 1].color = '#CCCCCC';
              }
              else {
                  // show the data series
                  columns[col] = col;
                  series[col - 1].color = null;
              }
              var view = new google.visualization.DataView(data);
              view.setColumns(columns);
              chart.draw(view);
          }
      }
  });
  </code></pre>