Chart Scripting: Pie Chart Series Color

My question is, how can i color a SERIES in a pie chart dynamically, depending on the Value of the Series. The trick is, i just want to color the first series. I can identify the series with in the beforeDrawSeries functionseries.getSeriesIdentifier() i wanted to do something like: function beforeDrawSeries( series, isr, icsc )
{ if series.getSeriesIdentifier()="Series 1" { and then color the slice depending on the value.I tryed it in onRender. any help would be much appreciated. Matthias

Find more posts tagged with

Comments

kclark

Take a look at this <a data-ipb='nomediaparse' href='http://www.birt-exchange.org/devshare/_/designing-birt-reports/1231-custom-chart-colors-based-on-data-set-values'>devshare</a>, it should contain an example that shows how to do this.

mmazenauer

Thank you very much. I think i have to explain in more detail what i am after. This works fine:<pre class="_prettyXprint">function beforeDrawDataPoint( dph, fill, icsc ){var sValue = dph.getSeriesDisplayValue(); if ( sValue < 0.35) { fill.set(215, 25, 28); } else if ((sValue >= 0.35) & (sValue < 0.6)) { fill.set(253, 174, 97); } else if ((sValue >= 0.6) & (sValue < 0.85)) { fill.set(166, 217, 106); } else { fill.set(26, 150, 65); } }</pre>But what i wanted is to identify the series with<pre class="_prettyXprint">function beforeDrawSeries( series, isr, icsc ){}</pre>The problem is, that i can't get to the value and the fil in the beforeDrawSeries function. I want to color theblue arc in the attached image depending on his value. the white part is just the maximum minus the actual value and i don't want this part to be shown or colored depending on the value.

kclark

Can you reattach the image?

shamo

Good info

shamo

How do I get same script for HTML5 chart, want to dynamically change pie colors based on data value script up works for PNG. using birt version 4.2.3
build id v20131216.

Clement Wong

For HTML5, you want to add code in the beforeDrawDataPoint event. It's point.name for each slice's name. For bar charts, it's point.category.
 
 
You can always add a debugger; statement in beforeDrawDataPoint if you want to see what other point.* values are available from your browser's DevTools.
<pre class="_prettyXprint">
beforeDrawDataPoint: function(point, pointOptions, chart, seriesIndex, pointIndex)
{
// Pie Chart
if (point.name == 'In Process')
 pointOptions.color = "rgb(71,167,7)"; // You can also use hex or color name: "#00ff00" or "green";


// Bar Chart
//
//if (point.category == 'In Process')
// pointOptions.color = "rgb(71,167,7)";
//

},</pre>

shamo

Thanks Clement for you reply. What I want is based on a seriesvalue say the series below 50 then red, between 51 and 75 then orange and above 75 then green

Clement Wong

Instead of the debugger; in the Designer, the code autocomplete will also provide you with variable/values you can use. (For example, type in "point." and you'll see what's available.
 
For your requirements, a starting point in beforeDrawDataPoint would be like...
<pre class="_prettyXprint">
if (point.y < 50)
pointOptions.color = "red";</pre>

shamo

Thanks Clement

Neojet

hello again,
 
 
<blockquote class="ipsBlockquote" data-author="Clement Wong" data-cid="144115" data-time="1464819927">
<div>
 
Instead of the debugger; in the Designer, the code autocomplete will also provide you with variable/values you can use. (For example, type in "point." and you'll see what's available.
 
For your requirements, a starting point in beforeDrawDataPoint would be like...
<pre class="_prettyXprint">
if (point.y < 50)
pointOptions.color = "red";</pre>
</div>
</blockquote>
 
I tried it for my HTML5 line chart, but it's not working, do you know the reasons ?
 
I also tested things like :
 
<div>- point.series.data.color = "green";</div>
<div>- point.series[0].color = "green";</div>
<div>- pointOptions.color = "blue";</div>
<div>- color = '#0033FF'</div>
<div> </div>
<div>and no one is working.</div>
<div> </div>
<div>Thank you very much for your help.</div>

Clement Wong

Please attach a sample of your sample report. Also, did you check in the browser's DevTools via debugger; to see what options are available for your chart?

Neojet

Please see a sample of my report with the source.
 
No, i'm on chrome, and i don't really know what i have to looking for and how to find the options which are avalaible..

Thank you.

Clement Wong

DevTools with the debugger; is a useful tool. For example:
 
1. Add the following statement in any (client side) event like:
<pre class="_prettyXprint _lang-">
beforeDrawDataPoint: function(point, pointOptions, chart, seriesIndex, pointIndex, seriesOptions, series )
{
debugger;
},
</pre>
2. Run and view your report. You can let it load, or immediately after seeing the browser window before the report loads, press F12 to load the DevTools of the browser. If you let it load, press F12, and then F5 to reload.
 
When the code hits the "debugger;" statement, it will stop. From there, you can use the tool and console to explore the (JavaScript) variables that are available.
 
 
To change the color in the scatter, use fillColor:
<pre class="_prettyXprint _lang-">
beforeDrawDataPoint: function(point, pointOptions, chart, seriesIndex, pointIndex, seriesOptions, series )
{
if (point.y < 85)
pointOptions.fillColor = "green";
},

</pre>

Neojet

1. Ok thank you, i'll test it

2. wow, with "fillColor" ok.. thank you !!
But was it possible to find it alone ?

I mean i checked again in the reference (api.highcharts) , and i didn't find the "fillColor"
nor even when i wrote "pointOptions." , "fillColor" didn't show up in the pop up of birt

So i mean, how do you find the solution ?
I ask this, for being able to find my solution alone and stop bothering you

Otherwise, thank you really much for your help !!

nayak_anupam07

Suppose i have 5 categories in pie chart and each category has unique colors at runtime. How can i set these unique colors to category using script? color value will be there in the data set.

Chad Montgomery

Since the link was broken, here's the devshare post that was referenced above: https://forums.opentext.com/forums/discussion/60845/custom-chart-colors-based-on-data-set-values

If the color is defined in a different column, one way you can get access to that is concatenate the category and color to a single string in a computed column and use that as your category. Then parse the color from the data point value when setting the color. You would need adjustments elsewhere to trim out the color from category labels.

nayak_anupam07

@Chad Montgomery Thanks for your suggestion and it worked fine for me except one new prob. So After splitting color values from series name and reassigning series name to label, there is extra space in legend items which was allocated to the string which had color values in it. Because of that legend items are extending to the next line and it is looking weird now. DO you have any suggestion for this? If i get solution for this i can proceed and use it.

Chad Montgomery

Could you attach your report or an example?