ダイナミックデータとGoogleグラフを使用するにはどうすればよいですか？

たとえば、我々は、このチャートは反映したデータの定義されたセットがあるGoogle Code API ダイナミックデータとGoogleグラフを使用するにはどうすればよいですか？

で、この折れ線グラフを持っているが、しかし、私はPHP/MySQLのスクリプトから自分のデータを使用してグラフを作成したいです。ここで

は、HTMLページに埋め込むために、Googleが提供するコードは、私は私の心を持っているオプションは、ループ内で次のコードを維持し、データを生成することです

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title> 
     Google Visualization API Sample 
    </title> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load('visualization', '1', {packages: ['imagelinechart']}); 
    </script> 
    <script type="text/javascript"> 
     function drawVisualization() { 
     // Create and populate the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Name'); 
     data.addColumn('number', 'Height'); 
     data.addRows(3); 
     data.setCell(0, 0, 'Tong Ning mu'); 
     data.setCell(1, 0, 'Huang Ang fa'); 
     data.setCell(2, 0, 'Teng nu'); 
     data.setCell(0, 1, 174); 
     data.setCell(1, 1, 523); 
     data.setCell(2, 1, 86); 

     // Create and draw the visualization. 
     new google.visualization.ImageLineChart(document.getElementById('visualization')). 
      draw(data, null); 
     } 


     google.setOnLoadCallback(drawVisualization); 
    </script> 
    </head> 
    <body style="font-family: Arial;border: 0 none;"> 
    <div id="visualization" style="width: 300px; height: 300px;"></div> 
    </body> 
</html>

...です。誰かがこれを行うための何か簡単で効率的な方法を持っていますか？

data.addColumn('string', 'Name'); 
     data.addColumn('number', 'Height'); 
     data.addRows(3); 
     data.setCell(0, 0, 'Tong Ning mu'); 
     data.setCell(1, 0, 'Huang Ang fa'); 
     data.setCell(2, 0, 'Teng nu'); 
     data.setCell(0, 1, 174); 
     data.setCell(1, 1, 523); 
     data.setCell(2, 1, 86);

出典

2012-04-02 Django Anonymous

あなたが代わりにループを作り、PHP側ではdata.setCell()

に渡すjsonなどのデータを渡すことができますが、あなたのデータのJSON形式を作ります。 json_encode()を使用してください。そしてApiでは、このメソッドを使ってデータを渡します。詳しくは

http://code.google.com/apis/chart/interactive/docs/reference.html#DataTable_toJSON

出典

2012-04-02 06:54:48 safarov

ために、このリンクをチェックしてくださいあなたの質問は私をたくさんイライラしています何かに触れる：GoogleのAPIドキュメントは素晴らしいではありません！特に、Charts APIの場合、基本的にすべての例で、グラフのデータはページにハードコードされており、実際にはDBに格納されたデータをレンダリングしてブラウザに送信します。

1）データベースにクエリを行い、プロパティを持つ追加のオブジェクトを含む配列であるオブジェクトであるオブジェクトであるJSON /複合データ構造を "印刷"して送信する、いくつかのコードがサーバー上に必要です（PHPを使用します）。 GoogleのChart JavaScriptがブラウザで受け取ることを予期している正確な形式の値。あなたのページではJavaScriptでそのJSONオブジェクトを受け取り、GoogleのチャートJSにそれを渡す必要があります）

$sql = "SELECT year,d_pop FROM metrics WHERE year IN ('1940','1950','1960','1970','1980')"; 

$sth = mysql_query($sql, $conn) or die(mysql_error()); 

//start the json data in the format Google Chart js/API expects to recieve it 
$JSONdata = "{ 
      \"cols\": [ 
       {\"label\":\"Year\",\"type\":\"string\"}, 
       {\"label\":\"Detroit Population\",\"type\":\"number\"} 
      ], 
     \"rows\": ["; 

//loop through the db query result set and put into the chart cell values 
while($r = mysql_fetch_assoc($sth)) { 
    $JSONdata .= "{\"c\":[{\"v\": " . $r['year'] . "}, {\"v\": " . $r['d_pop'] ."}]},"; 

}  

//end the json data/object literal with the correct syntax 
$JSONdata .= "]}"; 

echo $JSONdata;

2：私はこのようにそれをやりました。私はそれがこのようなAJAX方法だ使用後、jQueryのに持ってきて：

function drawChart() { 
    var jsonData = $.ajax({ 
     url: "index_db.php", 
     dataType:"json", 
     async: false 
    }).responseText; 

    // Create our data table out of JSON data loaded from server. 
    var data = new google.visualization.DataTable(jsonData); 

    // Instantiate and draw our chart, passing in some options. 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, {vAxis: {minValue: 0}}); 
}

私のコードスニペットは、MySQLのDBを照会JSONオブジェクトGoogleのチャートAPIのニーズを生成し、jQueryとAJAXでそれを受け取るの重要な部分に焦点を当て。これが照らすことを願っています！

出典

2012-05-16 19:50:56

素敵な答え1UP :) –

素敵な回答@Andrew Koper、これはすばらしい方法です...残念なことに、jqueryの最新のメソッドは非同期：falseですので、1.6.2から1.7.2までを使用してくださいあなたはこのルートに行きたいです。 –

ダイナミックデータとGoogleグラフを使用するにはどうすればよいですか？

答えて

関連する問題