Въпросът ви засяга нещо, което много ме разочарова:документацията за API на Google не е страхотна! По-специално, за Charts API, в основно всички техни примери, данните за тяхната диаграма са твърдо кодирани в страницата и в реалния живот вие основно винаги ще изобразявате данни, съхранявани в DB и предавани към браузъра.
1) Имате нужда от някакъв код на сървъра (използвам PHP), който прави заявки към базата данни, "отпечатва" и предава JSON/комплексната структура от данни, която е обект, където свойствата са масиви, които съдържат допълнителни обекти със свойства и стойности в точните формат, който JavaScript на Google Chart очаква да го получи в браузъра. Направих го така:
$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) Трябва да получите този JSON обект във вашия JavaScript на страницата си и да го предадете на Google Chart JS. Донесох 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, генерирането на JSON обекта, от който се нуждае Google Charts API, и получаването му с JQuery и AJAX. Надявам се това да освети!