Geertjan is a DZone Zone Leader and has posted 457 posts at DZone. You can read more from them at their website. View Full User Profile

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

02.15.2008
| 22744 views |
  • submit to reddit

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.

 

 

Published at DZone with permission of its author, Geertjan Wielenga.

Comments

Alexander Shvets replied on Fri, 2008/02/15 - 6:51pm

If you need to build charts, there is JFreeChart java library. In struts2 they even have separate plugin for it that has this class: org.apache.struts2.dispatcher.ChartResult.

 

Mark Ashworth replied on Sun, 2008/02/24 - 6:07pm

Connext Graph 0.7 is ready with the following fixes:-

  1. Fixed the chart title font and color problem
  2. Removed the Open Flash Chart link
  3. Added Pie Chart support

If anyone knows how to setup a project pom.xml file so that the artifacts can be published to a public Maven 2 repo can you please email me the details at javameme@gmail.com, thanks.

vijaybhaskar va... replied on Thu, 2008/09/18 - 11:42am

Hi,

I am using struts-2 for developing reporting application which incorporates the use of open flash chart.

I am having a doubt regarding the controller part of this tutorial.

I want to know for what reason we have to use this controller?

Is it to produce the data file to format the chart look and feel?

Please help me out.

Thanks,

Vijay. 

 

raymundo reyes replied on Mon, 2008/09/29 - 4:30pm

hi, im using the connexant-graph plugin and im interested in know if its possible to add links to the bars like open-flash-chart because just have one method that accept only one parameter and is a list, i dont know if you can tell me if its possible to do so if its possible how can i do that, thanks,

Mark Ashworth replied on Mon, 2008/09/29 - 5:08pm

Good Day,

Thank you for using the Connext Graph plugin, could you please provide via a link or something that shows an example of the bar chart that you want to use. I have looked at the the Open Flash Chart website and cannot find an example with links.

 

Regards,

Mark P ashworth (info@connext.co.za)

 

Feysal Rujbally replied on Thu, 2010/01/21 - 2:15am

Hi,

Am using the connext-graph plugin in struts 2. But, I want to create a scattered graph. How do I do this? I need this on my project.

 

Regards

Neil O Connor replied on Fri, 2010/01/29 - 9:03am

Hi Mark,

I have the same question as the one posted above about adding links to bars. Here's a link to the open flash chart page where they do it

http://teethgrinder.co.uk/open-flash-chart/gallery-bar-8.php

They use a different method to add data to the chart

 

$bar->add( 10, "javascript:alert('Hello World')" );

 

Hope you can add this functionality to connext-graphs, or describe how this might be achieved with the current version.

Neil

 

Rajesh Kumar replied on Wed, 2010/04/07 - 4:48am

I'm considering OFC for one of new projects.  Can someone let me know if its possible to add labels to Bars in the chart?  We have tool tips, but I haven't seen labels on top of bars.

Thanks!

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.