XForms/Google Charts

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. <xf:instance id="chart-params" xmlns=""> <data> <cht/> <chd/> <chl/> <chs/> </data> </xf:instance> Chart Submission We will submit our XForms data to the server using the following submission statement. <xf:submission 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: center|frame|Input to Chart Generated by Google Charts Here is a sample output chart generated form this application. center|frame|Chart Generate by Google Charts Sample XForms Application on Google Code Execute 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"/> <!-- put the cursor in the first field when the form becomes ready --> <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. Venn Diagram Pie Chart