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; } } }

Gantt Chart: set bar color depending on values

NDJ19_

Hello,
 
I'm trying without success to change the color of my bars depending on value available but not used on axe/serie of the chart.
 
To illustrate my request, I created a sample report as attachment.
 
Basically, I want to change the color repending on the value row["STATUS"].
 
I found a solution by adding the row["STATUS"] in the X series and adding the following code on the function beforeDrawDataPoint
<pre class="_prettyXprint _lang-">
if (dph.getBaseDisplayValue() == <value>)
fill.set(255,0,0);
</pre>
but it dosn't fit for me cause I need to have both colors status in one line.
 
Is there any way to do that.
 
Don't hesitate to ask if you need more information or if my request isn't clear.
 
Thanks for your help

Find more posts tagged with

Comments

Clement Wong

I'm not sure what you want final result of the chart to look like. Your design had start and end dates that were the same for the entire chart.
 
Are you looking for something like the following screenshot? For example, customer #496, had two shipments, one was Shipped (in blue) and the other Cancelled (in red).

NDJ19_

Hello Clement,
 
Thank you for your help. That's work perfectly for the example you gave me, but if I try to use a Date Time format for my start and end date as in the example as attachment, it doesn't work. I guess the probleme comes from the replaceAll but I didn't find how to fix that.
 
Any idea how to do it?
 
Thanks

NDJ19_

I tried with the following regex to get the date time 
<pre class="_prettyXprint _lang-">
([\w]+\s[0-9]+),\s([0-9]+),\s[0-9]+:[0-9]+:[0-9]+
</pre>
but still the same results

- OK when I use date type, 
- KO when I use the date time type.
<div> </div>
Any help is welcome
 
Thanks

Clement Wong

I took another approach. dph.getOrthogonalDisplayValue() returned values such as:
 
S May 21, 2011, 12:00:00 AM; E May 27, 2011, 12:00:00 AM; 114 
S Apr 29, 2011, 12:00:00 AM; E May 8, 2011, 12:00:00 AM; 114 
S Oct 10, 2011, 12:00:00 AM; E Oct 18, 2011, 12:00:00 AM; 121
 
So, we will adjust the PGV in theCounter of the Data Set accordingly. The RegEx works, but please do tidy my RegEx as needed. Here we will use the JavaScript string replace method. Eariler, we used replaceAll because it was a Java String type.
<pre class="_prettyXprint">
var lookupStr = "S " + row["start"].toLocaleString().replace(/(\D{3})(\D*)(\s)(\d+,\s\d+)(\s\d+:\d+:\d+\s\D\D)(\s\D\D\D)/,"$1 $4,$5") + "; E " + row["end"].toLocaleString().replace(/(\D{3})(\D*)(\s)(\d+,\s\d+)(\s\d+:\d+:\d+\s\D\D)(\s\D\D\D)/,"$1 $4,$5") + "; " + row["CUSTOMERNUMBER"];</pre>
Then, in the beforeDrawDataPoint event, just use the following (no RegEx):
<pre class="_prettyXprint">
var status = icsc.getExternalContext().getScriptable().getPersistentGlobalVariable(dph.getOrthogonalDisplayValue());
</pre>
The attached was tested in OS BIRT.

NDJ19_

Thank you for your help.
I tested the last report sent in OS BIRT 4.5 and OS 4.4.2, and I have the same problem. The status don't match with shipped and cancelled and go directly to the else part.
I tried also to use the concept of yesterday ( the replaceAll on the beforeDrawDataPoint using the new regex), and still the same issue. you can see the result as attachement. 
 
On which version of BIRT you tested it?
Is there any way to display on the report the value of the variable status to understand what's happening? 
 
Thank you

NDJ19_

Got it. The problem comes from my locale. I tried to display the varLookup variable, and the result is:
<pre class="_prettyXprint _lang-">
S 20 mai 2011 00:00:00 UTC; E 29 mai 2011 00:00:00 UTC; 103
</pre>
it's the french format of date time.
If I modify the date format to the english one, it's works correctly. You regex fit to the english format. My Question, it there any way to use another approach to get the final result independently to the format selected?
 
Thank you for your help

NDJ19_

Maybe instead to use the toLocalString function set on the varlookup the US format !
 
I tried to use toString("en-US") but not exactly the same format

Clement Wong

You can change the locale of the report via (at the design level) Properties > Advanced > Locale and set this to ft_FR (for example).
 
Working with dates in different formats and in different locales can be tricky. I rewrote the Computed Column to the below using JavaScript String split and BirtDateTime.month (option 3 for short date). It works for me with a Windows regional setting to French (France).
<pre class="_prettyXprint">
if (prevCustomerNumber != row["CUSTOMERNUMBER"]) {
 theCounter+=10;
}

//
// 21 mai 2011 00:00:00 PDT
// 1 mars 2011 00:00:00 PDT
// 29 avril 2011 00:00:00 PDT
// 10 octobre 2011 00:00:00 PDT
//
//S 8 mai 2011 00:00:00; E 18 oct. 2011 00:00:00; 121
//
//janvier fÃ©vrier mars avril mai juin juillet aoÃ»t septembre octobre novembre dÃ©cembre
//janv. fÃ©vr. mars avr. mai juin juil. aoÃ»t sept. oct. nov. dÃ©c.
//

var start, end;

if ( (row["start"] !== null) || (row["end"] !== null)) {

 start = String(row["start"].toLocaleString());
 end = String(row["end"].toLocaleString());

 start = start.split(" ")[0] + " " + BirtDateTime.month(row["start"],3) + " " + start.split(" ")[2] + " " + start.split(" ")[3];
 end = end.split(" ")[0] + " " + BirtDateTime.month(row["end"],3) + " " + end.split(" ")[2] + " " + end.split(" ")[3];

 var lookupStr = "S " + start + "; E " + end + "; " + row["CUSTOMERNUMBER"];
 reportContext.setPersistentGlobalVariable(lookupStr, row["STATUS"]);
}

prevCustomerNumber = row["CUSTOMERNUMBER"];
theCounter;
</pre>

NDJ19_

Thank you very much for all information you gave me. I got the approach and will manage myself to adapt it to my needs.
 
Thanks