Как работать с динамическими данными и диаграммами Google?

Например, мы имеем эту линейную диаграмму на Google Code API Как работать с динамическими данными и диаграммами Google?

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

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

источник

2012-04-02 Django Anonymous

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

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

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

источник

2012-04-02 06:54:48 safarov

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

источник

2012-05-16 19:50:56

Хороший ответ 1UP :) –

Хороший ответ @Andrew Koper, это отличный метод ... к сожалению, последние методы jquery устарели «async: false», поэтому не забудьте использовать 1.6.2 - 1.7.2, если вы хотите пройти этот маршрут. –

Как работать с динамическими данными и диаграммами Google?

ответ

Смежные вопросы