Annotated Time Line now zooms to sub-day intervals!

Cesium

unread,

Jan 19, 2009, 2:52:32 PM1/19/09

to Google Visualization API

A poem in praise of the Viz gods.

Sipping on a Diet Coke,
Butter in my toast does soak.

I browsed the WEB to pass the meal.
My plots so kindly did reveal.

For spans well below a day,
ATL will zoom....Hurray!

Cesium

Cesium

unread,

Jan 19, 2009, 2:55:43 PM1/19/09

to Google Visualization API

Oh, and it zooms/pans/scrolls like butta' on IE7!
Sweet!
(Mmmm, smooth scrolling butta'.)
Cesium

v-jacko

unread,

Jan 20, 2009, 9:03:57 AM1/20/09

to Google Visualization API

Vogon poetry aside ;-), kudos to Viz team - this will be useful.

Damien C.

unread,

Jan 21, 2009, 9:42:39 AM1/21/09

to Google Visualization API

Hum, doesn't works for me. Got a series of dates between yesterday
22:00 and today 18:00, can't manage to have en hour scales, nor zoom .
Am I missing something ?

hokagenz

unread,

Jan 26, 2009, 5:41:09 PM1/26/09

to Google Visualization API

Can someone tell me how to zoom to sub-day intervals. Example code
would be good. I'm new to javascript.

Thanks

VizGuy

unread,

Jan 27, 2009, 5:10:32 AM1/27/09

to google-visua...@googlegroups.com

Zooming to sub day should work automatically now, if you are using datetime type for the first column, and not date.

note that for both the actual value is a javascript Date object, but in 'date' column type the time-of-day part of the date is ignored, and so the times assumed to be dates. This is why you can't zoom in to less than one day in that case.

Regards,

VizGuy

unread,

Jan 27, 2009, 5:21:19 AM1/27/09

to google-visua...@googlegroups.com

And here is a simple working example:

<html>

<head>

google.load('visualization', '1', {'packages':['annotatedtimeline']});

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = new google.visualization.DataTable();

data.addColumn('datetime', 'Date');

data.addColumn('number', 'Sold Pencils');

data.addRows(6);

data.setValue(0, 0, new Date(2008, 1 ,1, 13, 45, 00));

data.setValue(0, 1, 30000);

data.setValue(1, 0, new Date(2008, 1 ,1, 15, 55, 00));

data.setValue(1, 1, 14045);

data.setValue(2, 0, new Date(2008, 1 ,1, 22, 10, 00));

data.setValue(2, 1, 55022);

data.setValue(3, 0, new Date(2008, 1 ,2, 02, 20, 00));

data.setValue(3, 1, 75284);

data.setValue(4, 0, new Date(2008, 1 ,2, 10, 45, 00));

data.setValue(4, 1, 41476);

data.setValue(5, 0, new Date(2008, 1 ,2, 12, 00, 00));

data.setValue(5, 1, 33322);

var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));

chart.draw(data, {});

}

</script>

</head>

<body>

</body>

</html>

hokagenz

unread,

Jan 27, 2009, 4:30:42 PM1/27/09

to Google Visualization API

Thanks, zooming to sub day works great now. I just realised that
using datetime type for the first column is mentioned in the annotated
time line gallery.

> > type for the first column, and not date.note that for both the actual

> > value is a javascript Date object, but in 'date' column type the time-of-day
> > part of the date is ignored, and so the times assumed to be dates. This is
> > why you can't zoom in to less than one day in that case.
>
> > Regards,
> > VizGuy
>

Reply all

Reply to author

Forward