2011-08-15 55 views
10

如果它是單獨的JSON文件,如何檢索並使用Google圖表的數據集?我試過jQuery getJSON,但無法得到它的工作..谷歌Viz應該使用JSON繪製條形圖 是否有一個本地谷歌API的方式?或者我可以找到一種使用jQuery的方式,以及如何? 謝謝使用JSON繪製Google圖表

 // Load the Visualization API and the piechart package. 
    google.load('visualization', '1.0', {'packages':['corechart']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 

    // Callback that creates and populates a data table, 
    // instantiates the pie chart, passes in the data and 
    // draws it. 
    function drawChart() { 

     // Create the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Products'); 
     data.addColumn('number', 'Automated'); 
     data.addRows([ 
     ['Product 1', 85], 
     ['Product 2', 75], 
     ['Product 3', 90], 
     ['Product 4', 40], 
     ['Product 5', 40] 
     ]); 

     // Set chart options 
     var pie_options = {'title':'How Much Automated our Products are?', 
        'width':520,'height':300 
        }; 
     var bar_options ={'width': 620, 'height': 300, 
         'title': 'Products', 
         'hAxis': {'title': '% Automated', 'titleTextStyle': {'color': 'red', 'fontSize': 16}} 
         } 
     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.PieChart(document.getElementById('piechart_div')); 
     chart.draw(data, pie_options); 

    var chart = new google.visualization.ColumnChart(document.getElementById('barchart_div')); 
    chart.draw(data, bar_options); 
} 
+0

你會發布您的代碼,儘可能使我們可以有效地幫助你嗎? –

+0

@Taesung Shin sure – neverlate

回答

17

new google.visualization.DataTable(json)的作品。

查看dataTable.toJSON()的輸出結果以使用正確的結構。

所以,如果你有你的服務器上getjson.php腳本返回格式正確的JSON,你可以這樣做:

$.getJSON('/getjson.php', function(json) { 
    var dataTable = new google.visualization.DataTable(json); 
}); 
+0

謝謝,我還沒有一個php腳本,但我可以嘗試這個調用一個有效的json文件 – neverlate