Dynamically Updating bar colors in HTML5 Bar Charts

HTML5BarChart-CustomiseColors(1).zip

This example guides a developer through creating a bar chart that changes bar colors depending on a threshold and also based on the current month. The final product will look like this:

(Red is Current Month, Blue is Sales if Over 50000, Green is if they are under)

(JRXML file attached)

This example uses the Foodmart database that is included with the Jaspersoft BI Suite if you choose to install samples. Create a simple report with the following query :

SELECT sum(sales_fact_1997.store_sales) as sales,
       time_by_day.the_month
  FROM sales_fact_1997
       INNER JOIN time_by_day ON
                  time_by_day.time_id = sales_fact_1997.time_id
         GROUP BY the_month, month_of_year
         ORDER BY month_of_year

Add a HTML5 – Column Chart to the summary band and delete all the other bands
Goto the HTML5 Charts Properties -> Chart Data -> Configuration page
Modify the “Categories Level” to remove the default “Level1” category and Add the Month category as below …
Add the Bucket Property : color
The Magic …this
With this as the property expression:
IF($F{the_month}.toString().matches(DATEFORMAT(new Date(),"MMMMM")),"red",IF($F{sales}.intValue() >= 50000,"green","blue"))
and the Bucket property page should look like this :
Return to the Chart Properties page
Remove the default measure and Add the following Value Definition
And the following Advanced property:
Return back to the report view and preview the Report: