Hello everybody, i would like to display a chart using the google visualization chartrangefilter. I can get it work when the data comes from an array inside the code but i can't get it work when the data is coming from a spreadsheet, as i want.... Here is my code:
<html> <head> <script type="text/javascript"src="https://www.google.com/jsapi";></script> <script type="text/javascript"> google.load('visualization', '1.0', {packages: ['corechart', 'controls']}); google.setOnLoadCallback(initialize); function initialize() { var query = new google.visualization.Query( 'https://docs.google.com/spreadsheets/d/1TD6w3umaHJaFv_IW_Dizh5xk_em4q4JUDTFGA57ihxU/edit#gid=2107756481'); query.setQuery('select A, E'); query.send(drawDashboard); } function drawDashboard(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } // Create a dashboard. var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); var control = new google.visualization.ControlWrapper({ // Create a range slider, passing some options 'controlType' : 'ChartRangeFilter', 'containerId': 'chartRangeFilter_control_div', 'options' : { // Filter by the date axis. 'filterColumnIndex': 0, 'ui': { 'chartType': 'LineChart', 'chartOptions': { 'chartArea': {'width': '90%'}, 'hAxis': {'baselineColor': 'none'} }, // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000 'minRangeSize': 8640000 } }//, // Initial range: 2012-02-09 to 2012-03-20. // 'state': {'range': {'start': new Date (2015, 4, 28, 22, 0, 0), 'end': new Date (2015, 4, 29, 12, 0, 0)}} }); // Create a scatter chart, passing some options var chart = new google.visualization.ChartWrapper({ 'chartType' : 'ScatterChart', 'containerId' : 'chartContainer_div', 'options' : { 'chartArea': {'height': '80%', 'width': '90%'}, 'vAxis' : { // 'title' : 'Temperature', 'viewWindow': {'min': 10, 'max': 40}, // 'gridlines': {'count': 10}, // 'minorGridlines': {'count': 3} } 'legend': {'position': 'none'} } }); // Create our data table. var data = response.getDataTable(); dashboard.bind(control, chart); dashboard.draw(data); } </script> </head> <body> <!--Div that will hold the dashboard--> <div id="dashboard_div"> <table class="columns"> <tr> <td> <!--Divs that will hold each control and chart--> <div id="chartRangeFilter_control_div" style="width: 615px; height: 50px;"></div> </td> </tr> <tr> <td> <div id="chartContainer_div" style="width: 615px; height: 500px;></div> </td> </tr> </table> </div> </body> </html> Thanks for your help With best regards Pierre -- You received this message because you are subscribed to the Google Groups "Google Chart API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-chart-api. For more options, visit https://groups.google.com/d/optout.
