Проблемы с диаграммой Google

Question

Я пытаюсь использовать диаграмму Google, но не жесткий код. Я пытаюсь заполнить диаграмму циклом while. Вот мой код:

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); 

Мои данные поступают из текстового файла, который отформатирован следующим образом.

имя # имя # имя #

Когда я смотрю в хромированной консоли я получаю эту ошибку, когда код, чтобы сделать диаграмму выполняется:

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

Answer 1

согласовывая Google Visualizations API , второй аргумент data.setValue() должен быть индексом столбца. Вы добавили две колонки («Пиво» и «Бирс»), так что вы можете использовать только 0 или 1.

Я хотел бы попробовать что-то вроде этого:

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); 

Это добавит имя пива первый столбец в каждой строке. Я не знаю, что вы хотите во втором столбце, но если вы хотите, чтобы добавить некоторые данные там также, можно включить вторую линию в цикл:

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

Еще одно замечание, однако - вы создаете переменную «rows», но никогда не используете ее. Я думаю, что это, вероятно, должно перейти к вызову addRows() сразу же, чтобы вы основали количество строк в количестве имен в ваших данных.

---

Редактировать

В ответ на ваш вопрос о том, почему данные не обнаруживается - размеры гистограммы приходят из второго столбца (т.е. номер столбца) в вашем DataTable. В приведенном выше коде я заполнил только первый столбец. Теперь я понимаю, что каждая строка в ваших данных содержит целое число, поэтому я немного изменил код. Вы можете попробовать это на jsFiddle (также включено ниже).

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);