XQuery/Google Charts

MotivationEdit

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

MethodEdit

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 ParametersEdit

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 CodeEdit

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 parametersEdit

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}"/>
};

AcknowledgmentsEdit

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

ResourcesEdit

Sample XML Schema for checking Google Chart Parameters

Last modified on 10 December 2010, at 04:16