BIRT Area Chart Modifications

BIRT supplies a very robust and extensible chart engine, that can be used standalone or in conjunction with the report engine.  Currently the chart engine supports fourteen different main chart types and many sub-types.  Charts can be emitted in PNG, JPG, BMP, SVG within reports and can be also emitted to SWT, PDF and Swing outside of the report engine.    Virtually every area of the chart engine is also extensible, from adding new chart types to new output formats.  These are done with Eclipse extension points.  In addition the chart engine supports client side interactivity and server side event scripting.  Both of which have been discussed on the site before.

BIRT Chart Scripting Overview

One of the most often used chart types is the Area chart. 

Simple Area Chart

While this type of chart is an effective visualization, we often get questions on how to extend the Area chart to the extents of the plot.  In this post we will put together an example that illustrates one way of extending the covered area.

As discussed extensively in the post referenced above, the chart can be modified using script event handlers.  These handlers can be written in Java or JavaScript.  With certain chart types the render engine renders to the center of a data point intersection.  The Area and Line Charts are examples of the types of charts that exhibit this behavior.  To extend the area chart, a beforeDrawSeries event can be implemented to change the x location of the first and last data point to cover more area.  This approach will work for both 2D and 2D with depth types of charts.  The beforeDrawSeries event is fired for each runtime series and once for the category series.  So in the script you must first check that the locations you are going to modify are for the right series.  If you are not using optional grouping this check is as simple as just getting the series identifier.  This identifier is set as the series title in the third tab of the chart wizard.

Series Identifier

So in the beforeDrawSeries event handler you can check the series identifier by calling the following code.

if( series.getSeriesIdentifier() == "Series 1" ){}

The chart renderer stores all the data point information in a data point hints array.  This array can be retrieved in the beforeDrawSeries event handler by calling:

var dpharray = seriesRenderer.getSeriesRenderingHints().getDataPoints();

Each data point element in the array stores information like the category value, orthogonal value, and x/y location values that the renderer will use to draw the chart.  To get the x location of the area chart we first call the getLocation method and then the getX method.  This needs to be done for the first and last data points in the array.  You can set the x value using the setX method on the location object.  You can also get the width of a data point by calling the getSize method.  This method returns the width show in red in the following diagram.

The getSize method

Using the above methods we can subtract half the width from the first data point x value and add half the width to the x value of the last data point value.  The complete script is shown below.

function beforeDrawSeries( series, seriesRenderer, context )

{      

      if( series.getSeriesIdentifier() == "Series 1" ){

      var dpharray = seriesRenderer.getSeriesRenderingHints().getDataPoints();
                  var xval = dpharray[0].getLocation().getX();
                  var wid = dpharray[0].getSize();
                  dpharray[0].getLocation().setX(xval-(wid/2));
                  var xval = dpharray[dpharray.length-1].getLocation().getX();
                  dpharray[dpharray.length-1].getLocation().setX(xval+(wid/2));  

      }

}

A before and after example 2D with depth chart is shown below.

Before Example

After Example

This example is available on Birt-Exchange.