David Lai's Business Intelligence Blog » Fusion Charts

Fusion Charts Wrapper Online Guide

David Lai — Wed, 03 Feb 2010 07:14:37 +0000

Here’s the online guide to the Fusion Charts Wrapper found at http://davidlai101.com/blog/2010/02/02/fusion-charts-java-wrapper-updated/

If you just need the JavaDocs, please go to http://davidlai101.com/fusioncharts-javadoc/

Steps to build a Fusion Chart in Java

Please ensure that you have example.jsp and example_alternative.jsp open in order to follow the steps below to build a fusion graph.

If you haven’t downloaded the full project file please download it here

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

Now to create a series inside the graph:

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

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

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

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

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

//or use <%=pieGraph.getGraphId() %> instead of the string

Note: You must use example_alternative.jsp to see this

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.

Fusion Charts Java Wrapper Updated

David Lai — Tue, 02 Feb 2010 07:02:10 +0000

Fusion Charts Java Wrapper v1.0 released

I’ve updated the fusion charts java wrapper that I released in a previous post, however many people were having problems getting to work, so I’ve changed some stuff around and updated the wrapper with clear instructions on getting it to work for everyone.

The FusionCharts wrapper requires Java 1.5+ in order to run so make sure you have this set in the compile settings.
The package was tested on Eclipse JEE Galileo where you can download at the Eclipse website here
With the Web Tools Platform 3.1.1 addon here
In addition please install Tomcat which can be found here

I’ve released 4 versions that you can download ranging from the full source to just a war file.
Please click on the links to download your desired version
FusionCharts War File (web project)
FusionCharts Full Source (web project)
FusionCharts Jar File
FusionCharts Full Source
Java Docs

Part 1: Installation

I’ll explain how to install each version now.
1. Make sure your compiler is set to Java 1.5 or higher

2. Make sure your buildpath is using a Java runtime of 5.0 or higher

3. If you are using the WAR or the fullsource web project file (make sure you have unzipped it to your workspace), right click on the project explorer and select import either WAR or existing projects into workspace.

If you are using the JAR file, make sure you also import the jar into your WEB-INF lib folder

4. GREAT! now if you want you can try running the examples
Start your tomcat server by right clicking on your project -> run as -> run on server. Then select Tomcat and the location where you installed tomcat.

Finally go to your browser of choice and test out the example_alternative.jsp

For instructions on using the wrapper please click on my next post here
or you can download the user guide here

In addition click here to access the Java Docs

Fusion Charts Java Charting Package

David Lai — Fri, 01 May 2009 03:05:12 +0000

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

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

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

//or use <%=pieGraph.getGraphId() %> instead of the string

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.

Fusion Charts DOM Fix

David Lai — Wed, 29 Apr 2009 03:06:04 +0000

FusionCharts DOM is a JavaScript framework that helps you include FusionCharts in your web applications in a very elegant and easy way. Instead of writing standard Javascript codes or OBJECT/EMBED tags to embed charts, you can use FusionCharts DOM to create a chart by just including <fusioncharts> … </fusioncharts> tags in your HTML code. Configuration of the charts is as simple as providing attributes to this HTML element.

Essentially, FusionCharts DOM is a JavaScript file that you include in your HTML page. Once that is done, the rest is as simple as writing <fusioncharts> HTML tags within your documents. The included javascript does all the hard work of elegantly converting your <fusioncharts> HTML tags into impressive charts

Problem:

The FusionCharts DOM worked great and made it much more user friendly to include charts to a webpage, however when putting multiple charts on a page, only some charts would load.

In a nutshell, the cause of the problem was multiple charts having the same id. This would cause the 2nd chart to overlap the first chart since the 2nd chart has the same id as the 1st chart. So what I did was to ensure that every chart would have a unique id.

I have attached the correct code that you can find here.

FusionChartsDOM.js

For those who are interested in the fix details

So after doing some debugging with the FusionChartsDOM.js I discovered that each chart on the page is a node object, part of an array.

Starting at the Constructor, go to the method _FCD.parseDOM(). In the parseDOM() method, there’s a for loop that processes through all the tags that contain charts. The “processTag(tagObj)” method is where the node properties are set and the problem occurs here.

In the processTag(tagObj) function, look for the part where the newAttributes.chartid is set. It calls a method called _FCDL.uniqueId() and in the uniqueId() method it takes the dateTime as a unique identifier. However, the for loop that processes the tags sometimes goes too fast and because of this we will get the same time value for some node ids.

To fix this, I just added an optional index parameter to the “processTag” function

_FCD.processTag = function(tagObj, idx)

In the section where it declares a new chartid, I just attached the index at the back coming from the parseDOM() forloop to ensure uniqueness.

if(!newAttributes.chartid)
{
if(_FCD.Settings.autochartid)
newAttributes.chartid = _FCDR.idPrefix + _FCDL.uniqueId() + (‘_’+idx);
else // in case autochartid is off, throw an error
{
_FCD.notify(_FCDR.errorNoChartId);
throw _FCDR.errorNoChartId;
}
}

Fusion Charts for dashboarding

David Lai — Sat, 25 Apr 2009 03:06:42 +0000

I’ve been working alot with Fusion Charts lately and found that Fusion Charts is able to produce the Wow factor that most of the other big name dashboarding tools produce.

FusionCharts comes in a free version and a professional version. The free version comes with 18 charts however these charts are quite bland and I would recommend buying a license for the professional version since you are able to control many more aspects in the charts such as gradients, shadows, drilldowns, etc. In addition, the professional package comes with 45 charts.

To get started, you only need to know a simple amount of HTML and how to configure the FusionChart tags on your page. It doesn’t have the drag and drop GUI other tools such as Xcelsius have but for developers that have some programming background, this should be simple.

What I really like about FusionCharts is the amount of flexibility it provides for your application. FusionCharts just provides you with the chart component, so everything else on your application is totally customizable. Unlike other tools that produce a whole dashboard that you embed onto your page, you only need to generate the chart swfs wherever you want it on your application.

When using Xcelsius for example, it is very easy to produce a great looking dashboard quickly. However, embedding it to your existing application and connecting it to data produces problems. If you have an existing j2ee or .net web application, you can just add the code that constructs the data string that a Fusion Chart requires and then place the chart anywhere on the screen.

As of now FusionCharts has plugins for Visual Basic and Dreamweaver if you are interested in dragging and dropping Fusion Charts into your webpage or application.

Please take a look at the following link for an example dashboard produced using FusionCharts.

FusionCharts Demo

Basically for anything not related to charts, you can use whatever you want so this gives developers endless possiblities for choosing the type of dropdown menus, reports, widgets, etc on their application.

Finally, the pricing for Fusion Charts is very attractive. If you just want the charting package, it is only a one time licensing fee of $199 -> $1999 depending on what you intend to use Fusion charts for vs other dashboarding tools which go for $20k+ if you are an independant software vendor.

In conclusion, FusionCharts offers great flexibility and customization on your application, easy to connect data, and the ability to seamlessly embed charts into your application. The only drawback is that FusionCharts is geared towards technical users, but hey you have to be somewhat technical to proficiently use other dashboarding tools as well.