JSF, Flex, and Elections 2008

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.

screenshot01.png


   
	
  

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

public class ColumnChart {

   private HashMap data1;
   private ArrayList barColor;

   public ColumnChart() {}

   @PostConstruct
   public void init() {
      data1 = new HashMap();
      data1.put("Obama", 349);
      data1.put("McCain", 163);

      barColor = new ArrayList();
      barColor.add("#003366");
   }
}

Easy, right?

Let’s move to bar chart using fiji:barChart component. This charts shows percentage of vote each candidate received.

screenshot02.png


	

Managed bean for the chart:

public class ColumnChart {

   private HashMap data2;
   private ArrayList barColor;

   public ColumnChart() {}

   @PostConstruct
   public void init() {
      data2 = new HashMap();
      data2.put("Obama", 53);
       data2.put("McCain", 46);

      barColor = new ArrayList();
      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.

screenshot04.png


   
   
   
   

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

4 thoughts on “JSF, Flex, and Elections 2008

  1. Hi i m also planning to use the fijicharts in my website can u plz tell me how can we add option in chart so that user can view chart for 10days,20days,30days,2month in same chart user just click on link and chart will update ..can u plz tell me how can i do this?

    thanks in advance

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s