“b[0] is undefined” error when using Google’s Visualization API

When playing around with google’s visualization API I came across the following error, which just appeared in the place of lovely colourful chart. No javascript errors were thrown or anything else.

b[0] is undefined

After searching the internet a bit I did not manage to find any answers, at which point I decided it was time to change values passed to the API at random and see when it started working.

The Fix:

It turns out is was the width and height properties it didn’t like, apparently they were too small?!?

Original Code:

function drawVisualization() {
var data = new google.visualization.DataTable();
 data.addColumn('string', 'fruit');
 data.addColumn('number', 'quantity');
 data.addRows(4);
 data.setValue(0, 0, 'Oranges');
 data.setValue(0, 1, 3);
 data.setValue(1, 0, 'Bananas');
 data.setValue(1, 1, 4);
 data.setValue(2, 0, 'Grapes');
 data.setValue(2, 1, 2);
 data.setValue(3, 0, 'Apples');
 data.setValue(3, 1, 6);
 
 var chart = new google.visualization.BarChart(document.getElementById('visualization'));
 chart.draw(data, {width: 150, height: 200, title: 'Fruit',
 vAxis: {title: 'Type of Fruit', titleTextStyle: {color: 'blue'}}
 });
 
}

When I modified width and height values I gave to the draw function (as so):

chart.draw(data, {width: 190, height: 200, title: 'Fruit',
 vAxis: {title: 'Type of Fruit', titleTextStyle: {color: 'blue'}}
 });

It started working again. Not quite sure why setting small sizes on the charts causes this, or why it only produces are fairly useless error message.

By the way: At first I was just testing out the API using Googles Code Playground, which is quite smart!

Any way this is how my chart looked after the fix (and I bit more resizing)

Flat image of bar graph created using Google's Visualization API

Flat image of bar graph created using Google's Visualization API