在Google网站中使用Google Visualization API [英] Using Google Visualization API in google sites
问题描述
我是JS和GAS的新手，到目前为止管理得还不错.但是，当我将JS与HTML结合使用时，我迷路了.我想使用Google可视化API的时间轴功能，并使用我想填充图表的网站或工作表中的数据.
Google可视化API
这是您需要做的分步说明:
创建附加到您网站的Apps脚本
- 在您的Google网站中-单击带有Gear图标的按钮
- 选择管理站点
- 点击"APPS脚本"选择
- 点击添加新脚本按钮
- 选择SCRIPT AS WEB APP
替换 doGet()函数中的代码，因此如下所示:
function doGet(){返回HtmlService.createHtmlOutputFromFile('index').setSandboxMode(HtmlService.SandboxMode.IFRAME);} 保存.给项目起个名字.
创建index.html文件
- 选择FILE，NEW，HTML文件
在HTML文件中输入以下内容:
< 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);函数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([['华盛顿'，新日期(1789，3，29)，新日期(1797，2，3)]，['Adams'，新日期(1797，2，3)，新日期(1801，2，3)]，['Jefferson'，new Date(1801，2，3)，new Date(1809，2，3)]]);chart.draw(dataTable);}</script></head><身体>< div id ="timeline" style =宽度:900像素；高度:180像素；"></div></body></html> - 保存新的index.html文件
发布您的Apps脚本
- 点击发布
- 单击部署为Web应用程序"
- 如果没有版本，请保存新版本
- 点击底部的更新"
将Apps脚本小工具添加到您的网站页面
- 返回到网站"页面.
- 单击带有铅笔图标的编辑页面"按钮
- 点击插入"菜单
- 选择Apps脚本
- 选择脚本
- 单击选择"按钮
保存所有更改.
您应该获得如下所示的东西:
现在，您已经有了 .gs 代码和HTML设置，您需要在HTML文件的SCRIPT标记中修改JavaScript.
您需要运行 google.script.run API来触发 .gs 文件中的另一个函数，该函数将退出并获取您的数据.
Google文档-类google.script.run(客户端API)
看看该文档，并了解它的作用.
index.html文件中的新代码将如下所示:
< script>函数onSuccess(importedData){dataTable.addRows([importedData]);chart.draw(dataTable);alert('您的数据已加载');}google.script.run.withSuccessHandler(onSuccess).retrieveChartData();</script> 硬编码的数据将被替换为代码.这是必须删除并更改为其他内容的硬编码数据:
dataTable.addRows([['华盛顿'，新日期(1789，3，29)，新日期(1797，2，3)]，['Adams'，新日期(1797，2，3)，新日期(1801，2，3)]，['Jefferson'，new Date(1801，2，3)，new Date(1809，2，3)]]); 您需要向 .gs 脚本文件中添加另一个功能.像这样:
函数retrieveChartData(){Logger.log('我被叫！');//从您的数据源获取数据在这里编码var tableData =代码在这里；//返回数据返回tableData;} I am new to JS and GAS and have managed fairly well so far. I am ,however, getting lost when it comes to utilizing HTML with the JS. I would like to use the timeline function of google's visualization API and using data from either sites or sheets I would like to populate the chart.
Google visualization API >>HERE<<
Google chart service using DoGet >>HERE<<
The second link shows the implementation, it seems that I can't embed these created charts on my site then?
How do I combine the HTML service with the JS an display a timeline chart on a google site?
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;
}
这篇关于在Google网站中使用Google Visualization API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
