2012-04-18 17 views
0

私はGoogleチャートを使用しようとしていますが、ハードコードはしていません。私は、whileループでグラフを作成しようとしています。ここに私のコードです:Google Chartの問題

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

私のデータは、このような書式設定されたテキストファイルから来ています。 Google Visualizations APIよる

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

+0

なぜ私の投稿は投票1になるのですか? – searayman

答えて

3

名 # 名前を # 名 #

私はクロームコンソールで見ると、チャートを作成するためのコードが実行されたとき、私はこのエラーを取得しますdata.setValue()の2番目の引数は列インデックスでなければなりません。あなたが唯一の0または1

を使用することができますので、あなたは、私がこのような何かをしようと、2列(「ビール」と「ビール」)を追加しました:

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

もう一つのノート:私はあなたが2番目の列にしたいのか分からないが、あなたはそこにもいくつかのデータを追加したい場合は、forループの2行目を含めることができます - 変数 'rows'を作成しますが、決して使用しないでください。私はおそらくあなたのデータの名前の数の行の数を基にするようにすぐ下のaddRows()の呼び出しに行く必要がありますと思う。


編集

データが現れない理由についての質問への応答では - 棒グラフのサイズは、あなたのDataTableの2番目の列(すなわち番号列)から来ます。上のコードでは、最初の列のみを作成しました。私はあなたのデータの他のすべての行に整数が含まれていることを理解しているので、コードを少し修正しました。この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); 
+0

私が理解したものは、0を入れたところです。ビール名でなければならず、次の値はそのビールの数です。 – searayman

+0

あなたが言った最初の変更はチャートを表示しますが、何も入れません – searayman

+0

このhtmlコードを実行すると、異なる値を使って何を作成しようとしているのかを視覚的に見ることができます: http://pastebin.com/ tC7AGK3i – searayman

関連する問題