I'm trying to draw a line chart from a data table. This should be quite simple. The line chart draws just fine until I try to access a column further down the spreadsheet.
When I draw the data table for the second column like this I get an awesome linegraph:
var costsTable = new google.visualization.DataTable();
costsTable.addColumn('number', 'colIndex');
costsTable.addColumn('string', 'colLabel');
costsTable.addRow([0, data1.getColumnLabel(0)]); //month
costsTable.addRow([2, data1.getColumnLabel(2)]); //costs
BUT when I replace the second row with the sixth row:
costsTable.addRow([6, data1.getColumnLabel(6)]); //consumption
I get this error:
> Invalid row index undefined. Should be in the range [0-1].
I don't understand what is causing this error because I put in 2 as the index and it works just fine.
If I replace the second row with
costsColumnsTable.addRow([1, data3.getColumnLabel(2)]); //costs
I get the error:
> Data column(s) for axis #0 cannot be of type string
This doesn't make sense to me how the line graph can be drawn perfectly with an index of 2, but not six.
I've logged the values of the working dataTable, and it is indeed assigning the given indexes and receiving the specified column label.
The dataTable looks like:
0, Month
2, Amount Billed
Which are my chosen indexes and labels. However, I cannot do this with another index.
Here's my entire chart function:
function drawElectricalLine(data3){
var linechartCost = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'line_chart',
dataTable: data3,
options: {
animation:{
duration: 1000,
easing: 'out',
},
width: 800,
height: 400,
title: 'Monthly Electric Costs',
explorer: {},
hAxis: {
title: 'Date'
},
vAxis: {
title: 'Amount Billed ($)'
//' Consumption (kWh)'
}
}
});
var initState= {selectedValues: []};
var costsColumnsTable = new google.visualization.DataTable();
costsColumnsTable.addColumn('number', 'colIndex');
costsColumnsTable.addColumn('string', 'colLabel');
costsColumnsTable.addRow([0, data3.getColumnLabel(0)]); //month
costsColumnsTable.addRow([2, data3.getColumnLabel(2)]); //costs
//costsColumnsTable.addRow([6, data3.getColumnLabel(6)]); //costs ---> causes error
initState.selectedValues.push(data3.getColumnLabel(2));
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'electrical_selector',
dataTable: costsColumnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label: '',
caption: 'Consumption',
allowTyping: false,
allowMultiple: true,
allowNone: false
}
},
state: initState
});
setChartView(linechartCost, costsColumnsTable, columnFilter);
}//end drawElectricalLine
function setChartView(linechart, columnsTable, columnFilter) {
var state = columnFilter.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
view.columns.sort(function (a, b) {
return (a - b);
});
linechart.setView(view);
linechart.draw();
}
All I'm trying to do is draw a basic line chart from my month column data1.getColumnLabel(0)
and my consumption column data1.getColumnLabel(6)
And I do not see why I cannot assign a different index without getting an error.
UPDATE:
I fixed the first column to be type string. My data1.getColumnLabel(0)
is not even in index 1 :(