ADF DVT Graph – series and groups tags

Recently I used the ADF DVT barGraph component in order to implement a set of statistics and I noticed that by default the graph bars were assigned with the same color.

How to configure the dvt:barGraph (or dvt:horizontalBarGraph) to assign a different color for each of its bars?

Scenario

Now, let’ s say that you would like to display in a dvt:barGraph ADF component the number of employees per job for all jobs.

Model Project

Create a connection to HR database and generate the Jobs and Employees entities and view objects.

Also, create a view link between the above view objects and use it to count the number of employees for each job in a new transient attr – EmpCount .

View Project

From Data Controls drag&drop, as a Graph…, the JobsView into your jspx page and configure it as shown in the image below:

Hint 1: If in the initial configuration you try to swap the bars with the x axis an error will be thrown:

Press OK and run the jspx:

As you can see all bars have the same color.

In order to configure the dvt:barGraph to assign a different color for each of its bars:

I. Using the UI Designer

Go to PageDef file -> Overview tab -> Bindings box -> open the graph binding created above -> press the Swap Bars with X Axis button (notice how Bars and X Axis values will be interchanged):

.

Press OK button and you’ re done.

Hint 2: As explained in Hint 1 swapping bars with x axis action is not supported at graph creation , but after that, in edit mode, it works just fine.

II. From Source

Go to PageDef file -> open Source tab:

You will notice the graph binding:

There are 2 main tags: series and groups and how data is nested inside these tags is very important in our case.

The above preview is the initial one, in which all series are colored the same; this is because the series tag holds the data item.

In order to make it work as desired just cut the data item (EmpCount) and paste it inside the groups tag; then move the JobTitle item inside the series tag as presented below:

What we just did is configured the graph to assign a series for each job title.

Now the graph will render different random colors for each JobTitle value. Also, by using the dvt:seriesSet and dvt:series ADF components from design we can specify the desired color for each JobTitle and a whole lot of other properties.

After you’ re done run the jspx page again and you should get the following:

Hint 3: The above case scenario also applies in the case of dvt:horizontalBarGraph component.

DvtBarGraphSample OFM application – implemented using JDeveloper IDE version 11.1.1.4.0 and built on HR schema – can be downloaded from HERE

You may also wanna read this:

http://www.gebs.ro/admin/blog/oracle/oracle-adf-data-visualization-components-pie-graph-and-bar-graph/

Cheers!