Setting BIRT chart series palette dynamically in BDPro using Client Script

I want to set the colors on my bar chart's Optional Grouping data element. I've come across numerous examples that tell me to paste the beforeDrawDataPoint( dph, fill, icsc ) function into my script page for the the chart. This does not seem to work in BDPro. This function is now moved into the Client Script section of the Chart and uses totally different methods. I borrowed the example below from <a data-ipb='nomediaparse' href='http://martinhammer.com/blog/?p=575'>http://martinhammer.com/blog/?p=575</a> because it provides the clearest explanation of what I want to do, I just need some help in doing it in BDPro.
 
Thanks

For example, in the chart below â€œHighâ€ is represented in green, â€œMidâ€ in orange and â€œLowâ€ in red.
<img src="http://www.martinhammer.com/blog/wp-content/uploads/2010/09/barchart_01.png" title="Stacked bar chart" alt="barchart_01.png">
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:
<img height="160" src="http://www.martinhammer.com/blog/wp-content/uploads/2010/09/barchart_02.png" title="Stacked bar chart" width="530" alt="barchart_02.png">
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 ); 
 } 
}

Find more posts tagged with

Comments

Matthew L.

I believe the reason for the code not working is because this code is for an SVG chart and BIRT Pro defaults to an HTML5 chart.
If you change the Chart output format to SVG (Edit Chart [Window] -> Select Chart Type [Tab] -> Output Format

) this code should work.

Clement Wong

Since you are using BIRT Designer Professional, you should use the HTML5 chart option. It's much easier to customize.
 
Attached is an example.
<pre class="_prettyXprint">
beforeDrawSeries: function(series, seriesOptions, chart, seriesIndex)
{
 if(series.name=='Resolved'){
 seriesOptions.color = 'green';

// you can use color = 'rgb(12,25,55)';
// or color = 'rgba(33,88,183,128)';
// or color = '#a3b433';

 }else if(series.name=='On Hold'){
 seriesOptions.color = 'yellow';
 }
 else if(series.name=='Cancelled'){
 seriesOptions.color = 'red';
 }
},</pre>

Chad Montgomery

I've created a report that does what you're wanting. The script is located in the "Script" tab of the "Edit Chart" window. HTML5 charts use highcharts, and have their own API for doing so: <a data-ipb='nomediaparse' href='http://api.highcharts.com'>api.highcharts.com</a>
 
Edit: Sorry Clement, beat you to it

kbpeavey

Thanks to each of you for taking the time to answer my question. I apologize for my delayed response, this was my first day back since posting.
 
Clement, Your inline example nailed it for me. I will be able to make my deadline to publish this report.
 
Chad, I'm am most eager to examine the rptdesign files you and Clement provided. I am sure there are more great nuggets within. Unfortunately, I have to jump through hoops to upload these files to my system, so it will be a day or two longer before I can view them.
 
Matthew, you were obviously correct about the HTML5 Chart. That's a nugget that definately pointed towards a solution. However, with BDPro, I don't think the beforeDrawDataPoint function, from the martainhammer example, was even being called. Could I be mistaken?
 
Again, my thanks.
 
Regards,
Keith
<blockquote class="ipsBlockquote" data-author="Clement Wong" data-cid="143019" data-time="1458845022">
<div>
 
Since you are using BIRT Designer Professional, you should use the HTML5 chart option. It's much easier to customize.
 
Attached is an example.
<pre class="_prettyXprint">
beforeDrawSeries: function(series, seriesOptions, chart, seriesIndex)
{
 if(series.name=='Resolved'){
 seriesOptions.color = 'green';

// you can use color = 'rgb(12,25,55)';
// or color = 'rgba(33,88,183,128)';
// or color = '#a3b433';

 }else if(series.name=='On Hold'){
 seriesOptions.color = 'yellow';
 }
 else if(series.name=='Cancelled'){
 seriesOptions.color = 'red';
 }
},</pre>
</div>
</blockquote>