Google Chart Chartwrapper Getting Invalid Column Index

I've followed the google chart tutorial to make a ControlWrapper drive two charts, I've prepared a dataset with 4 columns: data = new google.visualization.DataTable(); data.addColu

Solution 1:

it's a bug when using a view combined with animation on startup

remove "startup": true and the error doesn't occur

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart', 'controls']
});

functiondrawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Time');
  data.addColumn('number', 'col1');
  data.addColumn('number', 'col2');
  data.addColumn('number', 'col3');

  for (var i= 0; i < 10; i++) {
    data.addRow([
      newDate(2017, 0, 6, (i + 1)),
      i * 1,
      i * 2,
      i * 3,
    ]);
  }

  chart = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart1div',
    'options': {
        title: 'Chart1',
        curveType: 'function',
        legend: { position: 'bottom' },
        pointSize: 5,
        animation:{
            duration: 1000,
            easing: 'out',
            "startup": true
        },
        'chartArea': {'height': '90%', 'width': '90%'},
        hAxis: {
            gridlines: {
                count: -1,
                units: {
                    days: {format: ['MMM dd']},
                    hours: {format: ['HH:mm', 'ha']},
                }
            },
            'slantedText': false,
            minorGridlines: {
                units: {
                    hours: {format: ['hh:mm:ss a', 'ha']},
                    minutes: {format: ['HH:mm a Z', ':mm']}
                }
            }
        },
        vAxis: {
            gridlines: {color: 'none'},
            minValue: 0
        }
      },
      'view': {'columns': [0, 1]}
    });

    chart2 = new google.visualization.ChartWrapper({
      'chartType': 'LineChart',
      'containerId': 'chart2div',
      dataTable: data,
      'options': {
          title: 'chart2',
          curveType: 'function',
          legend: { position: 'bottom' },
          pointSize: 5,
          animation:{
              duration: 1000,
              easing: 'out'
          },
          'chartArea': {'height': '90%', 'width': '90%'},
          hAxis: {
              gridlines: {
                  count: -1,
                  units: {
                      days: {format: ['MMM dd']},
                      hours: {format: ['HH:mm', 'ha']},
                  }
              },
              'slantedText': false,
              minorGridlines: {
                  units: {
                      hours: {format: ['hh:mm:ss a', 'ha']},
                      minutes: {format: ['HH:mm a Z', ':mm']}
                  }
              }
          },
          vAxis: {
              gridlines: {color: 'none'},
              minValue: 0
          }
      },
      'view': {'columns': [0, 2]}
    });
    chart2.draw();
    timeRangeSlider = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'filter_div',
        'options': {
            // Filter by the date axis.'filterColumnIndex': 0,
            'ui': {
                'chartType': 'LineChart',
                'chartOptions': {
                    'curveType': 'function',
                    'chartArea': {'width': '90%'},
                    //'hAxis': {'baselineColor': 'none'}'hAxis': {
                        gridlines: {
                            count: -1,
                            units: {
                                days: {format: ['MMM dd']},
                                hours: {format: ['HH:mm', 'ha']},
                            }
                        },
                        'slantedText': false,
                        minorGridlines: {
                            units: {
                                hours: {format: ['hh:mm:ss a', 'ha']},
                                minutes: {format: ['HH:mm a Z', ':mm']}
                            }
                        }
                    }
                },
                'chartView': {
                    'columns': [0, 1, 2, 3]
                },
                'minRangeSize': 43200000
            }
        }
    });

    dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
    dashboard.bind(timeRangeSlider, [chart]);
    dashboard.draw(data);
}

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="dashboard_div"><divid="chart1div"></div><divid="chart2div"></div><divid="filter_div"></div></div>

Solution 2:

The error occures when you use 'setColumns': for instance view.setColumns([0,1,2]) As a workaround, when you make the columns calculated the error doesn't show up:

function r1(data, rowNum) {return (data.getValue(rowNum, 1))};
function r2(data, rowNum) {return (data.getValue(rowNum, 2))};

view.setColumns([0,
{
    calc: r1,
    type: 'number',
    label: 'Max'
}, {
    calc: r2,
    type: 'number',
    label: 'Gem'
}]);