Hello everybody,
I'm learning to use the visualization api from google drive. I think I'm
having troubles with how caja interacts with my javascript. basically, I'm
trying to use functional scope as described in crockford's book: 'the good
parts'. however, I do not completely understand how to apply this to my GAS
project.
When I use document.getElementById in my function myLog I get "the
guestNode is null" error message. This same function works to get the div
to place the chart when it is created, but that is passed to the
google.visualization library.
So, I'm thinking I have a scope issue.
Any thoughts/hints about what I am missing would be appreciated.
thank you for your time,
jon
I'm using doGet() to serve up my webpage:
function doGet() {
'use strict';
var aWebPage, ss, qTitle, qSymbol, qName;
// switching from index to page as per best pactices tutorial
try {
aWebPage = HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
aWebPage.setTitle("index: insertAdjacentHTML example...");
Logger.log('all went well with doGet....');
} catch (dgError) {
Logger.log('there is an error in the doGet code');
}
return aWebPage;
}
index.html
<!-- this is to test calling a form, where i hacked in the form code
into a chart html template...
-->
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<!-- found this autoload example...
'https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1"}]}'
-->
<script type="text/javascript">
/*jslint regexp: true, sloppy: false, vars: true, white: true */
/*global google, alert, document, runIt */
google.load('visualization', '1', {packages:
['corechart','table']});
google.setOnLoadCallback(runIt);
function runIt() {
'use strict';
var cRH,
myChart,
myDC,
myLog;
myLog = function myLog(message){
var pElmOpen = "<p>",
pElmClose = "</p>",
cLog = "chart_log",
theDiv,
pElm;
try {
theDiv = document.getElementById(cLog);
} catch (theDivError) {
alert("catch error for theDiv: " +
theDivError.message);
}
pElm = pElmOpen + "myLog: " + message + pElmClose;
if (theDiv !== null) {
theDiv.insertAdjacentHTML("beforeEnd", pElm);
} else {
alert("theDiv is null myLog: " + message);
}
};
cRH = function chartReadyHandler() {
alert("the chart is ready!!!");
};
myDC = function myDrawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]),
options = {
title: 'My Daily Activities'
};
try {
myChart = new
google.visualization.PieChart(document.getElementById('piechart'));
google.visualization.events.addListener(myChart, 'ready',
cRH);
} catch (addlisError) {
alert("myChart/listener failed..." + addlisError.name + ": "
+ addlisError.message);
}
myChart.draw(data, options);
};
alert("calling myDC");
myDC();
myLog("all done");
}
alert('the end...');
</script>
</head>
<body>
<div id="piechart" style="width: 1100px; height: 600px;
max-width:100%; overflow:scroll;">
<p id="chart_div_p1">This is the chart div</p>
</div>
<div id="chart_log" style="border: 1px solid black; height: 400px;
overflow:scroll;">
<p>This is the chart_log div</p>
<p>This is paragraph #2</p>
</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 [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/d/optout.
