<script src="http://api.timepedia.org/gviz/"></script>
<script src="http://www.google.com/jsapi"></script>

<script>

var c, table;
function drawVisualization() {

  var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sold Pencils');
        data.addColumn('number', 'Sold Pens');
        data.addColumn('string', 'Markers');
        data.addRows(6);
        data.setValue(0, 0, new Date(2008, 1 ,1));
        data.setValue(0, 1, 30000);
        data.setValue(0, 2, 40645);
        data.setValue(1, 0, new Date(2008, 1 ,2));
        data.setValue(1, 1, 14045);
        data.setValue(1, 2, 20374);
        data.setValue(2, 0, new Date(2008, 1 ,3));
        data.setValue(2, 1, 55022);
        data.setValue(2, 2, 50766);
        data.setValue(3, 0, new Date(2008, 1 ,4));
        data.setValue(3, 1, 75284);
        data.setValue(3, 2, 14334);
        data.setValue(3, 3, 'Ran out of stock on pens at 4pm');
        data.setValue(4, 0, new Date(2008, 1 ,5));
        data.setValue(4, 1, 46476);
        data.setValue(4, 2, 56467);
        data.setValue(4, 3, 'Bought 200k pens at 11am');
        data.setValue(5, 0, new Date(2008, 1 ,6));
        data.setValue(5, 1, 33322);
        data.setValue(5, 2, 39463);

        c = new chronoscope.ChronoscopeVisualization(document.getElementById('foo'));
        google.visualization.events.addListener(c, 'select', function(f) {
          var sel = c.getSelection();
          table.setSelection(sel);
        })
        c.draw(data, { legend: "false", overview: "false"});
        table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});
        google.visualization.events.addListener(table, 'select', function() {
          var sel = table.getSelection();
          c.setSelection([{row: sel[0].row, col: 1}]);
        })
}
function onChronoscopeLoaded() {
google.load("visualization", "1", {packages:["table"], callback: drawVisualization});
}

</script>

<div id="foo" style="width: 600px; height: 400px"></div>
<div id="table_div"></div>
<!-- input type="submit" onClick="c.setSelection([{col: 2, row: 3}])" value="Click Me"-->
<br/>
Questa funzione usa una libreria chronoscope che ho trovato in internet.Ella servendosi di una tabella costruita disegna un grafico con molti punti ; in ascissa c'è il tempo ed in ordinata i valori della tabella cosa bella è che muovendo il mouse si può vedere un grande intervallo di valori. Comunque quello che vorrei fare è connettermi al mio db mysql prendere dei valori e passarli con un ciclo alla tabella costruendola passo passo. Ho povato qualche cosa ma non visualizza niente puoi aiutarmi con qualche imbeccata per trovare il modo più corretto?Magari se conosci queste librerie e le api di google potresti suggerirmi qualche documentazione più approfondita