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

Change color of bar in bar chart based on date value on X-axis

Max Bo

Hi, I am trying to change the color of the bars in a bar chart. The idea is to mark all bars red, where the date value on the X-axis is lower than today. I have tried this script <pre class="_prettyXprint _lang-js">function beforeDrawDataPoint(dph, fill, icsc){ var sValue = dph.getBaseDisplayValue(); var today = new Date(); var sValueDate = new Date('2011-04-11T11:51:00'); Packages.java.lang.System.out.println("today: " + today); Packages.java.lang.System.out.println("sValue: " + sValue); Packages.java.lang.System.out.println("sValueDate: " + sValueDate); if ( sValue < today ) { fill.set(255, 0, 0); }}</pre>but it seems to be as if the variables 'today' and sValue are not really compatible to each other. Could someone please give me a hint on how to parse the date value from the x-axis so it is compatible with the today variable? Rgds Max

Find more posts tagged with

Comments

Clement Wong

Max, Just change this one line and use the JavaScript's Date.parse() method, and you'll be good to go:<pre class="_prettyXprint">var sValue = Date.parse(dph.getBaseDisplayValue());</pre>

Max Bo

Thanks, tried it but it still does not work. The bars are still in their default color. When checking the console output it returns 'NaN' for the sValue. Would it be possible that you adjust the report file and upload it again so I can have a look at it?Thanks!

Clement Wong

Attached is the modified design, which was tested in OS BIRT 4.3.2 and commercial BIRT iHub3. I also added a second chart that will show red bars for dates earlier than today, and blue for everything else. If it's not working for you, what version of BIRT are using, and what locale is your OS?

Max Bo

Thanks for your support! Still does not work and I know why: I am working with the locale de_DE and when I use en_US everything is fine.But I found this solution to my problem:<pre class="_prettyXprint _lang-js">/*** Called before rendering Series.* * @param series* Series* @param isr* ISeriesRenderer* @param icsc* IChartScriptContexthttp://www.w3schools.com/jsref/jsref_substr.asphttp://www.w3schools.com/jsref/jsref_obj_date.asphttp://www.elated.com/articles/working-with-dates/http://help.eclipse.org/indigo/index.jsp?topic=%2Forg.eclipse.birt.chart.doc.isv%2Fchart%2Fapi%2Forg%2Feclipse%2Fbirt%2Fchart%2Fscript%2FChartEventHandlerAdapter.htmlhttp://www.w3schools.com/jsref/jsref_parse.asp*/function beforeDrawDataPoint(dph, fill, icsc){ var sValue = dph.getBaseValue(); var sValueString = sValue.toString(); var sValueYear = sValueString.substr(6,4) var sValueMonth = sValueString.substr(0,2) var sValueDay = sValueString.substr(3,2) var sValueMilli = Date.UTC(sValueYear, sValueMonth, sValueDay, 1, 1, 1); var today = new Date(); var todayMilli = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate(), 1, 1, 1); var todayMilli2 = Date.parse(today); //the result is different from the UTC value! Packages.java.lang.System.out.println("

BEGIN

"); Packages.java.lang.System.out.println("sValue: " + sValue); Packages.java.lang.System.out.println("sValueYear: " + sValueYear); Packages.java.lang.System.out.println("sValueMonth: " + sValueMonth); Packages.java.lang.System.out.println("sValueDay: " + sValueDay); Packages.java.lang.System.out.println("sValueMilli: " + sValueMilli); Packages.java.lang.System.out.println("today: " + today); Packages.java.lang.System.out.println("todayYear: " + today.getFullYear()); Packages.java.lang.System.out.println("todayMonth: " + today.getMonth()); Packages.java.lang.System.out.println("todayDay: " + today.getDate()); Packages.java.lang.System.out.println("todayMilli: " + todayMilli); Packages.java.lang.System.out.println("todayMilli2: " + todayMilli2); Packages.java.lang.System.out.println("

END

"); if ( sValueMilli < todayMilli ) { fill.set(255, 125, 0); }}</pre>This seems to do the job, both de_DE and en_US. Max