как работать с динамическими данными и гугл-графиками? - PullRequest
Новая
       19

как работать с динамическими данными и гугл-графиками?

4 голосов
/ 02 апреля 2012

Например, у нас есть эта линейная диаграмма в Google Code API

есть определенный набор данных, который отражает эта диаграмма, однако я хочу создать диаграмму, используя мои собственные данные изphp / mysql scripting.

Вот код, предоставленный Google для встраивания в 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>

У меня есть возможность сохранить следующий фрагмент кода вцикл и генерировать данные.У кого-нибудь есть простой и эффективный способ сделать это? 

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

Ответы [ 2 ]

9 голосов
/ 16 мая 2012

Ваш вопрос затрагивает кое-что, что меня сильно расстроило: документация Google API не велика! В частности, для API диаграмм, в основном во всех их примерах, данные для их диаграммы жестко запрограммированы на странице, и в реальной жизни вы в основном всегда будете отображать данные, хранящиеся в БД и передаваемые в браузер.

1) Вам нужен некоторый код на сервере (я использую PHP), который запрашивает базу данных, «печатает» и передает структуру данных JSON / complex, которая представляет собой объект, в котором свойства являются массивами, которые содержат дополнительные объекты со свойствами и значениями. в точном формате, который Google Chart JavaScript ожидает получить в браузере. Я сделал это так: 

$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, генерации объекта JSON, который нужен API Google Charts, и получения его с помощью JQuery и AJAX. Надеюсь, что это освещает!

3 голосов
/ 02 апреля 2012

Вы можете передавать данные как json вместо создания цикла и передачи с data.setCell()

На стороне php создайте данные в формате json.Использование json_encode().И на Api используйте этот метод для передачи данных.Проверьте эту ссылку для получения дополнительной информации

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

...