The UI Service was deprecated only a few days ago, on Dec. 11, 2014
Google Documentation - UI Service
Here is a step-by-step explanation of what you need to do:
Create an Apps Script that is Attached to your Site
- In your Google Site - Click the button with the Gear icon
- Choose MANAGE SITE
- Click the APPS SCRIPT selection
- Click the ADD NEW SCRIPT button
- Choose SCRIPT AS WEB APP
Replace the code in the doGet() function, so it looks like this:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
Save it.
Give the project a name.
Create an index.html file
- Choose FILE, NEW, HTML file
Enter the following into the HTML file:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["timeline"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
[ 'Adams', new Date(1797, 2, 3), new Date(1801, 2, 3) ],
[ 'Jefferson', new Date(1801, 2, 3), new Date(1809, 2, 3) ]]);
chart.draw(dataTable);
}
</script>
</head>
<body>
<div id="timeline" style="width: 900px; height: 180px;"></div>
</body>
</html>
- Save the new index.html file
Publish your Apps Script
- Click PUBLISH
- Click Deploy As Web App
- Save a new version if there is no version
- Click UPDATE at the bottom
Add an Apps Script Gadget to your Sites Page
- Go back to your Sites page.
- Click the EDIT Page button with the icon of a pencil
- Click the INSERT menu
- Choose Apps Script
- Choose a Script
- Click the SELECT Button
Save all your changes.
You should get something that looks like this:
Now that you have the .gs code and the HTML set up, you need modify the JavaScript in the SCRIPT tag of the HTML file.
You need to run a google.script.run API to trigger another function in the .gs file that will go out and get your data.
Google Documentation - Class google.script.run (Client-side API)
Take a look at that documentation, and learn what it does.
The new code in the index.html file will be something like this:
<script>
function onSuccess(importedData) {
dataTable.addRows([importedData]);
chart.draw(dataTable);
alert('Your data has been loaded');
}
google.script.run.withSuccessHandler(onSuccess)
.retrieveChartData();
</script>
The hard coded data will be replaced with code. This is the hard coded data that must be removed and changed to something else:
dataTable.addRows([
[ 'Washington', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
[ 'Adams', new Date(1797, 2, 3), new Date(1801, 2, 3) ],
[ 'Jefferson', new Date(1801, 2, 3), new Date(1809, 2, 3) ]]);
You need to add another function to your .gs script file. Something like this:
function retrieveChartData() {
Logger.log('I was called!');
//Get the data from your data source
Code here
var tableData = code here;
//return the data
return tableData;
}
