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:
Now, right clicking on the dvt:charDataItem -> insert inside -> Attribute Groups
Then in the property inspector, select Type -> Edit -> tick the color box;
Save your page and run your app. This is how it will look now:
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;
Then we simply consume that attribute in the Color’s attribute for <dvt:charDataItem
And this is the result: