On the heels of elections this week, let me show you how you can use JSF and Flex to build nice looking Flash-based charts with elections results. To use JSF and Flex together, I will be using Exadel Fiji.
Let’s start with electoral votes and use a column chart. Below is an example using rich:columnChart component. It’s a static image here, but it’s actually a Flash component in a JSF page. As you move the mouse over columns, a tool tip is shown.
1 2 3 4 5 6 7 8 | <rich:panel header="Elections 2008"> <fiji:columnChart value="#{columnChart.data1}" width="350" height="450" title="Electoral votes" captionX="Candidates" captionY="Electoral Votes" barColors="#{columnChart.barColor}" toolTipValue="{x} has {y} {name}" rulersValuesHighlight="none"> <fiji:chartData value="electoral votes" type="name" /> </fiji:columnChart> </rich:panel> |
fiji:columnChart is a JSF component and renders a Flash chart. What’s really neat is that you can use standard JSF managed beans to provide data for the chart. Here is the managed bean (you can also use Seam components):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | public class ColumnChart { private HashMap<String, Integer> data1; private ArrayList<String> barColor; public ColumnChart() {} @PostConstruct public void init() { data1 = new HashMap<String, Integer>(); data1.put("Obama", 349); data1.put("McCain", 163); barColor = new ArrayList<String>(); barColor.add("#003366"); } } |
Easy, right?
Let’s move to bar chart using fiji:barChart component. This charts shows percentage of vote each candidate received.
1 2 3 4 5 6 | <fiji:barChart value="#{barChart.data2}" width="450" height="250" title="% Vote" captionX="Candidates" captionY="Vote %" barColors="#{barChart.barColor}" toolTipValue="{x} has {y} {name}" rulersValuesHighlight="none"> <fiji:chartData value="% vote" type="name" /> </fiji:barChart> |
Managed bean for the chart:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | public class ColumnChart { private HashMap<String, Integer> data2; private ArrayList<String> barColor; public ColumnChart() {} @PostConstruct public void init() { data2 = new HashMap<String, Integer>(); data2.put("Obama", 53); data2.put("McCain", 46); barColor = new ArrayList<String>(); barColor.add("#003366"); } } |
There are other charts in Fiji such as stackedBarChart, stackedColumnChart and lineChart. You can see them all in action here.
These charts come out of the box with Fiji. What if you want to use a Flash component that you built or someone else did? You can use fiji:swf component to wrap any existing Flash module. I’m going to use a pie chart component made by amCharts.com . I will use the pie chart to show popular vote numbers.
1 2 3 4 5 6 7 8 9 | <fiji:swf src="/elections/ampie.swf" bgcolor="#FFFFFF" width="520" height="400"> <f:param name="path" value="/elections" /> <f:param name="settings_file" value="#{facesContext.externalContext.requestContextPath}/elections/ampie_settings.xml" /> <f:param name="data_file" value="#{facesContext.externalContext.requestContextPath}/elections/ampie_data.xml" /> <f:param name="preloader_color" value="#999999" /> </fiji:swf> |
Using fiji:swf it’s possible to wrap any Flash component as JSF component. f:param is then used to provide data for the JSF component and in turn for the Flash module.
If you want to try Fiji, check out this article on dzone.com
