¿Cómo trabajar con datos dinámicos y gráficos de Google?

Su pregunta toca algo que me frustra mucho:¡la documentación de la API de Google no es excelente! En particular, para Charts API, básicamente en todos sus ejemplos, los datos de su gráfico están codificados en la página y, en la vida real, básicamente siempre estará representando datos almacenados en una base de datos y transmitidos al navegador.

1) Necesita algún código en el servidor (yo uso PHP) que consulta la base de datos, "imprime" y transmite la estructura de datos JSON/compleja que es un objeto donde las propiedades son matrices que contienen objetos adicionales con propiedades y valores en el exacto el formato que JavaScript para gráficos de Google espera recibir en el navegador. Lo hice así:

$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) Debe recibir ese objeto JSON en su JavaScript en su página y pasarlo a Chart JS de Google. Traje JQuery y luego usé su método AJAX así:

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

Mis fragmentos de código se centran en las partes clave de consultar la base de datos mySQL, generar el objeto JSON que necesita la API de Google Charts y recibirlo con JQuery y AJAX. ¡Espero que esto ilumine!