Google chart ChartWrapper getting invalid column i

问题:

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.addColumn('datetime', 'Time');
data.addColumn('number', 'col1');
data.addColumn('number', 'col2');
data.addColumn('number', 'col3');

then I've setup the two charts with ChartWrapper:

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',
      'options': {
            title: 'chart2',
            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,2]}
    });

Then:

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, chart2]);
    dashboard.draw(data);

But I'm getting Invalid column index 2. Should be an integer in the range [0-1] for the second chart and I don't know why, because in the dataset there are 4 columns so there must exists a column index 2!

Anyone have experienced something like this?

回答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']
});

function drawChart() {
  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([
      new Date(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);
}

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