Annotated Timeline JSON

309 views

Skip to first unread message

ja...@mapthemoney.com

unread,

Mar 4, 2012, 2:55:03 AM3/4/12

to Google Visualization API

Hi there,

I am having an issue when trying to build an Annotated Timeline Graph
using the Google Visualisation API.

In the JSON, for the first "date" column, if I use:

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

Then I get a JavaScript error from my page saying that I have invalid
JSON.

If instead I use:

"v": "new Date(2010, 01, 01)" then I get the error TypeError:
'undefined' is not a function (evaluating 'M[y]()').

My JavaScript code is simply a modification of the example code for a
Pie Graph found at: 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>

<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 id="chart_div" style="height: 200px; width:200px;"></div>
</body>
</html>

I am aware that people have had similar problems:

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

http://www.mail-archive.com/google-visua...@googlegroups.com/msg02940.html

However in these threads/pages, the answer seems to be to use "v": new
Date(2010, 01, 01) however this does not work for me.

I'm not sure what I am missing here.

Thanks

asgallant

unread,

Mar 5, 2012, 9:40:13 AM3/5/12

to google-visua...@googlegroups.com

When passing date via JSON, you have to pass the Date as a string, since Date objects are not valid JSON. The proper format is "v": "Date(2010, 01, 01)" - note that there is no "new" keyword there.

Reply all

Reply to author

Forward

0 new messages