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="&amp;" ref="instance('chart-params')" replace="all"/>

Binding Rules

Here is a sample input form for chart parameters:

Input to Chart Generated by Google Charts

Here is a sample output chart generated form this application.

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="&amp;" 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.

Next Page: Venn Diagram | Previous Page: Pie Chart
Home: XForms