google not defined in google script - Error
Question
I get the error "google is not defined", from my google script that creates a table using google.visualization.
How do you add a reference to a google script, and if I get it to run in scripts will I also have to add it to my google site? I'll put my script below.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
function doGet() {
drawTable()
}
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time');
data.addRows(1);
data.setCell(0, 0, 'John');
data.setCell(0, 1, 10000, '$10,000');
data.setCell(0, 2, true);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true});
google.visualization.events.addListener(table, 'select', function() {
var row = table.getSelection()[0].row;
alert('You selected ' + data.getValue(row, 0));
});
}
2 answers
solution1
5 ACCPTED 2015-04-04 02:20:55
Apps Script uses JavaScript as it's server side code. Originally, JavaScript was designed as a language to run in the browser (on the users computer). JavaScript in an HTML file, won't run the JavaScript on Google's servers.
In the script editor, you can create two types of files:
- Script
- HTML
doGet() can only be used in a .gs script file. You can't use it in HTML JavaScript.
Your Code.gs file should have some code that looks like this:
Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
};
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
};
Then you need an HTML file.
index.html
<div id="EntireSite">
<div>
body
<?!= include('Chart'); ?>
<br><br><br><br><br><br><br><br><br><br><br>
</div>
<div>
My Footer
</div>
<div style="background: brown">
<br>
<br>
<br>
<br>
</div>
</div>
In this example, you need a second HTML file for the chart:
Chart.html
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }],
['Copper', 8.94, '#b87333', ],
['Silver', 10.49, 'silver'],
['Gold', 19.30, 'gold'],
['Platinum', 21.45, 'color: #e5e4e2' ]
]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
bar: {groupWidth: '95%'},
legend: 'none',
};
var chart_div = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(chart_div);
chart.draw(data, options);
}
</script>
<div id='chart_div'></div>
solution2
1 2015-04-04 02:18:55
Firstly, it seems that you are missing <script> tags around the JavaScript functions that follow the reference to the google.com/jsapi.
Also you need to call the following function to load the appropriate "package".
google.load('visualization', '1.0', {'packages':['table']});
And this function to call drawTable()
google.setOnLoadCallback(drawTable);
Assuming that you are embedding the script within a HTML page, the complete page would look something like:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the table package.
google.load('visualization', '1.0', {'packages':['table']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time');
data.addRows(1);
data.setCell(0, 0, 'John');
data.setCell(0, 1, 10000, '$10,000');
data.setCell(0, 2, true);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true});
google.visualization.events.addListener(table, 'select', function() {
var row = table.getSelection()[0].row;
alert('You selected ' + data.getValue(row, 0));
});
}
</script>
</head>
<body>
<div id="table_div"></div>
</body>
</html>
My answer is based on documentation found here: https://developers.google.com/chart/interactive/docs/gallery/table
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.