XQuery/Google Chart Bullet Bar

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

Motivation[edit | edit source]

To display a Bullet Chart to display the current value of a system parameter with its safe and danger ranges.

Bullet Bars[edit | edit source]

This is one of the chart types supported by the now deprecated " Google Chart API which constructs the chart from URL parameters.

Sample URL[edit | edit source]

 http://chart.apis.google.com/chart?cht=bhs&chs=150x30&chd=t:70&chm=r,ff0000,0,0.0,0.5%7Cr,ffff00,0,0.5,0.75%7Cr,00A000,0,0.75,1.0%7Cr,000000,0,0.8,0.81&chco=000000&chbh=10

Sample Screen Image[edit | edit source]

Bullet-bar-screen-image.png

terms used in dashboard gauge

Declarative XML Representation[edit | edit source]

An XML representation of the chart design might be:

<chart >
   <type>bar-gauge</type>
   <height>30</height>  <!-- in pixels -->
   <width>150</width>    <!-- in pixels -->
   <danger-threshold>50</danger-threshold>  <!-- end of danger level -->
   <danger-color>ff0000</danger-color>
   <warning-threshold>75</warning-threshold>   <!-- end of warning level -->
   <warning-color>ffff00</warning-color>
   <ok-threshold>100</ok-threshold>   <!-- end of ok level -->
   <ok-color>00ff00</ok-color>
   <target-value>90</target-value>
</chart>

Google Chars Representation[edit | edit source]

Which, when supplied with a current value, must be transformed into the following URL:

http://chart.apis.google.com/chart?
 cht=bhs&
 chs=150x30&
 chd=t:70&
 chm=r,ff0000,0,0.0,0.5|
   r,ffff00,0,0.5,0.75|
   r,00A000,0,0.75,1.0|
   r,000000,0,0.8,0.81&
chco=000000&chbh=10

Sample XQuery Function[edit | edit source]

This function takes the specification of the chart and the current value, and generates the corresponding Google Chart URL.

Note that the width of the danger, warn and ok bars (red, yellow and green) are expressed as a percentage digit from 0 to 100.

declare function local:bullet-bar($spec,$current-value) {
let $danger-width-percent := $spec/danger-threshold div 100
let $warn-width-percent := $spec/warning-threshold div 100
let $ok-width-percent := $spec/ok-threshold div 100
let $target-width-percent := $spec/target-value div 100
let $target-plus-one := $target-width-percent + 0.01
 return concat(
   'http://chart.apis.google.com/chart?cht=bhs&amp;chs=',
    $spec/width,
    'x',
    $spec/height,
    '&amp;chd=t:',$current-value, 
    '&amp;chm=r,',$spec/danger-color,',0,0.0,', $danger-width-percent,
    '|r,',$spec/warning-color,',0,', $danger-width-percent, ',', $warn-width-percent,
    '|r,',$spec/ok-color,',0,', $warn-width-percent, ',', $ok-width-percent,
    '|r,000000,0,', $target-width-percent, ',', $target-plus-one, 
    '&amp;chco=000000&amp;chbh=',
    round($spec/height * 0.6)
  )
};

Generating a bullet bar[edit | edit source]

let $current-value := 70
let $url := local:bullet-bar($bar-spec,$current-value)
return
    <div>
        <h2>Example bullet bar</h2>
         <div> <img src="{$url}"/></div>
    </div>

Execute