XQuery/Google Charts

Motivation

You want a XQuery function to create charts using the Google Chart API service.

Method

We will create a simple XQuery function that takes the required parameters of a Google Chart (i.e. chart data, size, colors, and labels). It will then construct a URL with the correct values. You can then embed this URL in your XQuery to display the chart.

URL Encoded Parameters

Google Charts uses URL parameters to encode the values for charts like this one. Here is a clearer rendering of the URL parameters for the chart:

http://chart.apis.google.com/chart?
   chxl=0:|Jan|Feb|Mar|Apl|May|Jun|1:|10|50|100
   &chxr=0,-5,100
   &chxt=x,r
   &chbh=a
   &chs=300x150
   &cht=bvs
   &chco=0000FF
   &chd=t:10,20,30,40,50,60
   &chp=0.05
   &chtt=Downloads+Per+Month

Source Code

Here is an example function:

declare function utility:graph($type, $colors, $size, $markers, $data, $alt, $title, $barwidthandspacing, $linestyles) {
    let $parameters :=
        <Parameters>
            <Parameter label="chco" value="{$colors}"/>
            <Parameter label="chl"  value="{$markers}"/>
            <Parameter label="chtt" value="{$title}"/>
            <Parameter label="chbh" value="{$barwidthandspacing}"/>
            <Parameter label="chls" value="{$linestyles}"/>
        </Parameters>
    let $src := concat('http://chart.apis.google.com/chart?',
                       'cht=', $type,
                       '&amp;chs=', $size,
                       for $parameter in $parameters//Parameter[@value ne '']
                       return
                           concat('&amp;', $parameter/@label,'=', $parameter/@value)
                       '&amp;chd=t:', $data)
    return
        <img alt="{$alt}" src="{$src}"/>
};

Checking for required parameters

The following adds a fuller set of Google Chart parameters, and gives each parameter a @required attribute:

declare function utility:graph($type, $size, $data, 
    $title, $barwidthandspacing, $linestyles, $colors, $labels, $markers,
    $axes, $axislabels, $axislabelpositions, $axisrange, $axisstyles, $zeroline, $ticklength,
    $margin, $fill, $grid, $legend, $legendplacement, $alt) {
    let $parameters :=
        <Parameters>
            <Parameter label="cht" value="{$type}" required="true"/>
            <Parameter label="chs" value="{$size}" required="true"/>
            <Parameter label="chd" value="{$data}" required="true"/>
 
            <Parameter label="chtt" value="{$title}" required="false"/>
            <Parameter label="chbh" value="{$barwidthandspacing}" required="false"/>
            <Parameter label="chls" value="{$linestyles}" required="false"/>
            <Parameter label="chco" value="{$colors}" required="false"/>
            <Parameter label="chl"  value="{$labels}" required="false"/>
            <Parameter label="chm"  value="{$markers}"  required="false"/>
            <Parameter label="chxt" value="{$axes}" required="false"/>
            <Parameter label="chxl" value="{$axislabels}" required="false"/>
            <Parameter label="chxp" value="{$axislabelpositions}" required="false"/>
            <Parameter label="chxr" value="{$axisrange}" required="false"/>
            <Parameter label="chxs" value="{$axisstyles}" required="false"/>
            <Parameter label="chp"  value="{$zeroline}" required="false"/>
            <Parameter label="chxtc" value="{$ticklength}" required="false"/>
            <Parameter label="chma" value="{$margin}" required="false"/>
            <Parameter label="chf"  value="{$fill}" required="false"/>
            <Parameter label="chg"  value="{$grid}" required="false"/>
            <Parameter label="chdl" value="{$legend}" required="false"/>
            <Parameter label="chdlp" value="{$legendplacement}" required="false"/>
        </Parameters>
    let $optional-parameters := 
        string-join(
            (
            for $parameter in $parameters//Parameter[@required = 'false'][@value ne '']
            return
                concat('&amp;', $parameter/@label, '=', $parameter/@value)
            )
            ,'')
    let $src := concat('http://chart.apis.google.com/chart?',
                       'cht=', $type,
                       '&amp;chs=', $size,
                       $optional-parameters,
                       '&amp;chd=t:', $data)
    return
        <img alt="{$alt}" src="{$src}"/>
};

Acknowledgments

Fraser Hore and Dmitriy Shabanov posted these examples to the eXist mailing list.

Resources

Sample XML Schema for checking Google Chart Parameters