Using Google Visualization API with own data soure(转http://www.jansipke.nl/using-google-visualization-api-with-own-data-source)
来源:互联网 发布:林姗姗sunny淘宝店 编辑:程序博客网 时间:2024/05/17 06:17
Using Google Visualization API with own data source
The Google Visualization API allows you to create charts and maps based on data you provide. This data can be in a Google Spreadsheet or be something you provide yourself. The visualizations themselves are mostly written in Javascript, although there are some written in Flash.
In this article we will create an HTML page with multiple charts in it and a data source that is generated by a Python program. We start with the HTML page that has two named div’s in it (visualization1 and visualization2), including the Javascript code that loads the two charts into these div’s.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API </title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['columnchart', 'linechart']}); </script> <script type="text/javascript"> var query1, visualization1; var query2, visualization2; function initialize() { visualization1 = new google.visualization.ColumnChart(document.getElementById('visualization1')); query1 = new google.visualization.Query('http://jansipke.nl/res/visualization/chart-data.py'); query1.setRefreshInterval(5); query1.send(drawVisualization1); visualization2 = new google.visualization.LineChart(document.getElementById('visualization2')); query2 = new google.visualization.Query('http://jansipke.nl/res/visualization/chart-data.py'); query2.setRefreshInterval(5); query2.send(drawVisualization2); } function drawVisualization1(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } visualization1.draw(response.getDataTable(), {legend: 'bottom', title: 'ColumnChart'}); } function drawVisualization2(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } visualization2.draw(response.getDataTable(), {legend: 'bottom', title: 'LineChart'}); } google.setOnLoadCallback(initialize); </script> </head> <body> <div> <div id="visualization1" style="height: 250px; width: 400px; border: 1px solid; float: left;" /> </div> <div> <div id="visualization2" style="height: 250px; width: 400px; border: 1px solid; float: left; margin-left: 10px" /> </div> </body></html>
There are two things that you really need to do before this works correctly:
- Make sure that the parent node of the div that holds your chart, is not also the parent of one of the other div’s that holds a chart. In the HTML page above we surrounded the chart div with another div to accomplish this.
- The chart is updated with new data every 5 seconds. It is a known bug of the Google Visualization API that the data needs to be fetched from another server then the one that is hosting the HTML page for the refresh to actually work. In the HTML page above the data source chart-data.py is therefore fetched from jansipke.nl and the HTML is fetched from www.jansipke.nl.
We will create our own data source in Python. There is a description of how you should do this on the Writing Your Own Data Source page from Google. One of the most common mistakes in writing these data sources is the need for the program to read the request identifier (reqId) and return this value in the response. The API needs this to distinguish between responses for different charts on the same page.
import cgi, randomdef index(req): reqId = None if (req.args): for arg in req.args.split("&"): (key, value) = arg.split("=") if (key == "tqx"): for parameter in value.split(";"): if (parameter.find("%3A") > 0): (par_key, par_value) = parameter.split("%3A") if (par_key == "reqId"): reqId = par_value a = str(random.randint(1, 3)) b = str(random.randint(1, 3)) c = str(random.randint(1, 3)) d = str(random.randint(1, 3)) s = "" s += "google.visualization.Query.setResponse(/n" s += "{/n" if (reqId != None): s += " reqId:'" + reqId + "',/n" s += " status:'ok',/n" s += " table:/n" s += " {/n" s += " cols:/n" s += " [/n" s += " {id:'Col1',label:'',type:'string'},/n" s += " {id:'Col2',label:'Label1',type:'number'},/n" s += " {id:'Col3',label:'Label2',type:'number'},/n" s += " {id:'Col4',label:'Label3',type:'number'}/n" s += " ],/n" s += " rows:/n" s += " [/n" s += " {c:[{v:'a',f:'a'},{v:1.0,f:'1'},{v:1.0,f:'1'},{v:" + a + ",f:'1'}]},/n" s += " {c:[{v:'b',f:'b'},{v:2.0,f:'2'},{v:1.5,f:'1'},{v:" + b + ",f:'1'}]},/n" s += " {c:[{v:'c',f:'c'},{v:3.0,f:'3'},{v:2.5,f:'1'},{v:" + c + ",f:'1'}]},/n" s += " {c:[{v:'d',f:'d'},{v:4.0,f:'1'},{v:2.0,f:'1'},{v:" + d + ",f:'1'}]}/n" s += " ]/n" s += " }/n" s += "});" return s
We can test this data source by following the link without parameters and following the link with the reqId parameter present:
- http://jansipke.nl/res/visualization/chart-data.py
- http://jansipke.nl/res/visualization/chart-data.py?tqx=reqId%3A0
Notice that the first one does not have reqId present in the response, but the second one does.
Update: it seems that the refreshing of data only happens correctly in Firefox and Opera. IE doesn’t refresh at all and Chrome only refreshes once. Oh joy!
- Using Google Visualization API with own data soure(转http://www.jansipke.nl/using-google-visualization-api-with-own-data-source)
- (转)Using cURL to interact with Google Data services
- Coding in the Shade: Using Eclipse with Google Data APIs
- Google Visualization API 与在线数据分析
- Using Google is AJAX Search API with Java ...
- Data Visualization
- Data Visualization
- Data Visualization
- Data visualization
- Start Training YOLO with Our Own Data
- Using the D3.js Visualization Library with AngularJS
- Using API with Catia
- [visualization]nextworkx_example - graphic data visualization
- Google Data API 体验
- Google Health Data API
- Using FINAL with Data Member
- [PHP] Http API with JSON data
- InfluxDB - Writing Data with the HTTP API
- 习惯的力量
- U-Boot与内核的关系(1)
- 第一个Limo程序:主题选择器----themeselector.ipk
- 让你的Win98 跑的更快 电脑加速度
- 逻辑地址、线性地址、物理地址和虚拟地址
- Using Google Visualization API with own data soure(转http://www.jansipke.nl/using-google-visualization-api-with-own-data-source)
- chown & chmod 用法
- POJ 1651 Multiplication Puzzle 动态规划及搜索
- Android 解析 ByteArrayInputStream
- 软件配置管理与SourceSafe使用指南
- msxml的介绍 转
- 关于响度、响度级、声强、声强级、声压、声压级、分贝、方、电平、增益、音高、音分
- 微软下月将发布Windows 8操作系统
- 今天201012142343