comment travailler avec des données dynamiques et google charts?

Par exemple, nous avons cette ligne graphique à Code Google API

il y a un ensemble défini de données de ce tableau reflète, cependant je veux créer le graphique à l'aide de mes propres données à partir de php/mysql scripts.

Voici le code fourni par google à intégrer dans la page html..

<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>

L'option que j'ai dans mon esprit est de garder le morceau de code suivant dans une boucle et de générer les données. Faut-il quelque chose de facile et de manière efficace de faire cela?

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

OriginalL'auteur Django Anonymous | 2012-04-02

  1. 3

    Vous permet de transférer des données comme json au lieu de prise de boucle et passant avec data.setCell()

    À php côté de rendre vos données au format json. À l'aide de json_encode(). Et sur l'Api utiliser cette méthode pour transmettre des données. Suivez ce lien pour plus d'informations

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

    OriginalL'auteur safarov

  2. 9

    Votre question touche à quelque chose qui est frustré m'a beaucoup: Google documentation de l'API n'est pas génial! En particulier, pour les Cartes de l'API, dans toutes leurs exemples, les données de sa carte est codée en dur dans la page, et, dans la vraie vie, vous aurez essentiellement toujours être rendu de données stockées dans une base de données et transmises au navigateur.

    1) Vous avez besoin d'un peu de code sur le serveur (j'utilise le PHP) qui interroge la base de données, les "impressions" et transmet le JSON/structure de données complexe, qui est un objet où les propriétés sont des tableaux qui contiennent des objets avec des propriétés et des valeurs dans le format exact que Google Graphique JavaScript s'attend à recevoir dans le navigateur. J'ai fait comme ceci:

    $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) Vous devez recevoir cet objet JSON dans votre JavaScript sur votre page et de passer à Google Graphique JS. J'ai apporté en JQuery et ensuite utilisé l'AJAX méthode comme ceci: 

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

    Mon code snippets de se concentrer sur les parties de l'interrogation de la base mySQL, la génération de l'objet JSON Google API Graphiques besoins, et de le recevoir avec JQuery et AJAX. Espérons que cela éclaire!

    Belle réponse 1UP 🙂
    Belle réponse @Andrew Koper, c'est une bonne méthode... malheureusement les dernières méthodes de jquery ont désapprouvé async: false, alors assurez-vous d'utiliser 1.6.2 par 1.7.2 si vous voulez aller dans cette voie.

    OriginalL'auteur Andrew Koper