Dynamically Updating bar colors in HTML5 Bar Charts

Example JRXML File

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)

  1. 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,
      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
  2. Add a HTML5 – Column Chart to the summary band and delete all the other bands

  3. Goto the HTML5 Charts Properties -> Chart Data -> Configuration page

  4. Modify the “Categories Level” to remove the default “Level1” category and Add the Month category as below …

  5. 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 :

  6. Return to the Chart Properties page

  7. Remove the default measure and Add the following Value Definition

  8. And the following Advanced property:

  9. Return back to the report view and preview the Report: