I got it to work! I was using the wrong package! Watch it! It can give you too many headaches!
On Thursday, May 31, 2012 5:58:01 PM UTC-7, 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/-/fJRflGXlhZAJ. 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.
