Introduction

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?

Category Chart

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.

Age
Rural Male
Rural Female
Urban Male
Urban Female
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
Chart properties
Series properties
NameEnabledTypeMarkerX axisY axisLegendShadowValue labels
Rural Male
Rural Female
Urban Male
Urban Female
Axis properties

Scatter Plot (time series)

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.

Date
AMSTEOE
DAXINDX
FTSE100
HNGKNGI
JAPDOWA
SNGALLS
SPCOMP
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
1 of 100
Chart properties
Series properties
NameEnabledTypeMarkerX axisY axisLegendShadowValue labels
AMSTEOE
DAXINDX
FTSE100
HNGKNGI
JAPDOWA
SNGALLS
SPCOMP
Axis properties

Scatter Plot (sine function)

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).

Chart properties
Series properties
NameEnabledTypeMarkerX axisY axisLegendShadowValue labels
Y = sin(X)
Axis properties

Pie chart

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.

Item
Sales
Blueberry
120
Cherry
30
Apple
260
Boston Cream
160
Other
40
Vanilla Cream
120