Highlighting topN in bar chart

I have a bar chart showing 10 bars. I would like to give the 3 longest bars (i.e. the 3 bars with the highest value) a different colour then the other bars. 
 
I have found an example online (<a class='bbc_url' href='http://marklorenz.blogspot.com/2006/02/birt-tips-for-java-developers.html'>http://marklorenz.blogspot.com/2006/02/birt-tips-for-java-developers.html</a>) that shows how to change the colour of a bar if it passes a marker line, but have been struggeling to adapt this to my wishes. 
 
Example I found: 
 
function beforeDrawDataPoint(dataPointHints, fill, scriptContext ) 
{ val = dataPointHints.getOrthogonalValue(); 
chart = scriptContext.getChartInstance(); 
marker = chart.getAxes().get(0).getAssociatedAxes().get(0).getMarkerLines().get(0).getValue().getValue(); 
if (val > marker) //crosses marker? 
fill.set(255, 0, 0); //yes - display in red 
elsefill.set(0, 0, 255); //no - display in blue 
} 
 
Which function should I use in a script attached to a chart to test whether a value is in the Top 3 ? 
 
I have tried things like: if (isTopN(val, 3).... 
 
but keep getting errors that isTopN is undefined. 
 
Any help would be greatly appreciated.

Find more posts tagged with

Comments

mwilliams

Hi Mennovh,

If it's possible to do with your data. You could sort it by the column that has the values you are charting and put in a loop in the onRender script section of the chart to change the color of the first N bars. I'll try a couple things to see if I can figure out how to highlight the top N without sorting the data.

Regards,

Michael

mennovh

Michael,

that would be great.

Thanks,

Menno

indie

i also need to highlight / conditional color the top n results in a bar chart. 
so i tried the solution described about from mark lorenz blog. 
but unfortunatly it's not working with birt 2.2 any more because the fill object doesn't have a method .set anymore. 
 
error msg: 
TypeError: Cannot find function set. at line 20 of chart script: ... 
 
script is used: 
<pre class='_prettyXprint _lang-auto _linenums:0'>
/**
* Called before drawing each datapoint graphical representation or marker.
* @param dph DataPointHints
* @param fil Fill
* @param icsc IChartScriptContext
*/

function beforeDrawDataPoint(dph, fill, icsc)
{
val = dph.getOrthogonalValue();
chart = icsc.getChartInstance();
marker = chart.getAxes().get(0).getAssociatedAxes().get(0). getMarkerLines().get(0).getValue().getValue();
if (val > marker) //crosses marker?
[B]fill.set(255,0,0)[/B]; //yes - display in red
else
fill.set(0,0,255); //no - display in blue
}
</pre>

mwilliams

Mennovh and Indie, 
 
I just posted a DevShare example on one way to highlight the top N values of a bar chart. Hope it helps. Here is the link: 
 
<a class='bbc_url' href='http://www.birt-exchange.com/modules/wfdownloads/singlefile.php?cid=2&lid=401'>http://www.birt-exchange.com/modules/wfdownloads/singlefile.php?cid=2&lid=401</a> 
 
Regards, 
 
Michael Williams

indie

I'll try to adapt your solution.
Thx a lot for making this tutorial report!!!

mennovh

Thanks a lot. An answer and an example report brilliant.

Ronak

Hi Michael,

It is good example for Highlighting.

Thanks
Ronak