Creating a Salary Heat Map with the ADF 11g Faces PivotTable component

A heat-map according to the definition found in Wikipedia is "a graphical representation of data where the values taken by a variable in a two-dimensional map are represented as colors." This representation is used to quickly interpret a potentially large number of values in what can be sizable grid of values. Heat-maps are used to find hot-spots and cool areas – to determine for example deviations from the average or threshold value.

This article shows how the PivotTable in the ADF 11g RichFaces Data Visualization Tags library can be used to create such a Heat Map. In just a small number of simple steps, this heat-map can be realized. We will see this in an example: a heat-map based on the grid of Job vs. Department with average Salary in the cells. The heat-map should quickly tell us which jobs and which departments pay well or lousy.

The steps for implementing the heat map:

1. Start JDeveloper 11g, Create new Application called HeatMap, type Fusion Web Application.

2. Create default Business Components for (Scott’s) EMP table in HrmService Application Module

3. Create a new JSF page SalaryHeatmap.

Drag the Emp collection from the DataControl palette on the new page, drop it as Pivot Table

In the PivotTable binding dialog:

In the preview, we note how the PivotTable deals with multiple occurrences of the same Job in a Department: the salary values are added together.

Instead, we want to have the Average of the salaries of such multiple occurrences calculated and displayed. For this, we need to go to the PageDefinition for the SalaryHeatmap page and edit the pivotTable binding element: 

We need to specify the defaultAggregateType for the data element, setting its value to AVERAGE:

    <pivotTable IterBinding="EmpView1Iterator" id="EmpView1"
                xmlns="http://xmlns.oracle.com/adfm/dvt">
      <pivotTableDataMap>
        <columns>
          <data aggregateDuplicates="true" defaultAggregateType="AVERAGE">
            <item value="Sal" label="__NO_LABEL"/>

Save All and run the page

The data is there, now we need to apply colors to the cells – to turn the heat on in the map! Colors are set through the cell format’s inline style. We can associate the pivot table with a bean that determines the cellFormat for every cell.

        <dvt:pivotTable id="pivotTable1"
              dataFormat="#{HeatmapManager.getCellFormat}"
              value="#{bindings.EmpView1.pivotTableModel}"/>

The bean referred to here needs to be configured and of course the underlying class created.

First add in adf-config.xml or faces-config.xml:

  <managed-bean>
    <managed-bean-name>HeatmapManager</managed-bean-name>
    <managed-bean-class>view.SalaryHeatmapManager</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
  </managed-bean>

Then create the SalaryHeatmapManager class:

public class SalaryHeatmapManager {

    public CellFormat getCellFormat(DataCellContext cxt) {
        CellFormat format = new CellFormat(null, "", "");
        Long cellValue = (Long)cxt.getValue();
        String color = "gray";
        if (cellValue != null) {
            if (cellValue < 1200)
                color = "green";
            else if (cellValue < 2400)
                color = "yellow";
            else if (cellValue < 3600)
                color = "orange";
            else
                color = "red";
        }
        format.setStyle("background-color:" + color);
        return format;
    }
}

The important method here – well, the only one really – is getCellFormat. It is called by the PivotTable for every cell in the matrix. It gets passed in the cell context – which contains among other things the cell’s current value – and returns the style to be used for the cell. Note that the cellFormat can also contain the text style, for making the cell’s value bold, italic or decorated in some other way.

When we next run the page, we have our heatmap:

Obviously the effect of using a heat map is much more useful with much larger volumes of data where the sheer number of cells is ovewrwhelming and quick interpretation is virtually impossible. But even with this relatively small data set, we note the not very surprising fact that CLERKs typically earn less than the other jobs, though CLERKs in department 10 seem to have done somewhat better for themselves. I did not realize that SALESMAN does not pay all that well. The fact that the PRESIDENT is in the salary hot spot is to be expected, as he is supposed to take most of the heat anyway…

What I hope you can take away from this article is the ease with which you can create such a heatmap. If I did not have to write the text and take the screenshots, I would have been done inside of 10 minutes. And creating a heatmap for EMP is not so much different from creating a heatmap for any other query.