Motivation
You want to use a web service to create charts.
Method
In this example we will use the Google Chart web service: *. Users are each allowed to generate up to 50,000 charts per day.
Parameters
The Google Chart application takes several parameters from the URL. For a simple Pie Chart these might include:
http://chart.apis.google.com/chart?
cht=p
&chd=t:10,20,30,40,20
&chl=Amount|Indicator|Code|Date|Text
&chs=400x300
Where:
http://chart.apis.google.com/chart? - is the Chart API's base URL
The ampersand (&) separates parameters.
cht=p is a code for the chart's type. For example p=2D Pie Chart and p3-3D Pie Chart
chd=t:10,20,30,40 is the chart's data using t format (t:10,20,30) or s format where (s:) a=1 and z=26
chs=400x300 - is the chart's size in pixels.
chl=Amount|Indicator|Code|Date|Text are the labels for the Pie Chart.
Our next step is to put these REST parameters into an XForms instance and hook the instance up to input controls.
Pie Chart Parameters in XML instance
Here are the parameters for a piechart type, data, label and size information.
id="chart-params" xmlns="">
Chart Submission
We will submit our XForms data to the server using the following submission statement.
id="get-chart"
method="get" action="http://chart.apis.google.com/chart"
separator="&" ref="instance('chart-params')" replace="all"/>
Binding Rules
Here is a sample input form for chart parameters:
Input to Chart Generated by Google Charts (Image: The original uploader was Dmccreary at English Wikibooks ., CC BY-SA 3.0)
Here is a sample output chart generated form this application.
Chart Generate by Google Charts (Image: The original uploader was Dmccreary at English Wikibooks ., CC BY-SA 3.0)
Sample XForms Application on Google Code
Sample Program
<html xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns="http://www.w3.org/1999/xhtml">;
<head>
<title>Google Pie Chart Demo</title>
<style type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");
body {font-family: Helvetica, sans-serif}
/* This line ensures all the separate input controls appear on their own lines */
xf|input, xf|select1 {display:block; margin:5px 0;}
/* this puts the labels in 200px columns and right aligns them */
xf|input > xf|label, xf|select1 > xf|label
{text-align:right; padding-right:10px; width:200px; float:left; text-align:right;}
.xf-value {width: 250px}
</style>
<xf:model>
<xf:instance id="chart-params" xmlns="">
<data>
<cht>p</cht>
<chs>400x200</chs>
<chd>t:1,2,60,40,2</chd>
<chl>Amount|Indicators|Code|D|Text</chl>
</data>
</xf:instance>
<xf:submission id="get-chart" action="http://chart.apis.google.com/chart" method="get"
separator="&" ref="instance('chart-params')" replace="all"/>
<xf:action ev:event="xforms-ready">
<xf:setfocus control="field-1"/>
</xf:action>
</xf:model>
</head>
<body>
<h3>Google PieChart Demo</h3>
<xf:select1 ref="cht" id="field-1">
<xf:label>Chart Type: </xf:label>
<xf:item>
<xf:label>Pie Chart - flat</xf:label>
<xf:value>p</xf:value>
</xf:item>
<xf:item>
<xf:label>Pie Chart - 3D</xf:label>
<xf:value>p3</xf:value>
</xf:item>
</xf:select1>
<xf:input ref="chd">
<xf:label>Data: (t:5,10,20): </xf:label>
</xf:input>
<xf:input ref="chl">
<xf:label>Labels: (A|B) </xf:label>
</xf:input>
<xf:submit submission="get-chart">
<xf:label>Create Chart</xf:label>
</xf:submit>
</body>
</html>
Discussion
This is actually one of the most simple applications. Google Charts has five chart types and hundreds of combinations of parameters.
The Chart Types are (cht)
- Line charts
- Bar charts
- Pie charts
- Venn diagrams
- Scatter plots
One way to test these is to generate a variety of charts with some sample XForms.
Where this page came from
This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.
Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.
이 페이지가 속한 매거진XForms
이용 허락: CC BY-SA 4.0 · 출처 en.wikibooks.org
1
0
0
0
코멘트
