XQuery/Google Charts
< XQuery
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,
'&chs=', $size,
for $parameter in $parameters//Parameter[@value ne '']
return
concat('&', $parameter/@label,'=', $parameter/@value)
'&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('&', $parameter/@label, '=', $parameter/@value)
)
,'')
let $src := concat('http://chart.apis.google.com/chart?',
'cht=', $type,
'&chs=', $size,
$optional-parameters,
'&chd=t:', $data)
return
<img alt="{$alt}" src="{$src}"/>
};
Acknowledgments edit
Fraser Hore and Dmitriy Shabanov posted these examples to the eXist mailing list.