[visualization-api] Re: Datetime object in Annotated Timeline. Buggy? - psywhale - com.googlegroups.google-visualization-api

4 messages in com.googlegroups.google-visualization-api[visualization-api] Re: Datetime obje...

From	Sent On	Attachments
psywhale	24 Jun 2008 12:09
psywhale	24 Jun 2008 12:14
Jason Brechin	24 Jun 2008 14:23
psywhale	24 Jun 2008 15:20

Subject:	[visualization-api] Re: Datetime object in Annotated Timeline. Buggy?
From:	psywhale (psyc...@gmail.com)
Date:	06/24/2008 12:14:32 PM
List:	com.googlegroups.google-visualization-api

Please excuse the line numbers in the following code. I did not realize they were there until after posting..

I have used my email stats data to create a timeline, Unfortunately the timeline interface is very buggy when zooming or scrolling horizontally.

You can look at it here:http://www.western.cc.ok.us/~bcarp/google_vis/final.html

I have tried it with firefox and IE. IE slows down alot when it tries to render.

Is it the number of lines I am trying to render (seven) ?

The fact I'm using datetime objects? Too large a dataset?

Example code:

1 <html> 2 <head> 3 <script type="text/javascript" src="http://www.google.com/ jsapi"></script> 4 <script type="text/javascript"> 5 google.load("visualization", "1", {packages: ["annotatedtimeline"]}); 6 google.setOnLoadCallback(drawChart); 7 function drawChart() { 8 var data = new google.visualization.DataTable(); 9 data.addColumn('date', 'Hour '); 10 data.addColumn('number', ' Rate Controlled '); 11 data.addColumn('number', ' Blocked: Bad Recipient '); 12 data.addColumn('number', ' Blocked: Spam '); 13 data.addColumn('number', ' Blocked: Virus '); 14 data.addColumn('number', ' Quarantined '); 15 data.addColumn('number', ' Allowed: Tagged '); 16 data.addColumn('number', ' Allowed '); 17 data.addRows(48); 18 data.setValue(0,0,new Date(2008,5,22,00 ,00,00)); 19 data.setValue(0,1, 123 ); 20 data.setValue(0,2, 0 ); 21 data.setValue(0,3, 211 ); 22 data.setValue(0,4, 0 ); 23 data.setValue(0,5, 2 ); 24 data.setValue(0,6, 1 ); 25 data.setValue(0,7, 3 ); 26 data.setValue(1,0,new Date(2008,5,22,01 ,00,00)); 27 data.setValue(1,1, 912 ); 28 data.setValue(1,2, 0 ); 29 data.setValue(1,3, 2962 ); 30 data.setValue(1,4, 0 ); 31 data.setValue(1,5, 17 ); 32 data.setValue(1,6, 2 ); 33 data.setValue(1,7, 6 ); 34 data.setValue(2,0,new Date(2008,5,22,02 ,00,00)); 35 data.setValue(2,1, 690 ); 36 data.setValue(2,2, 0 ); 37 data.setValue(2,3, 2738 ); 38 data.setValue(2,4, 0 ); 39 data.setValue(2,5, 19 ); 40 data.setValue(2,6, 8 ); 41 data.setValue(2,7, 9 );

etc... etc...

394 data.setValue(47,0,new Date(2008,5,23,23 ,00,00)); 395 data.setValue(47,1, 1473 ); 396 data.setValue(47,2, 0 ); 397 data.setValue(47,3, 2525 ); 398 data.setValue(47,4, 0 ); 399 data.setValue(47,5, 10 ); 400 data.setValue(47,6, 5 ); 401 data.setValue(47,7, 26 ); 402 403 var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div')); 404 chart.draw(data, {displayAnnotations: true}); 405 } 406 </script> 407 </head> 408 <body> 409 <div id="chart_div" style="width: 700px; height: 240px;"></ div> 410 </body> 411 </html>