Annotated Timeline fail when using Date in JSON with double quotes

Jose Luis Canciani

unread,

Jun 9, 2009, 12:57:22 PM6/9/09

to Google Visualization API

Hello. Sorry if this is duplicated, I could not find a similar issue
in the posts.

I'm trying to create an Annotated Timeline using a JSON and Google
Query and I've found out that if you send the date (or datetime) types
in your JSON using double quotes it will fail with "Error: v[vb] is
not a function"

"v": new Date(2009,8,9) <--- this is OK
vs
"v": "new Date(2009,8,9)" <--- this will FAIL

The Table chart works fine with both kinds of syntax. I think the
proper one is using the double quotes (at least is what I've seen in
online validators). Is this a bug? Is this the expected behaviour?

Thanks,
Jose.

PS here's an index.html and datasource.json to test it.

index.html
==================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<script type='text/javascript' src='http://www.google.com/jsapi'></
script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages':
['table','annotatedtimeline']});
google.setOnLoadCallback(drawChart);
function drawChart() {
query = new google.visualization.Query('datasources.json');
query.send( function(response) {
if (response.isError()) {
alert('Error found: ' + response.getMessage() + ' -> ' +
response.getDetailedMessage());
} else {
var datatable = response.getDataTable();
var table = new google.visualization.Table(document.getElementById
('table_div'));
table.draw(datatable);
var chart = new google.visualization.AnnotatedTimeLine
(document.getElementById('chart_div'));
chart.draw(datatable, {displayAnnotations: true});

}
});
}
</script>
</head>
<body>
<div id='table_div' style='width: 700px; height: 240px;'></div>
<div id='chart_div' style='width: 700px; height: 240px;'></
div>
</body>
</html>
==================================================

datasources.json Just add or remove quotes on the json to see the
error, this will fail since the first datetime value is using the
double quotes.
==================================================
google.visualization.Query.setResponse(
{
"version":"0.6",
"reqId":"0",
"status":"ok",
"requestID":"0",
"table":{
"cols":[
{"id":"Datetime","label":"DateTime","type":"datetime"},
{"id":"Application","label":"Application","type":"number"}
],
"rows":[
{"c":[
{"v":"new Date(2009,06,09,11,14,10)","f":"2009-06-09 11:14:10"},
{"v":0}
]
},
{"c":[
{"v":new Date(2009,06,09,11,15,11),"f":"2009-06-09 11:15:11"},
{"v":0}
]
}
]
}
}
)
==================================================

VizGuy

unread,

Jun 11, 2009, 8:04:51 AM6/11/09

to google-visua...@googlegroups.com

You should not quote the date constructor.

By doing this, it is assumed to be a string, and not a date, and so you get the exception in the charts.

The reason that it is working in the table, is that it refers to the formatted values, and they are always strings, so the real value is never read.

Regards,

VizGuy

Jose Luis Canciani

unread,

Jun 11, 2009, 11:42:11 AM6/11/09

to Google Visualization API

Thanks for the tip! I'll have to modify the lib I'm using (I'm
generating this from PL/SQL, but that should do it.

Jose.

On Jun 11, 9:04 am, VizGuy <viz...@google.com> wrote:
> You should not quote the date constructor.By doing this, it is assumed to be

> a string, and not a date, and so you get the exception in the charts.
>
> The reason that it is working in the table, is that it refers to the
> formatted values, and they are always strings, so the real value is never
> read.
>
> Regards,
> VizGuy
>
> On Tue, Jun 9, 2009 at 7:57 PM, Jose Luis Canciani

> <jose.canci...@gmail.com>wrote:

George Moschovitis

unread,

Jul 8, 2009, 4:09:35 AM7/8/09

to Google Visualization API

The problem is that JSON libraries like json2.js return "new Date
(...)" (quoted).
Anyone knows how this behavior can be overridden?

-g.

On Jun 11, 3:04 pm, VizGuy <viz...@google.com> wrote:
> You should not quote the date constructor.By doing this, it is assumed to be

> a string, and not a date, and so you get the exception in the charts.
>
> The reason that it is working in the table, is that it refers to the
> formatted values, and they are always strings, so the real value is never
> read.
>
> Regards,
> VizGuy
>
> On Tue, Jun 9, 2009 at 7:57 PM, Jose Luis Canciani

> <jose.canci...@gmail.com>wrote:

Markw65

unread,

Jul 8, 2009, 2:42:14 PM7/8/09

to Google Visualization API

json.replace(/:\s*"(new Date$.*?$)"/g,":$1")

Mark

On Jul 8, 1:09 am, George Moschovitis <george.moschovi...@gmail.com>
wrote:

George Moschovitis

unread,

Jul 9, 2009, 12:14:32 PM7/9/09

to Google Visualization API

I was looking for something more ..elegant, but this will do the
trick.

thanks,
-g.

Reply all

Reply to author

Forward