Fixed it! Thank you so much! On Monday, June 4, 2012 6:58:29 AM UTC-7, asgallant wrote: > > 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/-/vZeWl377NHgJ. 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.
