On Jun 4, 12:09 pm, Nick <[email protected]> wrote: > I can't seem to have multiple Annotated Timelines on the same page. > Both timelines use the same code (as seen below) to format a JSON > response from my server into a DataTable. The problem is that upon > loading the page, only the first Annotated Timeline appears, and the > other doesn't give any error. I know this is valid data because if I > make both timelines read from the same JSON source, only the first one > appears. >
I've been able to do this, albeit with Google Spreadsheets as data source: http://www.metasea.com/hed/reoahu.html Haven't tried this with a JSON source, but here's the code I'm using, in case you can glean something from it: google.load("visualization", "1", {packages: ["annotatedtimeline"]}); google.setOnLoadCallback(initialize); function initialize() { // This points to the RE-Oahu worksheet in HED on MetaSea docs. var query = new google.visualization.Query( 'http://spreadsheets.google.com/pub? key=pyY_PYKkvEXv8QQ0ROYLzVQ&output=html&gid=0'); // This tells which columns of the spreadsheet to display for the price chart query.setQuery('select A,B,D,E,F,H,I'); query.send(drawprices); // This points to the RE-Oahu worksheet in HED on MetaSea docs. var query = new google.visualization.Query( 'http://spreadsheets.google.com/pub? key=pyY_PYKkvEXv8QQ0ROYLzVQ&output=html&gid=0'); // This tells which columns of the spreadsheet to display for the sales chart query.setQuery('select A,C,D,E,G,H,I'); query.send(drawsales); } // This code draws the price chart function drawprices(response) { if (response.isError()) { alert("Error in query") } var Data = response.getDataTable(); var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chartprices_div')); chart.draw(Data, {displayAnnotations: true, allowHtml: true, displayZoomButtons: false, legendPosition: 'newRow', zoomStartTime: new Date(2000,0,0), scaleType: 'fixed', colors: ['#009999', 'gray']}); } // This code draws the sales chart function drawsales(response) { if (response.isError()) { alert("Error in query") } var Data = response.getDataTable(); var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chartsales_div')); chart.draw(Data, {displayAnnotations: true, allowHtml: true, displayZoomButtons: false, legendPosition: 'newRow', zoomStartTime: new Date(2000,0,0), scaleType: 'fixed', colors: ['#009999', 'gray']}); } -- 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.
