Reputation: 448
I have a project in Apps script that is trying to create a google chart to pop up in a modal above Google Sheets.
I have ChartC.html:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
google.script.run.drawChart(); //<-----This is where I want to call the function in Code.gs
</script>
<div id="example3.1" style="height: 400px;">GraphC</div>
and Code.gs:
function showDialog() { //This pops up the modal
var html = HtmlService.createHtmlOutputFromFile('GraphC')
.setWidth(800)
.setHeight(700);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'My custom dialog');
}
function drawChart() { //This draws the chart
var container = document.getElementById('example3.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
[ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
[ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
[ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
[ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
]);
chart.draw(dataTable);
}
Note that the Chart draws perfectly well in jsfiddle by itself OR if I replace the commented line in the html file with the 'drawChart' function and run it (instead of having that function in the .gs file itself).
But I want to call it from the .gs file because it's a pain to alter the html file from javascript. Is this possible?
Upvotes: 0
Views: 768
Reputation: 38130
The drawChart
requires the Google Charts JavaScript library which is being loaded on the client side code and it use the DOM which is not available on the server-side code. Considering this, the easier solution is to put the drawChart
function on the client-side.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example3.1" style="height: 400px;">GraphC</div>
<script>
function drawChart() { //This draws the chart
var container = document.getElementById('example3.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({
type: 'string',
id: 'Position'
});
dataTable.addColumn({
type: 'string',
id: 'Name'
});
dataTable.addColumn({
type: 'date',
id: 'Start'
});
dataTable.addColumn({
type: 'date',
id: 'End'
});
dataTable.addRows([
['President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
['President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
['President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)],
['Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
['Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
['Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
['Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
]);
chart.draw(dataTable);
}
google.charts.load("current", {
packages: ["timeline"]
});
google.charts.setOnLoadCallback(drawChart);
</script>
Upvotes: 1