Thanks to some other other posts, I was able to get most of what I was
looking for (code below). This will display multiple ATL's, controlled
by a single timeline, and hides the non-controlling timelines with
overlapping div's. The remaining shortcomings are (1) a short delaying
between zooming the lower display, and reaction by the top display,
and (2) the mouse-over data points work on one display or the other,
not synchronised over all the stacked ATL's as I'd like. It's
workable, though, and I appreciate Google providing such neat tool.
<html>
<head>
<style type="text/css" media="screen">
<!--
#primary_div { bottom center no-repeat; width:700px; height: 200px;
margin: 0px,0px,-65px,0px }
#assoc_div { opacity:1.0; width:700px; height: 200px; margin: 0}
-->
</style>
<script src="http://www.google.com/jsapi";></script>
<script type="text/javascript">
var code = {
init: function() {
code.primaryLine = new
window.google.visualization.AnnotatedTimeLine( document.getElementById
( 'primary_div' ) );
code.dataTable = new window.google.visualization.DataTable();
code.dataTable.addColumn( 'date', 'Date' );
code.dataTable.addColumn( 'number', 'temp' );
code.dataTable.addColumn( 'number', 'flow' );
code.dataTable.addRows( 5 );
code.dataTable.setValue( 0, 0, new Date( 2008, 9, 15 ) );
code.dataTable.setValue( 0, 1, 45 );
code.dataTable.setValue( 0, 2, 1000 );
code.dataTable.setValue( 1, 0, new Date( 2008, 9, 16 ) );
code.dataTable.setValue( 1, 1, 48 );
code.dataTable.setValue( 1, 2, 4000 );
code.dataTable.setValue( 2, 0, new Date( 2008, 9, 17 ) );
code.dataTable.setValue( 2, 1, 39 );
code.dataTable.setValue( 2, 2, 3500 );
code.dataTable.setValue( 3, 0, new Date( 2008, 9, 18 ) );
code.dataTable.setValue( 3, 1, 42 );
code.dataTable.setValue( 3, 2, 1000 );
code.dataTable.setValue( 4, 0, new Date( 2008, 9, 19 ) );
code.dataTable.setValue( 4, 1, 46 );
code.dataTable.setValue( 4, 2, 3000 );
code.assocView = new window.google.visualization.DataView
( code.dataTable );
code.assocView.setColumns( [ 0, 2 ] );
var assocLine = new
window.google.visualization.AnnotatedTimeLine( document.getElementById
( 'assoc_div' ) );
assocLine.draw( code.assocView, {} );
window.google.visualization.events.addListener( assocLine,
'rangechange', function( range ) { code.rangechanger( range ); } );
code.primaryView = new window.google.visualization.DataView
( code.dataTable );
code.primaryView.setColumns( [ 0, 1 ] );
},
rangechanger: function( range ) {
code.primaryLine.draw( code.primaryView,
{ displayZoomButtons: false, zoomStartTime: new Date
( range.start ),
zoomEndTime: new Date( range.end ), colors:
[ 'red' ]} );
}
};
window.google.load( "visualization", "1", { packages:
[ "annotatedtimeline" ] } );
window.google.setOnLoadCallback( code.init );// Set callback
to run when API is loaded
</script>
</head>
<body>
<table cellspacing="0"><tbody>
<tr><td><div id="primary_div" style="width:700px; height:
200px;"></div></td></tr>
<tr><td><div id="assoc_div"style="width: 704px; height: 200px;"></
div></td></tr>
</tbody></table>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en
-~----------~----~----~----~------~----~------~--~---
