Sorry about the line wraps, I'm not sure how to avoid that (other than rewriting the code).
On Oct 28, 5:20 pm, Doughboy <[EMAIL PROTECTED]> wrote: > I've created this small dashboard in which changing the time range in > the top annotated time line controls the other 2 visualizations (pie > chart and bottom annotated time line). > > It works fine in FF(3.0.3) but in IE (6.0.2800.1106CO) it displays > only the text preceding the div tags. > Can anyone get it to work in IE or tell me why it fails? > > I use this localhost URL to view > it:http://localhost/devtools/metrics/googleTrend.htm > > Thanks in advance, > ~Tim > > <html> > <head> > <script src="http://www.google.com/jsapi";></script> > <script type="application/javascript"> > var code = { > pieViz: null, > trendViz: null, > trendTable: null, > trendView: null, > > init: function() { > code.pieViz = new > window.google.visualization.PieChart( document.getElementById( 'view_pie_div' > ) ); > code.trendViz = new > window.google.visualization.AnnotatedTimeLine( document.getElementById( > 'view_trend_div' ) ); > > code.trendTable = new > window.google.visualization.DataTable(); > code.trendTable.addColumn( 'date', 'Date' ); > code.trendTable.addColumn( 'string', 'type' ); > code.trendTable.addColumn( 'number', 'AgeDays' ); > code.trendTable.addRows( 5 ); > code.trendTable.setValue( 0, 0, new Date( 2008, 9, > 15 ) ); > code.trendTable.setValue( 0, 1, 'Incident' ); > code.trendTable.setValue( 0, 2, 1 ); > code.trendTable.setValue( 1, 0, new Date( 2008, 9, > 16 ) ); > code.trendTable.setValue( 1, 1, 'Incident' ); > code.trendTable.setValue( 1, 2, 4 ); > code.trendTable.setValue( 2, 0, new Date( 2008, 9, > 17 ) ); > code.trendTable.setValue( 2, 1, 'Incident' ); > code.trendTable.setValue( 2, 2, 4 ); > code.trendTable.setValue( 3, 0, new Date( 2008, 9, > 18 ) ); > code.trendTable.setValue( 3, 1, 'Incident' ); > code.trendTable.setValue( 3, 2, 1 ); > code.trendTable.setValue( 4, 0, new Date( 2008, 9, > 19 ) ); > code.trendTable.setValue( 4, 1, 'Incident' ); > code.trendTable.setValue( 4, 2, 3 ); > > var controller = new > window.google.visualization.AnnotatedTimeLine( document.getElementById( > 'controller_div' ) ); > controller.draw( code.trendTable, {} ); > > window.google.visualization.events.addListener( controller, > 'rangechange', function( range ) { code.rangechanger( range ); } ); > > code.trendView = new > window.google.visualization.DataView( code.trendTable ); > code.trendView.setColumns( [ 0, 2 ] ); > }, > > drawPie: function( range ) { > var pieTable = code.trendTable.clone(); // remove > all rows outside time range, in reverse time order to preserve > rowIndices > var sRangeStart = range.start.toString(); > var sRangeEnd = range.end.toString(); > > var filterStart = { column: 0, value: new > Date( sRangeStart.substr( 0, 15 ) ) }; > filterStart.value.setDate( filterStart.value.getDate() > + 1 ); > var filterEnd = { column: 0, value: new > Date( sRangeEnd.substr( 0, 15 ) ) }; > filterEnd.value.setDate( filterEnd.value.getDate() + > 1 ); > > var rowStart = Number > ( pieTable.getFilteredRows( [ filterStart ] ) ); > var rowEnd = Number > ( pieTable.getFilteredRows( [ filterEnd ] ) ); > var numRows = Number ( pieTable.getNumberOfRows() - > 1 ); > var tailRows = numRows - rowEnd; > if ( tailRows > 0 ) { > numRows = numRows - 1; > rowEnd = rowEnd + 1; > pieTable.removeRows( rowEnd, numRows ); > } > > if ( rowStart > 0 ) { > pieTable.removeRows( 0, rowStart ); > } > > var DV = new > window.google.visualization.DataView( pieTable ); > DV.setColumns( [ 0, 2 ] ); > code.pieViz.draw( DV, {} ); > }, > > rangechanger: function( range ) { > code.trendViz.draw( code.trendView, > { displayZoomButtons: false, zoomStartTime: new Date( range.start ), > zoomEndTime: new Date( range.end ), colors: [ 'red' ]} ); > code.drawPie( range ); > } > }; > window.google.load( "visualization", "1", { packages: > [ "annotatedtimeline" ] } ); > window.google.load( "visualization", "1", { packages: > [ "piechart" ] } ); > window.google.setOnLoadCallback( code.init );// Set callback > to run when API is loaded > </script> > </head> > <body> > <table cellspacing="10"> > <tbody> > <tr><td>Controls TimeLine Range<div id="controller_div" > style="width: 700px; height: 200px;"></div></td></tr> > <tr><td>Views Pie<div id="view_pie_div" style="width: 700px; > height: 200px;"></div></td></tr> > <tr><td>Views TimeLine<div id="view_trend_div" style="width: > 700px; 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 -~----------~----~----~----~------~----~------~--~---
