There is a security issue with the Google Docs spreadsheets that appears for some users in some browsers, but there doesn't appear to be any pattern that would hint at a cause. I have not found a workaround for the problem, other than having the user log in to Google Docs.
On Tuesday, January 14, 2014 4:26:00 PM UTC-5, [email protected] wrote: > > I'm struggling with the following HTML, and have reached a road block. > The when this page loads the gauge_div is empty, usually. If I open the > linked google sheet in a new tab, and then move my cursor out to an empty > cell in the first column of both pages of the spreadsheet, then reload the > page with the gauges then they work fine. Seems like a permission issue on > the google sheet, but I don't understand it because the sheet allows view > access for anyone with the link. > > Any ideas would be appreciated. > > <html> > <head> > <title> > Animated Gauge fed by Sheet > </title> > <!-- One script tag loads all the required libraries! Do not specify > any chart types in the autoload statement. --> > <script type="text/javascript" > src='https://www.google.com/jsapi?autoload={ > "modules":[{"name":"visualization","version":"1"}]}'> > </script> > > <script type="text/javascript"> > > function drawCharts () { > var query1 = new google.visualization.Query(' > https://docs.google.com/a/csd99.org/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=drive_web&gid=0&headers=1' > ); > query1.send(function (response) { > if (response.isError()) { > alert('Error in query: ' + response.getMessage() + ' ' + > response.getDetailedMessage()); > return; > } > > var data1 = response.getDataTable(), data2 = null; > var chart = new google.visualization.ChartWrapper({ > chartType: 'Gauge', > containerId: 'gauge_div', > dataTable: data1, > options: { > min: 0, > max: 35, > yellowFrom: 15, > yellowTo: 20, > redFrom: 20, > redTo: 30, > greenColor: 999900, > yellowColor: '#FFFF99', > redColor: 660066, > minorTicks: 10, > animation: { > duration: 800, > easing: 'out' > } > } > }); > var table = new google.visualization.ChartWrapper({ > chartType: 'Table', > containerId: 'table_div', > dataTable: data1, > options: { > width: 200 > } > }); > > chart.draw(); > table.draw(); > > var lastMonth = document.querySelector('#lastMonth'); > var thisMonth = document.querySelector('#thisMonth'); > > function drawLastMonth () { > chart.setDataTable(data1); > table.setDataTable(data1); > chart.draw(); > table.draw(); > lastMonth.disabled = 'disabled'; > thisMonth.disabled = null; > } > function drawThisMonth () { > if (data2 != null) { > chart.setDataTable(data2); > table.setDataTable(data2); > chart.draw(); > table.draw(); > lastMonth.disabled = null; > thisMonth.disabled = 'disabled'; > } > else { > var query2 = new google.visualization.Query(' > https://docs.google.com/a/csd99.org/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=drive_web&gid=2&headers=1' > ); > query2.send(function (response) { > if (response.isError()) { > alert('Error in query: ' + response.getMessage() + > ' ' + response.getDetailedMessage()); > return; > } > data2 = response.getDataTable(); > drawThisMonth(); > }); > } > } > > if (document.addEventListener) { > lastMonth.addEventListener('click', drawLastMonth); > thisMonth.addEventListener('click', drawThisMonth); > } > else if (document.attachEvent) { > lastMonth.attachEvent('onclick', drawLastMonth); > thisMonth.attachEvent('onclick', drawThisMonth); > } > else { > lastMonth.onclick = drawLastMonth; > thisMonth.onclick = drawThisMonth; > } > }); > } > google.load('visualization', '1', {packages:['controls'], callback: > drawCharts}); > </script> > </head> > <body> > <h3>Data for gauges located in this sheet on worksheets 1 and 2</h3> > <h3><a href = ' > https://docs.google.com/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=sharing'> > > here.</a></h3> > <div id='gauge_div' style='height: 150px; width: 500px;'></div> > <div id='table_div'></div> > <input id="lastMonth" type="button" disabled="disabled" value="Last Month" > /> > <input id="thisMonth" type="button" value="This Month" /> > </body> > </html> > > Data for gauges located in this sheet on worksheets 1 and 2 > here.<https://docs.google.com/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=sharing> > > > -- You received this message because you are subscribed to the Google Groups "Google Visualization 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-visualization-api. For more options, visit https://groups.google.com/groups/opt_out.
