Graphing

Within the gateway it is possible to define an XML Dataset that will log eventstates on a periodic basis. The Dataset will create a file in the siteLogRoot directory.

This XML file can be read into KID template page and the data used to create a graph with multiple values. The basic process is:

• The kid template calls a 'gatherData' page on the server side that returns the data as a single XML data blob
• The XML data blob is converted in to a Javascript list object at the client end
• Styling and layout functions are performed on the list object
• The list object is passed to the graphing SWF object as a JSON string
• The SWF graphing object renders the graph in the client browser

More details on the process can be found at the Open Flash Chart 2 link at the end of this section. Here's an example graph:

Graph Styling Functions

In order to control the layout and colour of the various data, the following javascript functions are available:

• gTitle("name")

  This is the overall graph title.

• gValues(index,data)

  This loads 'data' into a graphset of 'index', index can be in the range 0-7.

• gYMaxMin(yMax,yMin)

  This sets the values that 'y' can have. yMin is an optional parameter.

• gName(index,name,colour)

  This sets the name of graphset 'index', it can optionally set the colour, in the form "#RRGGBB".

• gLabels(list)

  This uses 'list' to set the labels on the x_axis, by default only the 10th items in the list are used.

• gSetBGColor(colour)

  This is the background colour of the graphing area.

• gSetAxisColor(axisColor, gridColor)

  This sets the colour of the X and Y axis and optionally the grid colour.

• gSetAxisNames(yName, xName)

  This sets the name of the Y axis. It can also optionally set the name of the X axis, the default value is "Time".

Python Helper Functions

These are used to assist with the server side data processing, to include these in your kid template use:

kid.enable_import()
from WebBrickGateway.templates.graphutil import getvals, getTimes, getDate
    

• getvals(xmldata,tagname)

  This extracts all the values of 'tagname' into a Python List

• getTimes(xmldata,tagname)

  This extracts all the date and time values of 'tagname', from these, the time portion is extracted and places in a Python list.

• getDate(xmldata,tagname)

  This extracts the first value of 'tagname' and returns the date portion.

Open Flash Chart 2

Our graphing is implemented using OpenFlashChart2 which is available under the LGPL license.