ADF Tips: How to correctly color a bar chart in 12.1.3?

As you might have seen in different tutorials and posts (including us), before, it was not clear how to avoid displaying a graph (or chart in 12.1.3) where all the bars were colored the same. For example, before 12.1.3 the strategy we used, and many of you as well, was to simply “swap bars with” as we showed in one of our previous posts; So your graph would go from this: to something like this: In 12.1.3 the option was not present but you could do essentially the same modifying the source in your page. However, for this version (and probably for earlier releases) this is not the correct way to do this. Instead, you need to use the <dvt:attributeGroups> as follows. Once you have dragged and dropped your bar chart in your page, you will see a structure like this: adf_how_to_color_charts_2 Now, right clicking on the dvt:charDataItem -> insert inside -> Attribute Groups adf_how_to_color_charts_3 Then in the property inspector, select Type -> Edit -> tick the color box; adf_how_to_color_charts_4 Save your page and run your app. This is how it will look now: adf_how_to_color_charts_5   You can even control the color of the bars based on any business requirement. To illustrate this imagine that we want to show red bars for those departments which TotalSalary is less than 10000, Orange for those between 10000 and 25000 and green for those with TotalSalary greater than 25000. In order to do this, we implement the logic in a transient attribute in our DepartmentsView as follows; adf_how_to_color_graph_chart_12.1.3 Then we simply consume that attribute in the Color’s attribute for <dvt:charDataItem adf_how_to_color_graph_chart_12.1.3_2 And this is the result: adf_how_to_color_graph_chart_12.1.3_3

Leave a comment

Your email address will not be published.

Social Media

Stay up-to-date with our latest ADF and related technical posts via your favourite social network services.