2012-02-22 92 views
2

我在嘗試使用Google Charts API構建帶註釋的時間軸圖時遇到了問題。Google AnnotatedTimeLine日期時間JSON錯誤

在JSON,第一個「日期」一欄,如果我使用:

"v": new Date(2010, 01, 01)

然後我從我的頁面得到一個JavaScript錯誤說我有無效的JSON。

相反,如果我使用:

"v": "new Date(2010, 01, 01)"然後我得到的錯誤TypeError: 'undefined' is not a function (evaluating 'M[y]()')

我的JavaScript代碼是一個簡單的餅形圖的示例代碼的修改發現在:http://code.google.com/apis/chart/interactive/docs/php_example.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript" src="scripts/jquery-1.6.2.js"></script> 
    <script type="text/javascript"> 

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

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

    function drawChart() { 
     var jsonData = $.ajax({ 
      url: "getData.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.AnnotatedTimeLine(document.getElementById('chart_div')); 
     chart.draw(data, {width: 400, height: 240}); 
    } 

    </script> 
    </head> 

    <body> 
    <!--Div that will hold the pie chart--> 
    <div id="chart_div" style="height: 200px; width:200px;"></div> 
    </body> 
</html> 

我知道,人都有過類似的問題:

http://groups.google.com/group/google-visualization-api/browse_thread/thread/4cfe7f07e5ef4bcc

http://www.mail-archive.com/[email protected]/msg02940.html

在這些線程/頁

然而,答案似乎是使用"v": new Date(2010, 01, 01)但是這對我不起作用。

我不知道我在這裏錯過了什麼。

感謝

+0

能否請您創建的jsfiddle演示?並請使用jsonlint.com或任何其他工具驗證最終的JSON結構。 – Diode 2012-02-22 13:01:37

+0

我使用Jason驗證了最終的JSON結構(http://www.macupdate.com/app/mac/35588/jason),之前我從未使用過jsfiddle,所以我現在要弄清楚如何做到這一點,儘快將其發佈。 – jacobappleton 2012-02-22 13:10:47

+0

還要注意的是,在傑森,它使用' 「V」 時驗證: 「新的日期(2010,01,01),」'而不是' 「V」,新的日期(2010,01,01)' – jacobappleton 2012-02-22 13:11:41

回答

6

所以,我終於從谷歌可視化API的用戶羣有一點幫助了它。

當使用"v": "Date(2010, 01, 01)"時,它們都會被驗證爲JSON並呈現正確 - 請注意缺少"new"關鍵字。

希望這可以幫助別人在未來。

+0

它幫助了我,謝謝。 – 2012-07-25 04:51:33

+0

完美,這工作很好。 – 2013-06-20 10:30:01

+1

是的,他們應該從文檔中刪除「新」。傳入一個UNIX時間戳並像這樣調用日期:'{v:「Date(」+ myUnixTimestamp +「)」}'也可以。 – jhtong 2013-06-21 11:44:18

2

這是RAW和MESSY,但它的作品!

測試jQuery的1.4.2

google.load('visualization', '1', {packages: ['annotatedtimeline']}); 
google.load('jquery','1.4'); 
window.row = Array(); 

$.getJSON("https://spreadsheets.google.com/feeds/list/YOURDOCSKEYID/od6/public/values?alt=json-in-script&callback=?", 
    function (data) { 
    $.each(data.feed.entry, function(i,entry) { 
    row.push([new Date(entry.gsx$date.$t),+entry.gsx$column1.$t,+entry.gsx$column2.$t]); 
    }); 
}); 

function drawVisualization() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('date', 'Date'); 
    data.addColumn('number', 'Column 1'); 
    data.addColumn('number', 'Column 2'); 
    data.addRows(row); 

    var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
     document.getElementById('visualization')); 
    annotatedtimeline.draw(data, {'displayAnnotations': true}); 
} 

google.setOnLoadCallback(drawVisualization);