동적 데이터 및 Google 차트를 사용하는 방법은 무엇입니까? 예를 들어

우리는 그러나 나는 PHP/MySQL의 스크립트에서 내 자신의 데이터를 사용하여 차트를 만들려면,이 차트 반영 정의 된 데이터 세트가 Google Code API 동적 데이터 및 Google 차트를 사용하는 방법은 무엇입니까? 예를 들어

에서이 라인 차트가 있습니다. 여기

는

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

내가 내 마음에이 옵션은 데이터를 루프에서 다음 코드 조각을 유지하고 생성하는 것입니다 .. 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

대신 루프를 만들고 PHP 측에서 data.setCell()

로 전달 json로 데이터를 전달할 수는 데이터 JSON 형식을합니다. json_encode()을 사용하십시오. 그리고 Api에서이 메서드를 사용하여 데이터를 전달합니다. 구글의 API 문서가 없습니다 중대하다 : 나에게 많은 좌절 뭔가에

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

출처

2012-04-02 06:54:48 safarov

귀하의 질문은 접촉 자세한 내용은이 링크를 확인하라! 특히 Charts API의 경우 기본적으로 모든 예제에서 차트의 데이터는 페이지에 하드 코딩되어 있습니다. 실제로는 기본적으로 항상 DB에 저장된 데이터를 렌더링하여 브라우저로 전송합니다.

1) 데이터베이스를 쿼리하고 속성을 가진 추가 객체를 포함하는 배열 인 객체 인 JSON/복합 데이터 구조를 "인쇄하고"전송하는 서버에 일부 코드가 필요합니다 (PHP 사용). 값은 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 객체를 받고 구글의 차트 JS에 전달해야합니다.

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

내 코드 조각

는 JSON 객체 구글 차트 API의 요구를 생성하는 MySQL의 DB를 쿼리의 주요 부분에 초점 JQuery와 및 AJAX와 함께 수신 : 나는이 같은 AJAX 방식의 사용 후 JQuery와에 데려와 . 희망이 조명!

출처

2012-05-16 19:50:56

좋은 답변 1UP :) –

좋은 답변 @Andrew Koper, 이것은 훌륭한 방법입니다 ... 불행히도 jquery의 최신 메소드는 'async : false'를 사용하지 않으므로 1.6.2에서 1.7.2까지 사용하십시오 너는이 길을 가고 싶어. –

동적 데이터 및 Google 차트를 사용하는 방법은 무엇입니까? 예를 들어

답변

관련 문제