Bar Graph with different color for every Bar ?

Rojo

Hi, can somebody help me, I need to do a Bar Graph with different color for every bar, I need to put javascript code to decide what color i want to every Bar.

Is this posible in report Design ?

Thanks

Virgil Dodson

Hi Rojo,

You can change the color of the bar in the beforeDrawDataPoint event available in the chart Script tab. I created a simple example below that changes the bar color based on the data value.

function beforeDrawDataPoint(dph, fill, icsc)
{
if (dph.getOrthogonalValue() < 20) {
fill.set(0,255,0);
} else if (dph.getOrthogonalValue() < 25) {
fill.set(255,255,0);
} else {
fill.set(255,0,0);
}
}

Rojo

Hi ~Virgil, thanks a lot, i try your code and it is perfect.

Bye.

Rojo

Hi Virgil, as I said, your code is very good, can you help me with this problem:


I have a DataSet with de next fields:

month
Result
Minimum
Satisfactory
Outstanding

In my Graph I put the field month (ex 1,2,3) on X axis and result on Y-axis, in my Previous question you tell me how to change the color of a Bar with the function beforeDrawDataPoint(dph, fill, icsc).

But I need to check if the field Result is <= Minimum and set a color (red)

if result is between minimum and Satisfactory it will take another color like green

if result is between satisfactory and outstanding or upper, it will takes another color, like blue.


With your code, I could changue the color, but I can't make the Comparison with the fields minimum, satisfactory and outstanding.

I Guess is like:


function beforeDrawDataPoint(dph, fill, icsc)
{
if (dph.getOrthogonalValue() <= dataSetRow["minimum"])
{
fill.set(0,255,0);
} else if (dph.getOrthogonalValue() >= dataSetRow["minimum"]) and dph.getOrthogonalValue() <= dataSetRow["satisfactory]))
{
fill.set(255,247,171);
} else
{
fill.set(255,0,0);
}
}


But Obviously I get a error, because dataSetRow["minimum"] is unknown in this function.


I think that maybe I put other 3 series in Y, minimum, satisfactory, and outstanding, and maybe hide this 3 serias and only be visible the result, then with dph get the value of minimum, satisfactory and outstanding, but How do it ?


Thanks.

Virgil Dodson

Hi Rojo,<br />
<br />
There are probably lots of ways of doing this. Here is one approach.<br />
<br />
Set a global variable that holds the values you want. In my example below, I put this script code into my Table's onCreate event.<br />
<br />
reportContext.setPersistentGlobalVariable("min_val",this.getRowData().getColumnValue("Minimum"));<br />
<br />
My chart is in the header of the table and in the chart script, you can reference these global variables like below:<br />
<br />
icsc.getExternalContext().getScriptable().getPersistentGlobalVariable("min_val");<br />
<br />
I created an example to test this out and have uploaded it to the DevShare area of this site at <a class='bbc_url' href='http://www.birt-exchange.com/modules/wfdownloads/singlefile.php?cid=2&lid=276'>http://www.birt-exchange.com/modules/wfdownloads/singlefile.php?cid=2&lid=276</a&gt;

Rojo

Thank you Virgil, I could open your example in Birt 3.3, and I was check the chart script and the table script, I don't know why I cannot open the example in Birt 2.2, it says that the xml has errors, but I see it Birt 3.3 and I'm trying to implement in my application.


Thanks Virgil.

Rojo

Hi Virgil, I run your example, it works fine, It works with the vars minimum, satisfactory and outstandig, and when draw the graph, the comparation is good, but in my case, I need to do the comparation by record, not only for a unique value of minimum, satisfactory and outstanding, I modify the chartdata.txt with the values:


Month,Result,Minimum,Satisfactory,Outstanding
STRING,INT,INT,INT,INT
"01-07",19,25,30,40
"02-07",25,30,35,40
"03-07",40,70,75,95
"04-07",16,10,30,40
"05-07",33,25,30,40
"06-07",32,30,30,40
"07-07",26,25,30,40
"08-07",31,25,30,40
"09-07",38,25,30,40
"10-07",41,25,35,40
"11-07",42,25,30,40
"12-07",44,25,45,50

Look at record "03-07",40,70,75,95, it says that the result is 40, the minimum is 70, then I need that the bar appear in red (it appears blue), because 40 is less than 70, and the example take the first record to set the values of minimum, satisfactory and outstanding, it's good example, but my ranks are diferent for every record.


Can you help me, to resolve this problem ?

Thanks a lot.

Virgil Dodson

Hi Rojo,

I could not find an easy way to get to the associated data row while in this script but there is a workaround that will let you see the other row values.

To do this we need to set up some bogus interactivity options just to hold the values we want to use. In the chart wizard | Format Chart tab, select the Value (Y) Series and then press the Interactivity button. Choose an interactivity option you aren't already using. For this example, select the KeyDown, KeyPress, or KeyUp event and select the Show Tooltip action. For the tooltip text, press the button and select the field from the data row you want to store. For this example, select: row["Minimum"]. Repeat this step using the other two key events and select row["Satisfactory"] and row["Outstanding"].

Once all three values have been stored on the series, you can reference them in the chart scripts with syntax like below:

min_marker = dph.getUserValue("row["Minimum"]");
ok_marker = dph.getUserValue("row["Satisfactory"]");
great_marker = dph.getUserValue("row["Outstanding"]");

This should allow you to have different values for each row.

Rojo

Hi Virgil, thanks a lot, with your help, I resolve the problem, now the Bar Graph is like I want.


Thanks.

wmaynham

This is some very usefull Workarround but does not work for some particular chart Methods.


I set the KeyUp and Mousover method's to show row["X"] value . This works for the beforedrawdatapointlabel but does not work for BeforeDrawDataPoint method. How come ??????

Thanks

Wilfred Maynham
Vichara Technologies

Virgil Dodson

Hi wmaynham,<br />
<br />
What are you trying to do in the beforedrawdatapoint method? You might compare the example located at the URL with yours since it is a working example using the beforedrawdatapoint method.<br />
<br />
<a class='bbc_url' href='http://www.birt-exchange.com/modules/wfdownloads/singlefile.php?cid=2&lid=276'>http://www.birt-exchange.com/modules/wfdownloads/singlefile.php?cid=2&lid=276</a&gt;