JDeveloper 11g will gives us wonderful charts. Colorful, powerful, exhilerating etc. But since it is not yet production, I might just write this little story about yet another way of creating a Bar Chart. In this article, I will show you how using simple InputText elements and little CSS fiddling, we can easily create a simple Bar Chart, that looks not all bad. Like many of my articles, it is more to entertain than to educate.

My objective, for whatever reason, is to create a bar chart in my ADF Faces application that looks like this:

 

What you see here is an overview of all employees in the EMP table in the SCOTT schema and their salaries. This is implemented using:....

  • two read-only inputText elements
  • an af:iterator element
  • a managed bean with color definitions
  • a managed for some simple calculations
  • a little CSS styling on one of the inputText elements

I started out by creating a new ADF application – JSF/ADF BC – and a straightword ADF BC ApplicationModule with just a single default Entity and View Object for the EMP table in the SCOTT schema. Next I created a new JSF page. I dragged the EmpView1 collection to the page, dropping it as a table – the laziest way to create the iterator.

Then I created the following JSF fragment:

  <af:iterator varStatus="status" var="emp"               value="#{bindings.EmpView1.collectionModel}">      <af:inputText value="#{emp.Ename}" />      <af:inputText value="#{emp.Sal}"/>  </af:iterator> 

This iterates over the EMP records  and writes the Ename and Salary for each one of them. At this point, I can delete the af:table from the page, as it has served its purpose.

 

At this point it would be nice to add a little color. We can easily do so using CSS, through the Inline Style property on the InputText element:

<af:inputText value="#{emp.Sal}"              inlineStyle="background-color:red"/> 

This makes all fields that display the salary red. Not pretty. I want to use various colors. So I created a managed bean that specifies a range of colors:

  <managed-bean>    <managed-bean-name>colors</managed-bean-name>    <managed-bean-class>java.util.HashMap</managed-bean-class>    <managed-bean-scope>application</managed-bean-scope>    <map-entries>      <key-class>java.lang.Integer</key-class>      <map-entry>        <key>0</key>        <value>red</value>      </map-entry>      <map-entry>        <key>1</key>        <value>purple</value>      </map-entry>      <map-entry>        <key>2</key>        <value>yellow</value>      </map-entry>      <map-entry>        <key>3</key>        <value>blue</value>      </map-entry>      ... and so on    </map-entries>  </managed-bean>

Now I can refer to the colors in the managed bean in the following way:

<af:inputText disabled="true"              value="#{emp.Sal}"              inlineStyle="background-color:#{colors[status.index]}"/>

 

Note that I use the  status.index EL parameter that was defined in the af:iterator earlier on. This gives me a new color for every employee, at least for as many colors as I have defined in the managed bean. However, if the number of employees exceeds the number of colors, I want to start again with the first color. Using the Calculator bean – a bean I have discussed previously on this weblog – I can use the MOD(ULO) operation to start again after 8 colors, as that is the number specified in the Managed Bean colors:

<af:inputText disabled="true"              value="#{emp.Sal}"              inlineStyle="background-color:#{colors[Calculator.RESET[status.index][8].MOD.INTEGER.EQUALS]}"/> 

I have certainly make progress. However, the most important part of the Bar Chart functionality – bars with lengths proportional to the value they represent – is not yet there. However, with everything we have in place, it is very simple: we use the columns property of the inputText element to have bars of varying lengths:

<af:inputText disabled="true"              columns="#{Calculator.RESET[emp.Sal][6000].DIVIDE[60].MULTIPLY.LONG.EQUALS}"              value="#{emp.Sal}"              inlineStyle="background-color:#{colors[Calculator.RESET[status.index][8].MOD.INTEGER.EQUALS]}"/> 

I have used 6000 as the reference value – all salaries are smaller than that value. The length of each bar – the value of property columns – is calculated as 60 (the maximum length) times the Salary value divided by 6000 (the reference Salary). The complete JSF fragment now looks like this:

<af:panelHeader text="Employees' Salary BarChart"/><af:iterator varStatus="status" var="emp"             value="#{bindings.EmpView1.collectionModel}">  <h:panelGrid columns="2">    <af:inputText value="#{emp.Ename}" disabled="true" columns="11"                  inlineStyle="background-color:rgb(255,255,255); border-color:rgb(255,255,255); border-style:none; color:rgb(0,0,0);"/>    <af:inputText disabled="true"                  columns="#{Calculator.RESET[emp.Sal][6000].DIVIDE[60].MULTIPLY.LONG.EQUALS}"                  value="#{emp.Sal}"                  inlineStyle="background-color:#{colors[Calculator.RESET[status.index][8].MOD.INTEGER.EQUALS]}"/>  </h:panelGrid></af:iterator> 

And that is all that is required to create such a happy bar chart.

 

Resources

Download the JDeveloper 10.1.3.2 Application: ADFTableAsBarChart.zip (and add the JSF and ADF Faces jars to the WEB-INF\lib directory yourself).