nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Colour of bars in Chart

MALPI

Hi,

I have another question.

I am actually designing Reports with Charts. In the Charts are listed different providers. They are ranked by the number of bookings or anything else.

Totally I have 8 Charts with the same providers but with a different order. I am ordering on the values of the ranking and not on the name of the providert

I think the colouring of the bar which represents a provider depends on the order in the Chart. Is it possible to define a static colour for each provider. I want to have the same colour in each chart.

Thanks & Greetings,

MALPI

Find more posts tagged with

Comments

mwilliams

Hi MALPI,

You can add a simple script to each chart to provide a custom color for each bar, in the beforeDrawDataPoint function in your chart script. If you're using the legend in each chart, you'll also have to provide this color to the legend in the beforeDrawLegendItem script. Let me know your BIRT version if you need an example.

MALPI

<blockquote class='ipsBlockquote' data-author="'mwilliams'" data-cid="92668" data-time="1324563118" data-date="22 December 2011 - 07:11 AM">
Hi MALPI, 
 
You can add a simple script to each chart to provide a custom color for each bar, in the beforeDrawDataPoint function in your chart script. If you're using the legend in each chart, you'll also have to provide this color to the legend in the beforeDrawLegendItem script. Let me know your BIRT version if you need an example. </blockquote>
 
I am using BirtRuntime 3.7.

mwilliams

Take a look at this example. The charts in the left side of the grid are the originals, the ones on the right side have the script in them. Hope this helps.

MALPI

Thank You.

Can I also set up the script on onRender function in the element which contains all charts?

Greets,

MALPI

MALPI

Hey,

the problem still exists. Your post solves the problem to colour the bars for each provider in same colour.

But the next step is, I dont know how many provider I will get.

I thought about it and my idea is, to save my providers i a list or Hashmap and to order them alphabetically.
In the script then i will take the providers out of the List. The problem is, where can I define such a list. It must be known globally?

Or can i directly take the elements out of the datasource like "datasource.provider[1]"?

Hope somebody can help me.

Greetings,

MALPI

mwilliams

If you have a list of colors to use that is longer than you'll ever run into for how many providers you have, you should be able to assign colors from the list to your providers somewhere globally that your charts will be able to access. Let me know if you need further explanation.

MALPI

Hey, 
 
<blockquote class='ipsBlockquote' data-author="'mwilliams'" data-cid="94017" data-time="1326407300" data-date="12 January 2012 - 03:28 PM">
If you have a list of colors to use that is longer than you'll ever run into for how many providers you have, you should be able to assign colors from the list to your providers somewhere globally that your charts will be able to access. Let me know if you need further explanation. </blockquote>
 
In the Chart I am trying to do somethin like: 
 
<pre class='_prettyXprint _lang-auto _linenums:0'>
var provider = dataSetRow["provider"];
var providerInt = parseInt(provider);

/*
Werte zwischen 0 und 255
*/
var red = 50;
var green = 0;
var blue = 100;

function beforeDrawDataPoint( dph, fill, icsc )
{
fill.set(red+providerInt, green+providerInt, blue+providerInt);
}

function beforeDrawLegendItem( lerh, bounds, icsc )
{
lerh.getFill().set(red+providerInt, green+providerInt, blue+providerInt);
}
</pre>
 
But dataSetRow is not accesible through the onRender task. Maybe you can tell me how i can acces the data? 
 
Greetings, 
 
MALPI

MALPI

I actually solved the problem. If it is interesting for somebody, my solution: 
 
in onRender task of the charts I have overwritten the functions beforeDrawPoint and beforeDrawLegendItem with following Code: 
 
<pre class='_prettyXprint _lang-auto _linenums:0'>

var provider;
var providerInt = 0;
var red;
var green;
var blue;

function beforeDrawDataPoint( dph, fill, icsc )
{
providerInt = 0;
provider = dph.getSeriesValue();

if(provider != null){

red = parseInt(provider.charAt(0))*1000;
green = parseInt(provider.charAt(1))*1000;
blue = parseInt(provider.charAt(1))*10000;

if(red > 255){
red = red %255;
}

if(blue > 255){
blue = blue % 255;
}

if(green > 255){
green = green % 255;
}

fill.set(red, green, blue);
}

}

