Google Chart issues

Question

I am trying to use a Google chart but not hard code it. I am trying to populate the chart with a while loop. Here is my code:

var drinks = data.split("\n");
    var ii = 0;

    //create chart
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Beer');
    data.addColumn('number', 'Beers');
    var rows = drinks.length / 2;
    data.addRows(76);

    //iprints data
    while(  ii < drinks.length-1 ) {
        data.setValue( ii, drinks[ii], drinks[ii+1]  );

        ii = ii +2;
    }

        // Set chart options
        var options = {'title':'Drinks',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);

My data is coming from a text file that is formatted like this.

name # name # name #

When I look in the chrome console I get this error when the code to make the chart is executed:

Uncaught Error: Invalid column index drinks[ii]. Should be an integer in the range [0-1].

Answer 1

According the Google Visualizations API, the second argument to data.setValue() should be a column index. You've added two columns ('Beer' and 'Beers'), so you can only use 0 or 1.

I would try something like this:

var drinks = data.split("\n");
var ii = 0;

//create chart
var data = new google.visualization.DataTable();
data.addColumn('string', 'Beer');
data.addColumn('number', 'Beers');
var rows = drinks.length / 2;
data.addRows(76);

//iprints data
for ( ii = 0 ; ii < drinks.length - 1 ; ii++ ) {
    data.setValue( ii, 0, drinks[ii]);
}

// Set chart options
var options = {'title':'Drinks',
               'width':400,
               'height':300};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);

This will add a Beer name to the first column in each row. I don't know what you want in the second column, but if you'd like to add some data there as well, you could include a second line in the for loop:

data.setValue( ii, 1, 'some other data');

One other note, however - you create a variable 'rows', but never use it. I think it probably should go into the call to addRows() immediately below so that you base the number of rows on the number of names in your data.

---

Edit

In response to your question about why no data shows up - the bar chart sizes come from the second column (i.e. the number column) in your DataTable. In the code above, I only populated the first column. I now understand that every other line in your data contains an integer, so I've modified the code slightly. You can try it out at this jsFiddle (Also included below).

var beers = 'Budweiser\n50\nTsingdao\n10\nSam Adams\n15';
var drinks = beers.split("\n");

// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Beer');
data.addColumn('number', 'Beers');
data.addRows(drinks.length / 2);

// Set chart options
var options = {'title':'Drinks',
               'width':400,
               'height':300};

//iprints data
for ( var i = 0 ; i < drinks.length - 1 ; i += 2 ) {
    data.setValue(i/2, 0, drinks[i]);
    data.setValue(i/2, 1, parseInt((drinks[i+1])));
}

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);