How to Quickly and Simply Integrate Open Flash Chart into Struts 2

Open Flash Chart is a free and open source Flash chart library. It lets you generate charts in Flash via data from a variety of languages, including PHP, Perl, Python, and Java, as well as from a plain text file. In response, Mark Ashworth has set up https://connext-graphs.dev.java.net/, which is a project that simplifies the integration of Open Flash Chart into Struts 2 applications. Here Mark is interviewed about the latest release and developments of the Connext-Graphs project.

The Connext-Graphs library is a plugin for Struts 2 that makes it easy to incorporate the Open Flash Chart library in your web applications. The recently announced 0.6 release includes the sketch bar chart that was recently added to Open Flash Chart.

Mark, first, can you give us some background about yourself?

I live and work in Johannesburg, South Africa. I have been developing applications for the past 12 or so years, from my dark-side days with Microsoft Visual Basic 6.0 to my introduction to Java, using the infamous IBM VisualAge For Java IDE (loved it).

I mainly work as a Senior Java Developer specializing, working, interested in and experimenting with the following:

• JBoss 4.0.4
• Netbeans 6.0 RCP
• Android
• Java ME
• SQL Server 2005
• db4o
• or anything that is interesting...

And can you tell us something about the background of your chart project?

The project was started because I wanted to use a chart library that looked similar to the Google charts in their Analyzer application. Struts 2.0 has a plug-in for the JFreeChart library but I wanted a chart that a user could interact with. When the user hovers over a chart point the properties of that point are shown:

In this way, the chart does not feel like an empty piece of information plonked on the site to take up space.

What are the main features that you've made available?

The main features are as follows:

• Written as a Struts 2.0 plug-in so the initialization of the Flash object is taken care of.
• The chart data generation uses Java objects to model the different aspects of the chart.
• The styling is configurable by the data sent to the chart.
• Some aspects of the chart are stylable via CSS.

Can you show us an example of one of these charts?

Sure. Here's the "sketch chart":

The sketch chart is based upon the bar chart but has an extra "fun" option that indicates how interestingly the chart should be rendered.

Cool! Please walk us through the creation of the above chart!

OK. Here we go:

1. Create a chart controller that specifies the properties of the charting area:
   
   

   OFCGraphController controller = new OFCGraphController();
   controller.getTitle().setText("Example Sketch Bar Chart");
   controller.getTitle().setSize(12);
   controller.getLabels().setLabels(Arrays.asList(labels));
   controller.getYLegend().setText("No. of tasks");
   controller.getYLegend().setColor("#8b0000");
   controller.getYLegend().setSize(12);
   controller.getXLegend().setText("Months");
   controller.getXLegend().setColor("#8b0000");
   controller.getXLegend().setSize(12);
   controller.getColor().getBgColor().setColor("#FFFFFF");
   controller.getColor().getXAxisColor().setColor("#e3e3e3");
   controller.getColor().getYAxisColor().setColor("#e3e3e3");
   controller.getColor().getXGridColor().setColor("#e3e3e3");
   controller.getColor().getYGridColor().setColor("#e3e3e3");
    

2. Create the chart data series. It is possible to mix and match the different series types so you could have a line chart and a sketch chart combined.
   
   

   DefaultOFCGraphDataModel model = new DefaultOFCGraphDataModel();
   model.setData(Arrays.asList(data01));
   model.setFormat(new DecimalFormat("###0.000"));
   model.setSeriesType(new OFCBarSketchSeriesType(55, 10, "#d070ac", "#000000", "Test", 10));

   
   The offset parameter of OFCBarSketchSeriesType(alpha, offset, color, outlineColor, text, size) specifies the "fun" aspect of the chart. The following values can be used: 0 - 3 Boring, 4 - 6 Fun, 7 - Interesting.

   Fun factor 2:

   

   Fun factor 5:

   

   Fun factor 10:

   

   Fun factor 15:

   

3. Add the series to the charting area:
   
   

   controller.add(model);
   
   

4. Render the chart data:
   
   

   value = controller.render();

   
   Here the data string used by Open Flash Chart is assigned to the value property and this property is read by the graph.jsp view.
   
   

   <%@ include file="include.jsp" %>
   <s:property value="value" escape="false" />

   
   
5. Include the Flash component. Of course none of this would work if the Open Flash Chart object was not embedded into the Struts view. The following tags declare the tag library of connext-graphs, create the Flash object, and link the data from the data view defined in the previous steps:
   
   

   <%@ taglib prefix="m" uri="/connext" %>
   
   <m:graph id="graph" 
   		width="400" 
   		height="400" 
   		align="middle" 
   		bgcolor="#FFFFFF" 
   		url="/Graph_exampleSketch.html">
   

Does the project provide samples?

The svn repository has two projects in the trunk:

• connext-graphs : This is the actual Struts 2.0 plug-in
• graph-web : This is a simple demo of some of the charts available.

Both projects make use of Maven2 but they are not deployed to any public repository. If you are trying to only build the graph-web project, then unfortunately you need to first do a mvn install on the connext-graphs project and then try and build the graphs-web project.

Note that, in addition to the sketch chart discussed above, the sample also shows the following two:

Finally, what are some of the enhancements that you're planning to implement?

• Implement Pie Charts.
• Remove the link to the Open Flash Chart site because the chart does this.
• Small fixes and improvements.