function beforeDrawLegendItem( lerh, bounds, icsc )
{
providerInt = 0;
provider = lerh.getLabel().getCaption().getValue();
if(provider != null){

red = parseInt(provider.charAt(0))*1000;
green = parseInt(provider.charAt(1))*1000;
blue = parseInt(provider.charAt(1))*10000;

if(red > 255){
red = red %255;
}

if(blue > 255){
blue = blue % 255;
}

if(green > 255){
green = green % 255;
}

lerh.getFill().set(red, green, blue);
}
}

</pre>
 
With dph.getSeriesValue(); and lerh.getLabel().getCaption().getValue(); I get the actual value which is computed. 
 
Greetings, 
 
MALPI

mwilliams

Sorry for the delayed response. The forums have been very busy, so sometimes it takes a while to get back around to questions! Glad you got a solution working! Let us know whenever you have questions!

XFabien

Hello Michael,

If I have 2 series in your exemple here, how can I make the second series different with the first one?

Thanks

mwilliams

Here's an example that shows how to color one series different from another. Hope it helps.

XFabien

<blockquote class='ipsBlockquote' data-author="'mwilliams'" data-cid="97831" data-time="1331836249" data-date="15 March 2012 - 11:30 AM">
Here's an example that shows how to color one series different from another. Hope it helps. </blockquote>
 
Thanks for the reply. 
But it doesn't work for my case. 
<a class='bbc_url' href='http://www.birt-exchange.org/org/forum/index.php/topic/24934-chart-script-for-changing-the-bar-colour/'>http://www.birt-exchange.org/org/forum/index.php/topic/24934-chart-script-for-changing-the-bar-colour/</a> 
 
I think it is a bug. It doesn't work if it's base at a crosstab.

mwilliams

So, do you want the coloring to be by "Group" like your code in the other thread suggests? Or do you want the first bar of each "zone" to be one color and the second bar be another? I'm not sure I'm understanding what you're wanting. Let me know.

mwilliams

Should the little block on top of the first column be the same color as the rest of the column?

XFabien

I am very sorry that I didn't explained clearly the thing.

Exactly, I want the coloring to be by "Group" like the code in the other thread suggests.
Just like the following :

if ("Series 1") {
if (group== "Group 1") RGB(64, 128, 128)
else if(group== "Group 2") RGB(177, 208, 193)
else if(group== "Group 3") RGB(246, 177, 135)
} else RGB(148, 162, 168)

The parameter 'bloc' is for testing the others if the script works well or not.

mwilliams

Ok, I see what you're saying now. The issue is that when you use y-series grouping, the group is returned when you call getSeriesDisplayValue. The actual series identifier is not available. If I find a way around it, I'll let you know.

XFabien

Ok, thanks for the help Michael!!

XFabien

<blockquote class='ipsBlockquote' data-author="'mwilliams'" data-cid="97948" data-time="1331914498" data-date="16 March 2012 - 09:14 AM">
Ok, I see what you're saying now. The issue is that when you use y-series grouping, the group is returned when you call getSeriesDisplayValue. The actual series identifier is not available. If I find a way around it, I'll let you know. </blockquote>
 
 
Hello Michael, 
 
I am trying to find one solution for this problem. And then, I think I found it. 
I have created several computedColumn and add a persistentGlobalVariable with the value of one computedColumn in the onFetch of the the dataSet. 
And after that, I add the script into the onRender of the chart and call the persistentGlobaleVariable. 
 
But unluckly, the persistentGlobaleVariable doesn't fetch the value that I want. It fetchs always 'null' value. 
 
So, could you please look at this example and help me resolve it?

XFabien

Finally, I found the solution that I added the computed column in the report and created the persistentGlobleVariable in the onRender event.

So it works well.

mwilliams

The onFetch doesn't seem to have access to your computed column. If you move the setPGV script into your computed column, it sends a value through. The issue seems to be the same though.

mwilliams

Oh, good to hear. Sorry for the previous reply. I hadn't refreshed since opening this post before you re-posted! Glad you got it going!