Contents:
A simple chart
Putting common configurations in the environment
Configuring charts using templates
Configuring charts using Python code
Line charts
Bar charts
Candle charts
Area charts
Pie charts
Scatter charts
Radar charts
Mixing multiple charts on one page
Conclusion
This tutorial describes how to create charts using the
Open Flash Charts wrapper included as a standard WHIFF component.
Below is an example chart:
If this text isn't replaced a chart
failed to load.
You may need to upgrade your flash player.
The WHIFF OpenFlashChart wrapper only works with
Open Flash Chart (version 2)
[http://teethgrinder.co.uk/open-flash-chart-2/]
which is included with the WHIFF distribution in the
INSTALL/whiff/middleware/ofc/ directory together with
other components required by the OFC widgets.
The OFC Charts will only display correctly on browsers with
a recent version of the Flash player installed.
The OFC package is similar to (but different from)
the WHIFF wrapper for the AMCharts Flash charting package
also available in the WHIFF distribution. Neither of these
packages is obviously superior to the other. The Open Flash
Charts package has the advantage that the charts do not display
a link to the package web page, whereas the AMCharts always
display an AMCharts web link unless you purchase a license
from AMCharts.
To deploy these examples you need to create a WHIFF root directory
as described in the
Quickstart
and put applications or middlewares containing chart
widgets into the directory. The applications or middlewares
containing the charts may be implemented either as
configuration templates or using Python code, as described
below.
A simple chart
The following example shows a complete WHIFF configuration template
containing a specification for a simple bar chart. To see the configuration
template source please click "whiff source"; to see the HTML and javascript
generated by the configuration template please click "generated page";
to see the formatted document generated by the configuration template
please click "formatted output" -- this option will only work if your
browser has a recent version of the Adobe Flash Player installed.
The Open Flash Charts package specifies charts using JSON (Javascript Object Notation)
data structures.
This example WHIFF embedding of an Open Flash Chart and all the other examples use the
same JSON specification
described at the Open Flash Charts web site to construct the specification
for the chart --
except that the additional width and height
attributes have been added to the top level JSON mapping.
The WHIFF chart wrapper adopts the JSON specification directly because the JSON specification
is very elegant and easy to work with. However, many other complexities of embedding
the chart such as locating underlying libraries, wiring together variable references,
and properly quoting string values are
handled automatically by the wrapper. Please look at the generated HTML for the charts
to examine the complex bits of javascript and markup required to generate the underlying
charts.
Putting common configurations in the environment
The WHIFF chart middleware permits the entire chart to be specified
as the page argument to the middleware, but as a convenience for configuring
complex pages or groups of pages chart attributes may also be specified using
the WSGI environment. For example if a group of pages should contain charts
which should always have width 330 and height 130, these width and height values
may be specified in the WSGI environment as follows.
Here the width and height are specified using
ofc.width
and
ofc.height in the
env directive at the top.
Alternatively, the width and height may be specified using environment
modifications in
the root directory specification
or even using the operating system environment variables.
Configuring charts using templates
Another way to share configuration among a group of charts is to
define configuration templates which encapsulate the common information among the
charts. For example suppose a number of bar charts all have the same
specification except for the title and the underlying numeric chart data.
The following WHIFF configuration template
barChartType1.whiff
might specify the common components.
{{env whiff.content_type: "text/html"/}}
{{require title/}}
{{require data/}}
{{include "whiff_middleware/ofc/OpenFlashChart"}}
{
"width": 400,
"height": 200,
"elements": [
{
"type": "bar",
"values": {{use data/}},
"colour": "#FF0F3F"
}
],
"title": {
"text": {{include "whiff_middleware/asJson"}} {{use title/}} {{/include}}
}
}
{{/include}}
The
barChartType1.whiff explicitly specifies everything about the chart
except for the numeric
data and
title which are required
parameters to the template. Note that the
asJson middleware wrapping the
title converts the title string into a Json string.
The following page includes a chart specified using barChartType1.whiff
and providing the data and title parameters.
Configuring charts using Python code
Python code may also use the chart wrapper to generate charts.
For example
barChart1.py generates a chart which displays
values generated from a mathematical function.
Here is the source code of
barChart1.py
from math import sin
def curve(x):
return 10 * sin(1.0/(x+1))
def chart(env, start_response):
from whiff.middleware.ofc import OpenFlashChart
spec = {}
spec["width"] = spec["height"] = 210
spec["title"] = {"text": "a curve"}
data = [ curve(x) for x in range(10) ]
spec["elements"] = [{"type": "bar", "values": data}]
barchart = OpenFlashChart.__middleware__(page=spec)
return barchart(env, start_response)
__wsgi__ = chart
and here is the chart created by
barChart1.py
embedded in another page:
Line charts
This section and the following sections illustrate
charts which can be built using the WHIFF Open Flash Chart wrapper.
These illustrations are derived directly from examples shown on the
Open Flash Chart web pages (but the encoding is considerably simplified).
In some cases the data in the chart has been truncated to reduce noise
and save some bandwidth.
The Open Flash Chart package includes the ability to format
Line Charts.
For example, the following snippet displays one of the line
charts discussed
here.
Bar charts
The Open Flash Chart package includes the ability to format
Bar Charts.
For example, the following snippet displays one of the bar
charts discussed
here.
Candle charts
The Open Flash Chart package includes the ability to format
Candle Charts.
For example, the following snippet displays one of the candle
charts discussed
here.
[The number of data points for the candle chart example were truncated to save some server bandwidth.]
Area charts
The Open Flash Chart package includes the ability to format
Area Charts.
For example, the following snippet displays one of the area
charts discussed
here.
Pie charts
The Open Flash Chart package includes the ability to format
Pie Charts.
For example, the following snippet displays one of the pie
charts discussed
here.
Scatter charts
The Open Flash Chart package includes the ability to format
Scatter Charts
For example, the following snippet displays one of the scatter
charts discussed
here.
Radar charts
The Open Flash Chart package includes the ability to format
Radar Charts.
For example, the following snippet displays one of the radar
charts discussed
here.
Mixing multiple charts on one page
Using the WHIFF wrappers there is no problem mixing different charts
on a single page, even though it is somewhat tricky to accomplish this
using the underlying libraries directly -- WHIFF handles all the bookkeeping
automatically. For example the following snippet includes two charts formatted
using OpenFlashCharts. You may also include charts formatted using other libraries
(like amCharts) together with OpenFlashCharts with no problems.
Conclusion
The built-in support for Open Flash Charts offered by WHIFF provides the
web designer and programmer the ability to forcefully present quantitative
information in an accessible form.
If this text isn't replaced a chart
failed to load.
You may need to upgrade your flash player.
