The examples in this menu and the other charting menus
Scatter plot and
Pie chart demonstrate some of the
capabilities of the
JWt charting widgets.
These widgets are implemented using
the JWt painting API WPaintedWidget which provides
cross-browser native painting, using VML, SVG, or the HTML5 canvas tag.
The two main chart widgets are
WCartesianChart, which provides charts with an X and a Y
axis to show data, and
These widgets are based on the MVC mechanism, and retrieve their data
from a WAbstractItemModel.
A cartesian chart is either a CategoryChart or a ScatterPlot.
A CategoryChart shows data in categories.
A ScatterPlot shows the data according to a
numerical X scale.
It can display one or multiple data series which may be rendered
individually using bars, lines, areas, or points.
To use a cartesian chart, the minimum you need to do is to set a model
using setModel(), set the model column that holds the X data
using setXSeriesColumn(int modelColumn), and add one or more
series using addSeries(const WDataSeries&). Each series
corresponds to one data column that holds Y data.
Many aspects of the charts may be customized. By default, style
information for rendering data series are taken from a
WChartPalette. It is straightforward to specialize this class
to provide different styles from the standard styles provided by
WStandardPalette.
The cartesian chart has support for dual Y axes. Each data series may be
bound to one of the two Y axes. By default, only the first Y axis is
displayed. To show the second Y axis you will need to call
chart->axis(Y2Axis).setVisible(true)
By default a chart has a horizontal X axis and a vertical Y axis, which
corresponds to a Vertical orientation. The orientation may be
changed to Horizontal using setOrientation().
The styling of the data series are defined by a palette which may be set
using setPalette(WChartPalette *), but may be overridden by
settings in each data series.
What is a category chart?
A category chart has different categories on the X axis, and displays
values of one or more data series on the Y axes as a series of bars. The
values corresponding to each category are plotted consecutively in model
row order. Each data series corresponds to a column from the model and
may be rendered differently (This is configured in the data series - See
WDataSeries for more information).
As a cartesian chart it 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. In the
example below, we use a manual Y axis configuration, with a break as
would be commonly used when your data has a few outliers.
The table view allows editing of the model, which is automatically
reflected in the chart.
By the way, would you expect this example to work when Ajax/JavaScript
are not available or disabled?