Each chart has a palette. The palette determines the colours used for drawing the series in the chart. From the UI perspective, the palette options are accessed on the last tab of the Edit Chart dialog (Format Chart), the first selection in the tree on left-hand-side (Series). It is worth noting that a chart only has one palette, even if the chart contains multiple series.

By default there are 32 entries in the palette. They are used in the chart from top to bottom, i.e. in the default scenario the first category will be coloured blue, the next one red and so on. The Add and Remove buttons in the Series Palette dialog can be used to change the number of entries. What happens when the chart contains more categories than the list of palette entries? The answer is that the palette will wrap around, i.e. the 33rd category will be coloured in the same way as the first one. If the number of categories is known in advance, one can extend the palette using the Add button to create the necessary number of palette entries. (Naturally, one should question the design of such a chart, will the user really be able to extract any meaning from a chart with 32 or more different colours? In most cases, probably not.)

Each palette entry itself can be edited. Not only is it possible to set one of the predefined colours, one can also set a custom colour, a linear gradient based on two colours or even an image file. It is also possible to specify different colour for positive and negative values.

As we already mentioned, the palette colours are applied top to bottom without any further logic, in particular they are not tied to the actual data point values themselves. Several common scenarios and scripting approaches for solving the issue have already been discussed on this blog: Setting BIRT chart series palette dynamically, Setting BIRT chart series palette dynamically, part 2 – area charts, Setting BIRT chart series palette dynamically, part 3 – stacked bar charts.

In the second part of this article we will look at how the palette and related objects can be manipulated programmatically, i.e. through scripting.

Once again, let’s start with a quick recap. In what is a fairly common scenario, one chooses the palette colours to match with particular category values. For example, in the chart below “High” is represented in green, “Mid” in orange and “Low” in red.

However, if for a particular dataset one of the of category values is not present, the palette colours are still used in the same order, meaning the “Mid” area is now shown as red and “High” as orange. This is confusing for the end user:

As in the previous examples, we solve this problem by adding a little bit of script to override the chart’s default behaviour.


function beforeDrawDataPoint( dph, fill, icsc )
{
  var sValue = dph.getSeriesDisplayValue();
  // set( R, G, B, alpha )
  if( sValue == "1-Low" )
  {
    fill.set( 242, 88, 106, 255 );
  }
  else if( sValue == "2-Mid" )
  {
    fill.set( 232, 172, 57, 255 );
  }
  else if( sValue == "3-High" )
  {
    fill.set( 128, 255, 128, 255 );
  }
}


We also need to override the beforeDrawLegendItem method, so that colours in the legend match the chart colours.


function beforeDrawLegendItem( lerh, bounds, icsc )
{
  var sValue = lerh.getLabel().getCaption().getValue();
  var fill = lerh.getFill();
  // set( R, G, B, alpha )
  if( sValue == "1-Low" )
  {
    fill.set( 242, 88, 106, 255 );
  }
  else if( sValue == "2-Mid" )
  {
    fill.set( 232, 172, 57, 255 );
  }
  else if( sValue == "3-High" )
  {
    fill.set( 128, 255, 128, 255 );
  }
}


The palette colours are now assigned dynamically based on actual category values. The rendered chart looks as shown below, independent of the colours selected in Chart Wizard and their order.

Often there is one particular grouping (series) which is especially important and we want to draw the report viewer’s attention to it by showing the labels for that series only. This cannot be achieved through the Chart Wizard UI but can be done with a bit of scripting.

The method which needs to be overriden is beforeDrawSeries. In this example, series labels will be shown for the “1-Low” series and hidden for the other ones.


function beforeDrawSeries( series, isr, icsc )
{
  // get class of the renderer
  var type = isr.getClass().toString();
  // check for area chart renderer
  if( type == "class org.eclipse.birt.chart.render.Area" )
  {
    var val = isr.getSeriesRenderingHints().getDataPoints()[0].getSeriesDisplayValue();
    if( val == "1-Low" )
    {
      series.getLabel().setVisible( true );
    }
    else
    {
      series.getLabel().setVisible( false );
    }
  }
}


The result looks as follows:

]]> http://www.martinhammer.com/blog/index.php/2010/09/selectively-hiding-series-labels-in-birt-area-chart/feed/ 0 http://www.martinhammer.com/blog/index.php/2010/02/setting-birt-chart-series-palette-dynamically-part-2-area-charts/ http://www.martinhammer.com/blog/index.php/2010/02/setting-birt-chart-series-palette-dynamically-part-2-area-charts/#comments Thu, 18 Feb 2010 14:08:23 +0000 martin http://www.martinhammer.com/blog/?p=453 In a previous post we described how to set the series palette dynamically for a pie chart. A slightly different approach is required for area charts.

Let’s recap on the problem at hand: in what is a fairly common scenario, one chooses the palette colours to match with particular category values. For example, in the chart below “High” is represented in green, “Mid” in orange and “Low” in red.

However, if for a particular dataset of the of category values is not present, the palette colours are still used in the same order, meaning the “Mid” area is now shown as red and “High” as orange. This is confusing for the end user.

Once again we can solve this issue with some scripting of the chart. In this approach, we will override the beforeDrawSeries method to check for category value and set the fill colour based on that:


