Creating Charts using FusionCharts and JavaServer Faces

FusionCharts Suite XT includes a wide plethora of charts that ease the process of data visualization tremendously. Another plus with this suite is that the JavaScript-based charts use the simple XML and JSON data formats for feeding data.

FusionCharts Suite XT can be also used with a number of server-side and client-side technologies, allowing developers to work with the technology of their choice.

This article introduces another new dimension to using the suite—creating charts from the FusionCharts library using JavaServer Faces.

JavaServer Faces is a Java specification or a framework for building component-based user interfaces for web applications. The Javaserver Faces API is designed to simplify the development of the user interface for a web application. FusionCharts Suite XT can also be rendered in a JSF page using the Java Wrapper.

Let’s now get started with the requirements and the steps for using FusionCharts using JavaServer Faces.

Set Up The Requirements

To get the code (for creating charts) in this blog working, we need to first download the following components on our local machine:

Creating a Basic Chart

By following the steps in this article, we will create an area chart which will showcase the sales of liquor in a store for each day of a week. The sales figures will be plotted along the y-axis and the days will be plotted along the x-axis.

To create a basic chart, we first need to create a chart object. Follow the steps mentioned below and you’ll be done with the creation of chart object.

Step 1: Create a Java class in your project. The created class will return the entire FusionCharts structure that gets rendered in an xhtml page.

Note: Include the file in the same folder where you have created the above java class. If you have placed the FusionCharts java wrapper inside a different package, import it into the Java class.

Step 2: Create an xhtml page that will render the required chart in the browser.

Finally, include the library files. Create a folder, resources under root folder of your local machine. Within the resources folder, create another folder, js. Include the JavaScript files inside the js folder.

The folder structure looks as shown below:

folder structure

Viewing the Chart

Now, as you are done with all the steps needed to render a chart, simply run the .xhtml file to render the chart.

The output looks as shown below:


If you find any difficulty in rendering the chart or you see any error in your code, click here to download the complete source code of the sample project we have created for this tutorial.

Was There a Problem Rendering Charts?

In case something went wrong and you are unable to see the chart, check for the following:

  • The chart ID should be unique for all charts rendered on the same page. Otherwise, it will result in a JavaScript error.
  • If the chart does not show up at all, check if the fusioncharts.js and fusioncharts wrapper was loaded. Also, check if the path to fusioncharts.js and file is correct, and whether the file exists in that location.

Leave a Comment