Creating a Bar Chart in ADF Faces using nothing but inputText and a little CSS

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:

  &lt;af:iterator varStatus=&quot;status&quot; var=&quot;emp&quot;<br />               value=&quot;#{bindings.EmpView1.collectionModel}&quot;&gt;<br />      &lt;af:inputText value=&quot;#{emp.Ename}&quot; /&gt;<br />      &lt;af:inputText value=&quot;#{emp.Sal}&quot;/&gt;<br />  &lt;/af:iterator&gt;<br />&nbsp;

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:

&lt;af:inputText value=&quot;#{emp.Sal}&quot;<br />              inlineStyle=&quot;background-color:red&quot;/&gt;<br />&nbsp;

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:

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

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

&lt;af:inputText disabled=&quot;true&quot;<br />              value=&quot;#{emp.Sal}&quot;<br />              inlineStyle=&quot;background-color:#{colors[status.index]}&quot;/&gt;<br /><br />

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:

&lt;af:inputText disabled=&quot;true&quot;<br />              value=&quot;#{emp.Sal}&quot;<br />              inlineStyle=&quot;background-color:#{colors[Calculator.RESET[status.index][8].MOD.INTEGER.EQUALS]}&quot;/&gt;<br />&nbsp;

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:

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

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:

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

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).