Hello Im trying to load 2 scripts at the same page but they seem to be overlapping eachother.In the first script im getting a table with a few columns and cells. In the 2nd one im getting just a single cell from the second sheet tab but as i said they overlap eachother and i can see only one at a time. This is my first time using google visualizations and i tried to rename the variables and names but i get the same thing.Is there a way to merge both scripts in one and have the html page load both of them without overlapping. Thank you.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
</head>
<body >
<div id="box">
<script src="js/google-sheets-html.js" type="text/javascript"></script>
<div id="table">
</div>
</div>
<div id="box2">
<script src="js/google-sheets-html2.js" type="text/javascript"></script>
<div id="table2">
</div>
</div>
</body>
</html>
First Script
google.load('visualization', '1', {
packages: ['table']
});
var visualization;
function drawVisualization() {
var query = new google.visualization.Query('https://spreadsheets.google.com/tq?key=xxx&output=html&usp=sharing');
query.setQuery('SELECT A, B, C, D, E, F, G ,H ,I ORDER BY A DESC Limit 10 label A "Date", B "Agent", C "Client", D "Country", E "Desk", F "Department", G "Method", H "Amount", I "Currency"');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('There was a problem with your query: ' + response.getMessage() + '' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
allowHtml: true,
legend: 'bottom'
});
}
google.setOnLoadCallback(drawVisualization);
Second Script
google.load('visualization', '1', {
packages: ['table']
});
var visualization;
function drawVisualization() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/xxx/gviz/tq?gid=xxx');
query.setQuery('SELECT A');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('There was a problem with your query: ' + response.getMessage() + '' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.Table(document.getElementById('table2'));
visualization.draw(data, {
allowHtml: true,
legend: 'bottom'
});
}
google.setOnLoadCallback(drawVisualization);