動的データとグーグルチャートをどのように扱うか？

あなたの質問は私を大いに苛立たせている何かに触れています：GoogleのAPIドキュメントは素晴らしいものではありません！特に、Charts APIの場合、基本的にすべての例で、グラフのデータはページにハードコーディングされており、実際には、基本的に常にDBに保存されてブラウザに送信されるデータをレンダリングします。

1）データベースにクエリを実行し、JSON /複雑なデータ構造を送信するサーバー（私はPHPを使用）にコードが必要です。これは、プロパティが正確なプロパティと値を持つ追加のオブジェクトを含む配列であるオブジェクトです。 GoogleのChartJavaScriptがブラウザで受け取ることを期待しているフォーマット。私はこのようにしました：

$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）ページのJavaScriptでそのJSONオブジェクトを受け取り、それをGoogleのChartJSに渡す必要があります。 JQueryを導入し、次のようなAJAXメソッドを使用しました。

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のクエリ、Google Charts APIが必要とするJSONオブジェクトの生成、およびJQueryとAJAXでの受信の重要な部分に焦点を当てています。これが光ることを願っています！