That is most likely a Flash security problem, coming from the AnnotatedTimeline. See the notes<https://developers.google.com/chart/interactive/docs/gallery/annotatedtimeline#notes>at the bottom of the ATL charts page for a fix.
On Saturday, June 2, 2012 3:29:37 AM UTC-4, far m wrote: > > Thank you so much. I changed the header to the following. I know the code > is good. But still the html file does not display the graph. It is very > strange, because I have a similar code, and that works ok. I am missing > some fundamental idea! I expect to see the chart if I just copy this html > code in mychart.html file and view it in the browser. But instead I get a > blank page! > ------------------------------------------------------ > <!-- > You are free to copy and use this sample in accordance with the terms of > the > Apache license (http://www.apache.org/licenses/LICENSE-2.0.html) > --> > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " > http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <meta http-equiv="content-type" content="text/html; charset=utf-8" /> > <title>MY Google Visualization API Sample</title> > <script type='text/javascript' src='http://www.google.com/jsapi'></script> > <script type="text/javascript"> > google.load('visualization', '1', {packages: ['annotatedtimeline']}); > </script> > <script type="text/javascript"> > google.setOnLoadCallback(drawVisualization); > > > function drawChart() { > var query = new google.visualization.Query(' > https://docs.google.com/spreadsheet/ccc?key=0AqzQGhNv6cV-dDVzRWdINUxycGxQcWgtcktCRG5IQ1E' > ); > > // Assumes that column: > query.setQuery('SELECT M,B'); > > // Send the query with a callback function. > query.send(handleQueryResponse); > } > > function handleQueryResponse(response) { > if (response.isError()) { > alert('Error in query: ' + response.getMessage() + ' ' + > response.getDetailedMessage()); > return; > } > > var data = response.getDataTable(); > var chart = new > google.visualization.AnnotatedTimeLine(document.getElementById('chart_div')); > chart.draw(data, { > displayAnnotations: true, > scaleColumns: [12, 1], > scaleType: 'allfixed' > }); > } > </script> > </head> > <body> > <div id="chart_div" style="width: 500px; height: 300px;"></div> > </body> > </html> > --------------------------------------------------------------------- > > On Friday, June 1, 2012 6:41:04 AM UTC-7, asgallant wrote: >> >> You are missing the Google jsapi script tag: >> >> <script type='text/javascript' src='http://www.google.com/jsapi >> '></script> >> >> On Thursday, May 31, 2012 8:58:01 PM UTC-4, far m wrote: >>> >>> I know the code works: http://jsfiddle.net/essonoma/uKKMV/ I even tried >>> it with jsfiddle: http://jsfiddle.net/essonoma/9M9jR/#base >>> >>> But when I put everything in a HTML file and publish it nothing shows >>> up. It is very strange. This is the complete HTML code: >>> >>> ------------------ >>> >>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " >>> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> >>> <html xmlns="http://www.w3.org/1999/xhtml";> >>> <head> >>> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> >>> <title>test</title> >>> >>> >>> >>> </head> >>> <script> >>> // Add this to resources: http://www.google.com/jsapi?fake=.js >>> // Make sure you have NO WRAPE on >>> >>> google.load('visualization', '1', {packages: ['controls']}); >>> google.setOnLoadCallback(drawVisualization); >>> >>> // why make these global? >>> var visualization; >>> var visualization2; >>> >>> function drawVisualization() { >>> // To see the data that this visualization uses, browse to >>> // http://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ >>> var query = new google.visualization.Query(' >>> https://docs.google.com/spreadsheet/ccc?key=0AqzQGhNv6cV-dDBzZmZ2NzVGSkVVTUEwMEZPOG5YTHc#gid=0' >>> ); >>> >>> // Apply query language. >>> query.setQuery('SELECT A,B,C'); >>> >>> // Send the query with a callback function. >>> query.send(handleQueryResponse); >>> } >>> >>> function handleQueryResponse(response) { >>> if (response.isError()) { >>> alert('Error in query: ' + response.getMessage() + ' ' + >>> response.getDetailedMessage()); >>> return; >>> } >>> >>> var data = response.getDataTable(); >>> >>> visualization = new google.visualization.ChartWrapper({ >>> chartType: 'LineChart', >>> containerId: 'chart1', >>> options: { >>> title: "Temperature (F) VS. Time", >>> width: 500, >>> height: 100, >>> chartArea: {'left': 25, 'top': 15, 'right': 20, 'bottom': 0}, >>> legend: 'none', // it could be something else " " >>> vAxis: { >>> title: "Fahrenheit" >>> }, >>> hAxis: { >>> title: "Time (YYYYMMDD.HHMMSS)" >>> } >>> }, >>> view: { // use columns 0, 1 >>> columns: [0, 1] >>> } >>> }); >>> >>> visualization2 = new google.visualization.ChartWrapper({ >>> chartType: 'LineChart', >>> containerId: 'chart2', >>> >>> options: { >>> // Use the same chart area width as the control for axis >>> alignment. >>> hAxis: {'slantedText': false}, // Add actual dates >>> title: "Wind Speed", >>> vAxis: { title: "MPH"}, >>> //hAxis: { title: "Time"},// removes actual dates and adds "Time" >>> width: 500, >>> height: 100, >>> legend: {'position': 'none'}, >>> chartArea: {'left': 25, 'top': 0, 'right': 20, 'bottom': 80} >>> }, >>> >>> >>> >>> >>> // options: { >>> // title: "Wind Speed", >>> // width: 500, >>> // height: 100, >>> // chartArea: {'left': 15, 'top': 15, 'right': 0, 'bottom': >>> 0}, >>> // vAxis: { >>> // title: "MPH" >>> // }, >>> // hAxis: { >>> // title: "Time" >>> // } >>> // }, >>> view: { // use columns 0 (converted to date object), 2 >>> columns: [{ >>> type: 'datetime', >>> label: 'Time', >>> calc: function (dt, row) { >>> var val = dt.getValue(row, 0); >>> var year = Math.floor(val / 10000); >>> val = val - (10000 * year); >>> var month = Math.floor(val / 100) - 1; // js months >>> are zero-indexed >>> val = val - (100 * (month + 1)); >>> var day = Math.floor(val); >>> val = val - day; >>> var hour = Math.floor(val * 100); >>> val = val - (hour / 100); >>> var minute = Math.floor(val * 10000); >>> val = val - (minute / 10000); >>> var second = Math.floor(val * 1000000); >>> val = val - (second / 1000000); >>> return new Date(year, month, day, hour, minute, >>> second); >>> } >>> }, 2] >>> } >>> }); >>> >>> //////////////////////// >>> >>> // Define a slider control for the Temp column. >>> var slider = new google.visualization.ControlWrapper({ >>> controlType: 'NumberRangeFilter', >>> containerId: 'control1', >>> options: { >>> filterColumnLabel: 'Temp', >>> ui: { >>> labelStacking: 'horizontal'// or vertical >>> } >>> } >>> }); >>> >>> // Define a TIME slider control for the Temp column. >>> var slidertime = new google.visualization.ControlWrapper({ >>> controlType: 'NumberRangeFilter', >>> containerId: 'control3', >>> options: { >>> filterColumnLabel: 'Time', >>> ui: { >>> labelStacking: 'horizontal'// or vertical >>> } >>> } >>> }); >>> >>> // Define a category picker control for the WindSpeed column >>> var categoryPicker = new google.visualization.ControlWrapper({ >>> controlType: 'NumberRangeFilter', >>> containerId: 'control2', >>> options: { >>> filterColumnLabel: 'WindSpeed', >>> ui: { >>> labelStacking: 'horizontal', >>> allowTyping: false, >>> allowMultiple: false >>> } >>> } >>> }); >>> >>> >>> >>> >>> // Create a dashboard >>> new >>> google.visualization.Dashboard(document.getElementById('dashboard')). >>> // Establish bindings, declaring the both the slider and the category >>> // picker will drive both charts. >>> bind([slidertime], [visualization, visualization2]). >>> // Draw the entire dashboard. >>> draw(data); >>> >>> } >>> </script> >>> <body> >>> <div id="dashboard"> >>> <table width="200" border="5"> >>> <tr> >>> <td> >>> <div id="control.1"></div> >>> <div id="control2"></div> >>> <div id="control3"></div></td> >>> </tr> >>> <tr> >>> <td> >>> <div style="float: left;" id="chart1"></div> >>> <div style="float: left;" id="chart2"></div> >>> <div style="float: left;" id="chart3"></div></td> >>> </tr> >>> </table> >>> </div> >>> </body> >>> </html> >>> >>> >>> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/Qvj_Z5J4tHIJ. 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.
