This example demonstrates some of the capabilities of the Wt charting widgets. These widgets are implemented using the Wt painting API, which provides cross-browser native painting, using VML, SVG, or the Html 5 canvas tag.
The two main chart widgets are WCartesianChart, which provides category charts and scatter plots, and WPieChart which provides pie charts. These widgets are based on the MVC mechanism, and retrieve their data from a WAbstractItemModel.
Many aspects of the charts may be customized. By default, style information for rendering data series are taken from a WChartPalette. It is straight forward to specialize this class to provide different styles from the standard styles provided by WStandardPalette.
Btw, would you expect this example to work when Ajax/JavaScript are not available or disabled?
A category chart uses categories on the X axis, and displays one or more data series on the Y axes. The values corresponding to each category are plotted consecutively (this is the main difference with a ScatterPlot). Each data series corresponds to a column from the model.
A cartesian chart provides automatic configuration of the axes, and support for a second Y axis. In addition, you may use a simple built-in legend, or extend the class to provide a specialized legend.
The table view allows editing of the model, which is automatically reflected in the chart.
70-74 | 66 | 54 | 71 | 50 |
65-69 | 41 | 31 | 55 | 35 |
60-64 | 127 | 20 | 37 | 19 |
55-59 | 18 | 149 | 24 | 14 |
50-54 | 12 | 9 | 15 | 8 |
Name | Enabled | Type | Marker | X axis | Y axis | Legend | Shadow | Value labels |
Rural Male | ||||||||
Rural Female | ||||||||
Urban Male | ||||||||
Urban Female |
A scatter plot is very much like a category chart, but uses numerical data on the X axis. By default, these numerical data are mapped linearly on the X axis, but may also be log transformed (as can be configured for the Y axes). In addition, there is special support for displaying date series, by means of smart heuristics for chosing the labels on the X axis.
Below is an extract from historical financial market data.
1986-01-06 | 275.8 | 1425.6 | 1424.1 | 1796.6 | 13053.8 | 233.6 | 210.7 |
1986-01-07 | 275.4 | 1428.5 | 1415.2 | 1815.5 | 12991.2 | 237.4 | 213.8 |
1986-01-08 | 278.8 | 1474.2 | 1404.2 | 1826.8 | 13056.4 | 241.0 | 208.0 |
1986-01-09 | 272.3 | 1461.2 | 1379.6 | 1798.5 | 13034.2 | 239.7 | 206.1 |
1986-01-10 | 272.9 | 1449.0 | 1394.5 | 1807.9 | 12998.2 | 238.9 | 206.0 |
Name | Enabled | Type | Marker | X axis | Y axis | Legend | Shadow | Value labels |
AMSTEOE | ||||||||
DAXINDX | ||||||||
FTSE100 | ||||||||
HNGKNGI | ||||||||
JAPDOWA | ||||||||
SNGALLS | ||||||||
SPCOMP |
Below we plot a single sine curves. We use 'curve' data series, which creates a smooth spline curve that interpolates the data points. As is typical when showing mathematical functions, we let the axes cross each other at the origin (0, 0).
Name | Enabled | Type | Marker | X axis | Y axis | Legend | Shadow | Value labels |
Y = sin(X) |
The pie chart is provided by the WPieChart widget. A pie chart can only display data from one data series. The class supports both plain 2D pies, as well as a 3D effect (as used below). As shown below for the first segment, these may be separated from the pie to show emphasis.
Blueberry | 120 |
Cherry | 30 |
Apple | 260 |
Boston Cream | 160 |
Other | 40 |
Vanilla Cream | 120 |