I am using google chart and I have the following example:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 860, 580],
['2007', 1030, 540]
]);
var options = {
width: 400, height: 240,
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
When I add rows without any data in the last column, google chart can not draw the chart.
For example, with this data I don not get any chart:
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 860, 580],
['2007', , ]
]);
but if I add the last column, see below, it works.
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 860, 580],
['2007', , 122]
]);
Can someone can explain to me: What is the logic behind this?
Thanks!
It’s probably because the range of the chart ends at the last row when you created the chart. If you add more rows, the range of the chart doesn’t change so you’ll either have to adjust the range (not sure if this is possible using the API) or create a new chart.