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.
