XQuery/Google Charts

From Wikibooks, open books for an open world
Jump to: navigation, search

Motivation[edit]

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

Method[edit]

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[edit]

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[edit]

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[edit]

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[edit]

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

Resources[edit]

Sample XML Schema for checking Google Chart Parameters