Wright Tech
2016-09-04 01:16:51 UTC
I am using a google sheet as the data source for my charts. I can draw a
single chart on a page but when I add the code to draw the second chart, it
draws the same chart two times. Interestingly when I refresh the page,
sometimes I see the other graph alternatively. Any suggestions will be
appreciated. Following is the code:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript"
src="http://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Query the spreadsheet for data:
var queryString1 = encodeURIComponent('SELECT A, B');
var query1 = new google.visualization.Query(
'http://docs.google.com/spreadsheets/d/1cuvqyhr3qQJKolh-6iHL3BrQdVYV-rp64XITUN9UR0k/gviz/tq?sheet=Sheet2&headers=0&tq='
+ queryString1);
query1.send(handleSampleDataQueryResponse);
// Query the spreadsheet for data:
var queryString2 = encodeURIComponent('SELECT D, E');
var query2 = new google.visualization.Query(
'http://docs.google.com/spreadsheets/d/1cuvqyhr3qQJKolh-6iHL3BrQdVYV-rp64XITUN9UR0k/gviz/tq?sheet=Sheet2&headers=0&tq='
+ queryString2);
query2.send(handleSampleDataQueryResponse);
function handleSampleDataQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
// Get data from the query response:
var data1 = response.getDataTable();
var data2 = response.getDataTable();
// Set chart options:
var options1 = {"title":'Apps Usage in Open Lab',
'width':900,
'height':500};
// Set chart options:
var options2 = {"title":'Busy hours in Open Lab',
'width':900,
'height':500};
// Instantiate and draw the chart, passing in some options:
var chart1 = new
google.visualization.PieChart(document.getElementById('Pie-Apps-Chart'));
chart1.draw(data1, options1);
var chart2 = new
google.visualization.PieChart(document.getElementById('Pie-Time-Chart'));
chart2.draw(data2, options2);
// Re-draw chart at set interval:
//setTimeout(drawChart, 3000);
}
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="Pie-Apps-Chart"></div>
<div id="Pie-Time-Chart"></div>
</body>
</html>
single chart on a page but when I add the code to draw the second chart, it
draws the same chart two times. Interestingly when I refresh the page,
sometimes I see the other graph alternatively. Any suggestions will be
appreciated. Following is the code:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript"
src="http://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Query the spreadsheet for data:
var queryString1 = encodeURIComponent('SELECT A, B');
var query1 = new google.visualization.Query(
'http://docs.google.com/spreadsheets/d/1cuvqyhr3qQJKolh-6iHL3BrQdVYV-rp64XITUN9UR0k/gviz/tq?sheet=Sheet2&headers=0&tq='
+ queryString1);
query1.send(handleSampleDataQueryResponse);
// Query the spreadsheet for data:
var queryString2 = encodeURIComponent('SELECT D, E');
var query2 = new google.visualization.Query(
'http://docs.google.com/spreadsheets/d/1cuvqyhr3qQJKolh-6iHL3BrQdVYV-rp64XITUN9UR0k/gviz/tq?sheet=Sheet2&headers=0&tq='
+ queryString2);
query2.send(handleSampleDataQueryResponse);
function handleSampleDataQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
// Get data from the query response:
var data1 = response.getDataTable();
var data2 = response.getDataTable();
// Set chart options:
var options1 = {"title":'Apps Usage in Open Lab',
'width':900,
'height':500};
// Set chart options:
var options2 = {"title":'Busy hours in Open Lab',
'width':900,
'height':500};
// Instantiate and draw the chart, passing in some options:
var chart1 = new
google.visualization.PieChart(document.getElementById('Pie-Apps-Chart'));
chart1.draw(data1, options1);
var chart2 = new
google.visualization.PieChart(document.getElementById('Pie-Time-Chart'));
chart2.draw(data2, options2);
// Re-draw chart at set interval:
//setTimeout(drawChart, 3000);
}
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="Pie-Apps-Chart"></div>
<div id="Pie-Time-Chart"></div>
</body>
</html>
--
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 google-visualization-api+***@googlegroups.com.
To post to this group, send email to google-visualization-***@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/05648c84-5a93-40d0-b12b-c1cf065ecb64%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
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 google-visualization-api+***@googlegroups.com.
To post to this group, send email to google-visualization-***@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/05648c84-5a93-40d0-b12b-c1cf065ecb64%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.