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/-/pK4lE7MMJJ8J. 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.
