Category chart

The Charting library

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

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?

Example
Age
Rural Male
Rural Female
Urban Male
Urban Female
70-74
66.0
54.3
71.1
50.0
65-69
41.0
30.9
54.6
35.1
60-64
126.9
20.3
37.0
19.3
55-59
18.1
149.0
24.3
13.6
50-54
11.7
8.7
15.4
8.4
source
  void CategoryChart() {
    WContainerWidget container = new WContainerWidget();
    WStandardItemModel model = CsvUtil.csvToModel("" + "category.csv");
    if (!(model != null)) {
      return container;
    }
    for (int row = 0; row < model.getRowCount(); ++row) {
      for (int col = 0; col < model.getColumnCount(); ++col) {
        model.getItem(row, col).setFlags(EnumSet.of(ItemFlag.Editable));
      }
    }
    WTableView table = new WTableView((WContainerWidget) container);
    table.setModel(model);
    table.setSortingEnabled(true);
    table.setColumnResizeEnabled(true);
    table.setAlternatingRowColors(true);
    table.setHeaderAlignment(0, EnumSet.of(AlignmentFlag.Center));
    table.setColumnAlignment(0, AlignmentFlag.Center);
    table.setRowHeight(new WLength(28));
    table.setHeaderHeight(new WLength(28));
    table.setMargin(new WLength(10), EnumSet.of(Side.Top, Side.Bottom));
    table.setMargin(WLength.Auto, EnumSet.of(Side.Left, Side.Right));
    table.setWidth(new WLength(4 * 120 + 80 + 5 * 7 + 2));
    if (WApplication.getInstance().getEnvironment().hasAjax()) {
      table.setEditTriggers(EnumSet.of(EditTrigger.SingleClicked));
      table.setEditOptions(EnumUtils.or(table.getEditOptions(), EditOption.SaveWhenClosed));
    } else {
      table.setEditTriggers(EnumSet.of(EditTrigger.None));
    }
    WItemDelegate delegate = new WItemDelegate();
    delegate.setTextFormat("%.f");
    table.setItemDelegate(delegate);
    table.setColumnWidth(0, new WLength(80));
    for (int i = 1; i < model.getColumnCount(); ++i) {
      table.setColumnWidth(i, new WLength(120));
    }
    WCartesianChart chart = new WCartesianChart((WContainerWidget) container);
    chart.setModel(model);
    chart.setXSeriesColumn(0);
    chart.setLegendEnabled(true);
    chart.setPlotAreaPadding(40, EnumSet.of(Side.Left, Side.Top, Side.Bottom));
    chart.setPlotAreaPadding(120, EnumSet.of(Side.Right));
    for (int column = 1; column < model.getColumnCount(); ++column) {
      WDataSeries series = new WDataSeries(column, SeriesType.Bar);
      series.setShadow(new WShadow(3, 3, new WColor(0, 0, 0, 127), 3));
      chart.addSeries(series);
    }
    chart.resize(new WLength(600), new WLength(400));
    chart.setMargin(WLength.Auto, EnumSet.of(Side.Left, Side.Right));
  }

Top