Fusion Charts Documentation

Fusion Charts Documentation

Version 1.0

Author: David Lai

Contents

Introduction to Fusion Charts

Background

Creating your first chart

Fusion Charts and Java

Location of important files

Steps to build a Fusion Chart in Java

Create FusionGraph

Series

ChartFactory

Using the helper chartBuilder.jsp

Introduction to Fusion Charts

Background

FusionCharts is a flash charting component that can be used to render data-driven animated charts. Made in Adobe Flash 8 (formerly Macromedia Flash), FusionCharts can be used with any web scripting language like HTML, .NET, ASP, JSP, PHP, ColdFusion etc., to deliver interactive and powerful charts. Using XML as its data interface, FusionCharts makes full use of fluid beauty of Flash to create compact, interactive and visually-arresting charts.

Creating your first chart

To become aquanted with Fusion Charts, you will want to create your own data xml and generate the Fusion Chart from your html page. A simple step by step process can be followed on the FusionCharts Documentation found at ( After creating your first chart, you should try experimenting with the different chart properties and chart types using the Chart XML API (also on the FusionCharts documentation) as your guide.

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

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 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.