Categories: Tutorials

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.

Table of Contents

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:

FusionCharts Suite XT [Download Link]
FusionCharts JSP Wrapper [Download Link]

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

package fusioncharts;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean(name = "fusioncharts")
@RequestScoped
public class bean{
   
    public static String createfusioncharts(){
     FusionCharts area2dChart = new FusionCharts(
                    "area2d",// chartType
                    "myFirstChart",// chartId
                    "600","400",// chartWidth, chartHeight
                    "chart",// chartContainer
                    "json",// dataFormat
                    "{\"chart\": {\"caption\": \"Sales of Liquor\",\"subCaption\": \"Last week\", \"xAxisName\": \"Day\",  \"yAxisName\": \"Sales (In USD)\",\"numberPrefix\": \"$\",\"paletteColors\": \"#0075c2\",  \"bgColor\": \"#ffffff\",\"showBorder\": \"0\",\"showCanvasBorder\": \"0\",\"plotBorderAlpha\": \"10\",\"usePlotGradientColor\": \"0\",\"plotFillAlpha\": \"50\",\"showXAxisLine\": \"1\",\"axisLineAlpha\": \"25\",\"divLineAlpha\": \"10\", \"showValues\": \"1\",\"showAlternateHGridColor\": \"0\",    \"captionFontSize\": \" 14\",    \"subcaptionFontSize\": \"14\",    \"subcaptionFontBold\": \"0\",    \"toolTipColor\": \"#ffffff\",    \"toolTipBorderThickness\": \"0\",    \"toolTipBgColor\": \"#000000\",    \" toolTipBgAlpha\": \"80\",    \"toolTipBorderRadius\": \"2\",    \"toolTipPadding\": \"5\" },\"data\":[{\"label\":\"Mon\",\"value\":\"5123\"},{\"label\": \"Tue\",\"value\": \"4633\"}, {\"label\": \"Wed\",\"value\": \"5507\" }, {\"label\": \"Thu\",\"value\": \"4910\"}, {\"label\": \"Fri\",\"value\": \"5529\"}, {\"label\": \"Sat\",\"value\": \"5803\"}, {\"label\": \"Sun\",\"value\": \"6202\" }]}"
                );
     
     String data = area2dChart.render();
       return data;      
    }
}

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

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="https://www.w3.org/1999/xhtml"
      xmlns:h="https://xmlns.jcp.org/jsf/html"
      xmlns:jsf="https://xmlns.jcp.org/jsf"
     >
    <h:head>
         <title>Loading Data from a Static JSON String - fusioncharts.com</title>
 
 <h:outputScript name="fusioncharts.js" library="js"/>
  <h:outputScript name="fusioncharts.charts.js" library="js"/>
    </h:head>
    <h:body>
    <div id="chart"></div>
    
<h:outputText value="#{fusioncharts.createfusioncharts()}" escape="false"/>
 
    </h:body>
</html>

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:

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 FusionCharts.java was loaded. Also, check if the path to fusioncharts.js and FusionCharts.java file is correct, and whether the file exists in that location.

Dishank Tiwari and Ayan Bhadury