Fusion Charts Java Charting Package

April 30, 2009 by: David Lai

NOTE: Please note that the wrapper has been updated and you can get the latest code at
http://davidlai101.com/blog/2010/02/02/fusion-charts-java-wrapper-updated/

I’ve created a Fusion Charts package that acts as a wrapper for the Java developers out there.

The charting package will help you attach data to your series and construct your graph.
In addition, there is a ChartFactory class which builds the appropriate FusionCharts xml string to use in your jsp page.

Instead of using FusionChartsRenderer.jsp I have created a custom chartBuilder.jsp that takes the graph object created and outputs the string for you.

I’ve also included 2 example jsps utilizing the charting package.

Feel free to edit the code and it would be great if you could share any additional improvements.

You can download the source code, javadoc, and examples below

Source Code and Examples

Download the Fusion Chart Java user guide

User Guide

Online Documentation on using the Java classes can be found in the next page of this post

Fusion Charts and Java

Location of Required Fusion Chart files
There is a mix of Java classes, jsps, javascripts, and chart swf files in order to work with Fusion Charts.

List of Java classes you will need to build Fusion Charts

Package FusionCharts

ChartFactory.java – builds the data string xml and the embeddable DOM tag
ChartType.java – enum that holds values for the type of charts available
Graph.java – Generic Graph class that provides generic members and methods
FusionGraph.java – Extends the Graph class and provides FusionChart specific members and methods
Series.java – Series class that holds each series and all their values

Resources
XMLWriter.jar – helper xml api that helps ChartFactory build the data xml string.

List of jsps needed to build Fusion Charts
chartBuilder.jsp – A helper jsp that I created so that users do not have to put in the redundant code needed by FusionChartsRenderer.jsp and FusionChartsHTMLRenderer.jsp

List of Javascripts needed to build Fusion Charts
FusionCharts.js – required Fusion Charts javascript file that displays your chart
FusionChartsDOM_commented.js – required javascript to use DOM tags
Flash files needed to build Fusion Charts

Steps to build a Fusion Chart in Java
Create FusionGraph
First you will want to create a FusionGraph object and set its properties
To create a FusionGraph object you will need to define a Graph Id, Chart Type which is an enum from ChartType and the size of items in each of it’s series. Let’s start with a simple pie graph example that has 5 slices.

FusionGraph pieGraph = new FusionGraph(“pieGraph”,ChartType.PIE3D,5,request);

Note that the request parameter is required so that we can send the FusionGraph object within jsps.
Now to create a series inside the graph:

Series series = graph.createSeries(“pieSeries”);

Next you may want to set the properties of the graph by giving it a customized look. Please refer to the Chart XML API found in http://www.fusioncharts.com/docs for the properties you can customize.
For example if I wanted to set the background of the graph to a gradient of white and yellow I would do this:

graph.setChartProperties(“bgColor”,”FFFFFF,CCCC33”);

You will also want to set the width and height of the graph by using the setWidth(int) and setHeight(int) methods, or just go with the default which is width=600, height=300.

Series
You will have one or more series containing data.
The series object has a set of member properties that you can set. Please refer to the API for more information.
For the pie graph you will probably want to set the values, and the colors for each pie.
To do this you can use the setColor(int index, String color) and setValue(int index, double value) methods.

ChartFactory
When you are finished creating the graph, you will want to put the graph in a ChartFactory so that the Chart Factory can build the desired xml string for the data. To generate the data for the pie graph, code the following:

ChartFactory chartFactory = new ChartFactory();
chartFactory.insertGraph(pieGraph);
chartFactory.buildFusionChart(“pieGraph”); //or use pieGraph.getGraphId() for the String parameter

New: A new method called “buildDOMFusionChart(String graphName) was created so that we could utilize the FusionChartsDOM_commented.js which allows us to use an html tag to display the fusion chart.
All you need to do is add the following line instead of “chartFactory.buildFusionChart(“pieGraph”)
You would use on the jsp

chartFactory.buildDOMFusionChart(“pieGraph”);

You will need to include in your body tag

<body onload=”setTimeout(‘FusionChartsDOM.RenderAllCharts(true)’,1000)”>

In addition make sure you have the scripts loaded into your jsp if you are using jsp

<SCRIPT LANGUAGE=”Javascript” SRC=”/FusionCharts/FusionCharts.js”></SCRIPT>
<script type=”text/javascript” src=”/FusionCharts/FusionChartsDOM_commented.js”></script>

Using the helper chartBuilder.jsp
The chartBuilder.jsp has built in Javascript that works with FusionCharts.js and renders the chart for you provided that you provide the correct graph parameter. You can either use this method or the buildDOMFusionChart method which is newer.
All you need to do is provide the graphId of the graph you want to display
For example if I wanted to display the pie graph from the earlier examples, I would do this

<jsp:include page=”/tools/chartBuilder.jsp” flush=”true”>
<jsp:param name=”graphId” value=”pieGraph”/>
//or use <%=pieGraph.getGraphId() %> instead of the string
</jsp:include>

Example.jsp and example_alternative.jsp
Please take a look at the example.jsp attached that will help you build a pie graph using the DOM method. Example_alternative.jsp provides an example of building a chart using the chartBuilder.jsp method. The drawback of using the chartBuilder.jsp method is that you make another server call when calling that jsp. So with pages that have many charts, it will be better using the DOM method.

Comments

One Response to “Fusion Charts Java Charting Package”
  1. Rojo says:

    Hi David, I’m trying to implement your code, I’m created a new project, and copy your folders in my project, but I’m can’t generate the pie graph, I don’t find the error.

    Can I send to you my small project, and can you help me with that ?

    Thanks.

    Before of do it, I’ll try to implement your code in pentaho, because this type of graphs like me, because they have a function to print it.

    Actually I’m using open flash in pentaho, but they can’t print.

Leave a Reply


3 × seven =