Bug in Google Chart Dashboard Using Legend to Filter

Question

I have a dashboard filtered by rangefilter and by clicking on the legend. It works well except when clicking on the first item in the legend. I am not sure what went wrong here.

The working code can be seen in this link : http://jsfiddle.net/hRAhJ/144/

var columns = [];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
  columns.push(i);
  if (i > 0) {
    series[i - 1] = {};
  }
}
google.visualization.events.addListener(chart, 'select', function() {
  var sel = dash.getSelection();
  // if selection length is 0, we deselected an element
  if (sel.length > 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;
      }

      // set series option
      chart.setOption('series', series);

      var view = new google.visualization.DataView(data);
      view.setColumns(columns);
      dash.bind([rangeFilter], [chart]);
      dash.draw(view);
    }
  }
});

Answer 1

not sure what's going on with the data view,
but setting the view directly on the chart wrapper instead,
seems to work ok...

see following working snippet...

 google.charts.load('current', { callback: drawChart, packages: ['controls'] }); function drawChart() { var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1xUzHqQjFRV3CcCEmsVUezz4hzwHDxPFW15f5Da0xBS0/edit#gid=0&headers=1&tq?range=A1:AA42"); query.send(handleQueryResponse); } function handleQueryResponse(response) { var data = response.getDataTable(); var rangeFilter = new google.visualization.ControlWrapper({ controlType: 'ChartRangeFilter', containerId: 'range_filter_div', options: { filterColumnIndex: 0, ui: { chartOptions: { height: 50, width: 1000, // must be the same in both the chart and the control chartArea: { width: '70%' // must be the same in both the chart and the control } }, chartView: { columns: [0, 1] } } }, state: { range: { // set the starting range to January 2012 start: new Date(1940), end: new Date(1990) } } }); var chart = new google.visualization.ChartWrapper({ chartType: 'LineChart', containerId: 'chart_div', options: { // width and chartArea.width should be the same for the filter and chart height: 600, width: 1000, legend: { textStyle : { fontSize : 12 } }, chartArea: { width: '70%' } } }); // Create the dashboard var dash = new google.visualization.Dashboard(document.getElementById('dashboard')); // bind the chart to the filter dash.bind([rangeFilter], [chart]); // draw the dashboard dash.draw(data); var columns = []; var series = {}; for (var i = 0; i < data.getNumberOfColumns(); i++) { columns.push(i); if (i > 0) { series[i - 1] = {}; } } google.visualization.events.addListener(chart, 'select', function() { var sel = dash.getSelection(); // if selection length is 0, we deselected an element if (sel.length > 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; } // set series option & view columns chart.setOption('series', series); chart.setView({columns: columns}); dash.draw(data); } } }); } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="dashboard"> <div id="chart_div"></div> <div id="range_filter_div"></div> </div>