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