function beforeDrawSeries( series, isr, icsc )
{
  // get class of the renderer
  var type = isr.getClass().toString();
  // check for area chart renderer
  if( type == "class org.eclipse.birt.chart.render.Area" )
  {
    // get global counter
    // 1* forces conversion to int
    var i = 1 * icsc.getExternalContext().getScriptable().getPersistentGlobalVariable( "seriesCounter" );
    // get category value
    var val = isr.getSeriesRenderingHints().getDataPoints()[0].getSeriesDisplayValue();
    // set fill colour based on category value
    if( val == "1-Low" )
    {
      isr.getSeriesDefinition().getSeriesPalette().getEntries()[i].set( 242, 88, 106, 128 );
    }
    else if( val == "2-Mid" )
    {
      isr.getSeriesDefinition().getSeriesPalette().getEntries()[i].set( 232, 172, 57, 128 );
    }
    else if( val == "3-High" )
    {
      isr.getSeriesDefinition().getSeriesPalette().getEntries()[i].set( 128, 255, 128, 128 );
    }
    // increment global counter
    i = i + 1;
    // "" forces conversion to string
    icsc.getExternalContext().getScriptable().setPersistentGlobalVariable( "seriesCounter", "" + i );
  }
}


You may have noticed that a global variable seriesCounter is used to hold the reference to the current series. This is because the beforeDrawSeries method is called several times, once for each category value present in the data. Another bit of code is therefore required to define the seriesCounter variable in the initialize method of the report:


reportContext.setPersistentGlobalVariable( "seriesCounter", "0" );


One more point to note is that reportContext.setPersistentGlobalVariable only accepts string values, hence the “hack” to convert between a number and a string every time the value is retrieved or stored.

With all three category values in the dataset everything works as expected:

However, suppose that for a particular dataset the value “1-Low” is not present (perhaps a month when the business is performing well?). In this case the palette colours will still be applied in the same order starting with red, leading to inconsistency and quite possibly confusing the users:

This problem can be overcome by dynamically scripting the series colours based on the category value. Two methods need to be scripted, one for the chart itself and the other for the legend (otherwise the chart and the legend will not match!).


function beforeDrawDataPoint( dph, fill, icsc )
{
    var sValue = dph.getBaseDisplayValue();
    if( sValue == "1-Low" )
    {
        fill.set( 242, 88, 106, 255 );
    }
    else if( sValue == "2-Mid" )
    {
        fill.set( 232, 172, 57, 255 );
    }
    else if( sValue == "3-High" )
    {
        fill.set( 128, 255, 128, 255 );
    }
}


function beforeDrawLegendItem( lerh, bounds, icsc )
{
    var sValue = lerh.getLabel().getCaption().getValue();
    var fill = lerh.getFill();
    if( sValue == "1-Low" )
    {
        fill.set( 242, 88, 106, 255 );
    }
    else if( sValue == "2-Mid" )
    {
        fill.set( 232, 172, 57, 255 );
    }
    else if( sValue == "3-High" )
    {
        fill.set( 128, 255, 128, 255 );
    }
}


The set method can take either three integer parameters with values between 0 and 255 for Red, Green, Blue or four integer parameters (RGB + Alpha channel for opacity). After including the above scripts the chart is generated with the correct colours for the category values:


function beforeGeneration( chart, icsc )
{
    var sYear = icsc.getExternalContext().getScriptable().getParameterValue( "Year" );
    var sMonth = icsc.getExternalContext().getScriptable().getParameterValue( "Month" );
    var sTitle = "Chart for " + sMonth + " " + sYear;
    chart.getTitle().getLabel().getCaption().setValue( sTitle );
}

The title of the chart will be set dynamically based on report parameter values.

There is no option in the chart wizard to fill in the missing values, i.e. replace them with a default. However, it is possible to achieve this with a simple script. In this case we check for the series name and replace the missing values with 0. To use the script, highlight the chart in the UI and click the Script tab along the bottom of the main window. Then simply paste the script below and save the report.


function afterDataSetFilled( series, dataSet, icsc )
{
  if( series.getSeriesIdentifier() == "Series 1" )
  {
    var list = dataSet.getValues();
    for( var i = 0; i < list.length; i = i + 1 )
    {
      if( list[i] == null )
      {
        list[i] = 0;
      }
    }
  }
}


The screenshot below shows the chart with the script included:

My solution to get around this problem is to add a little bit of script to the chart. Simply paste the following code to the charts onRender event (select the chart, click the Script tab at the bottom of the main editor window, select onRender in the first dropdown and beforeDrawLegendItem in the second one):


function beforeDrawLegendItem( lerh, bounds, icsc )
{
    var nVal = lerh.getValueLabel().getCaption().getValue();
    nVal = Math.round( nVal ) + "%";
    lerh.getValueLabel().getCaption().setValue( nVal );
}


The result is a nicely formatted percentage value:

The trick to make the dial take up a larger portion of the overall chart area is to set a couple of “inset” entries to negative values. The values below worked well for me for a chart with width of 4.5 in and height 3 in.

• To move the legend closer to the meter, go to Format Chart > Chart Area > Legend > Layout and set Insets (points) > Top to -20. This assumes that the legend Position is set to Below.
• To move the dial closer to the title, go to Format Chart > Chart Area > Plot > Area Format and set Insets (points) > Top to -30.

The screenshot below shows the same chart with the above two changes:

The exact values may need some trial and error playing around to get the layout exactly right, but the general principle is: don’t be afraid of setting negative inset values.

The fix for this annoyance is straightforward, simply change the output format from SVG to PNG on the first tab of the chart dialog. This also makes scrolling smoother and improves overall responsiveness of Firefox when a report with a lot of charts is displayed.