Making a Demographic Chart

Question

How to make a Demographic Chart ?

Answer

It is possible to achieve demographic chart using JViews Charts.

To do so, the idea is to create two "opposite" Datasets using the Bar Chart Renderer and then reverse the chart.

Here is a more detailed methodology about how to perform such a chart:

• The Datasets:

To get a *pyramidal* effect, we will be using two datasets where the first one has only positive values and the second one has negative values.

// DataSet 1

double[] myDatasM = { 20, 18, 15, 12, 9, 6, 3, 2};
IlvDefaultDataSet dataM = new IlvDefaultDataSet("Male", myDatasM);

dataM.setDataLabels(labels);

// DataSet 2

double[] myDatasF = { -20, -18, -15, -12, -9, -6, -3, -2 };

IlvDefaultDataSet dataF = new IlvDefaultDataSet("Female", myDatasF);

We specify data points labels to be used by the X scale (do not forget that it will be reversed).

// Labels which will be used for the data points

String[] labels = {"0-9", "10-19", "20-29", "30-39", "40-49", "50-59", "60-69", "70+"};

dataM.setDataLabels(labels);

dataF.setDataLabels(labels);

• The Renderers:

We will be attaching one renderer per dataset so that the data points of each dataset will be *facing* each other.

The Bar Chart Renderer is the type of renderer used.

// Renderer 1

IlvChartRenderer rendererM = new IlvBarChartRenderer();

chart.addRenderer(rendererM, dataM);

// Renderer 2

IlvChartRenderer rendererF = new IlvBarChartRenderer();

chart.addRenderer(rendererF, dataF);

• The Data Annotations:

An annotation is a graphical object drawn by the renderer to add additional information about a given data point. We are going to add a label annotation displaying the value of each data point.
The IlvDataLabelAnnotation class will be customized so as to update the text displayed for each data point.

// Add a label annotation to each point - renderer 1

rendererM.setDataLabelling(IlvChartRenderer.Y_VALUE_LABEL);

rendererM.setDataLabelLayout(IlvChartRenderer.OUTSIDE_LABEL_LAYOUT);

IlvDataAnnotation annotation = new IlvDataLabelAnnotation(){

  // Method used to computes the text displayed by the data annotation.

  // Append an "M" character to represent *Millions* to the text displayed

  protected String computeText(IlvDisplayPoint dp) {

  return (super.computeText(dp) + " M");

  }};

rendererM.setAnnotation(dataM, annotation);

// Add a label annotation to each point - renderer 2

rendererF.setDataLabelling(IlvChartRenderer.Y_VALUE_LABEL);

rendererF.setDataLabelLayout(IlvChartRenderer.OUTSIDE_LABEL_LAYOUT);

// Reuse the same label annotation

rendererF.setAnnotation(dataF, annotation);

• The X Scale:

An IlvScale object is made of different parts which can be visible or not, like for example, the scale title, ticks, and labels.

We can also specify that a scale should display categories.

For the X Scale, we are going to set a title and set the categories to be displayed as the step labels.
// Set a title + update labels for X Scale

chart.getXScale().setCategory(dataM, false);

chart.getXScale().setTitle("Age band");

chart.getXScale().setTitlePlacement(100);

• The Y Scale:

The goal of this chart is to be a demographic chart.

Hence, usually no negative values are visible on the scale.

However, by default in JViews Charts, the scale will display the points data range.

And in case there are some negative values, the step labels will also be negative.

In our case, we only want positive values to be displayed.

We will then customize the IlvScale class to avoid negative values to be shown.

// Set the Y Scale where negative values will be avoided

chart.setYScale(0, new IlvScale(){

  public String computeLabel(double value){

  return super.computeLabel(java.lang.Math.abs(value));

  }});

As for the X scale, we are going to set a title and update the points data range along the step and substep units of this scale.

// Set a title + update range + update step unit for Y Scale

chart.getYScale(0).setTitle("Millions");

chart.getYScale(0).setTitlePlacement(100);

chart.getYScale(0).setTitleOffset(10);

chart.getYAxis(0).setDataRange(dataF.getYRange().getMin() - 5, dataM.getYRange().getMax() + 5);

chart.getYScale(0).setStepUnit(new Double(5),new Double(0));
 

• TheProjection:

The last step to get a pyramidal effect is to reverse the chart using a projector so as to swap the meaning of the abscissa and ordinate coordinates of a point.

// Reverse the chart to make a "Pyramid effect"

chart.setProjectorReversed(true);

You can download this sample that illustrates this FAQ.