Categories: Tutorials

Implementing FusionCharts with the Struts 2 Framework

Apache Struts 2, earlier known as WebWork 2, is an extensible framework that allows developers to create enterprise-ready Java-based web applications. The Struts 2 framework has been designed in a way that helps to streamline the complete application development cycle—starting from building the application to deploying it to maintaining it over time. FusionCharts Suite XT is a JavaScript charting library that comprises of a large variety of JavaScript charts that use simple XML and JSON formats to feed data for creating graphs that you can use in your demos. The suite also comes with the capability to be coupled with several other frameworks for ease of development. In this tutorial, we will be looking at implementing FusionCharts with one such framework—the Struts 2 framework. So let’s get started!

Table of Contents

Requirements

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

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

Creating the Application and Configuration

Step 1

Create a new web application project with the Struts2 framework.

Step 2

Create a java class that will act as a controller in the framework. The output of this will be an entire FusionCharts string that will be called in the jsp page (or the view). On running this string, the chart will be rendered. Note : Include the FusionCharts.java file in the same folder in which you have created the above Java class. If you have placed the FusionCharts java wrapper inside a different package, import it into the folder with the Java class.

package fusioncharts;
 
/**
 *
 * @author fusioncharts
 */import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.interceptor.ServletResponseAware;
import com.opensymphony.xwork2.ActionSupport;
 
public class action extends ActionSupport implements
  ServletRequestAware, ServletResponseAware{
    
    private static final long serialVersionUID = 1L;
 
 private HttpServletRequest request;
 
 private HttpServletResponse response;
 
    /**
     *
     * @return
     */    public String chartmaker(){
        FusionCharts columnChart= new FusionCharts(
            "column2d",// chartType
            "chart1",// chartId
            "550","350",// chartWidth, chartHeight
            "chart",// chartContainer
            "json",// dataFormat
            "{\"chart\": {\"caption\": \"Harry\'s SuperMart - Top 5 Stores' Revenue\", \"subCaption\": \"Last Year\", \"numberPrefix\": \"$\", \"rotatevalues\": \"0\", \"plotToolText\": \"$label
Sales : $$value\", \"theme\": \"fint\"}, \"data\": [{\"label\": \"Bakersfield Central\", \"value\": \"880000\"}, {\"label\": \"Garden Groove harbour\", \"value\": \"730000\"}, {\"label\": \"Los Angeles Topanga\", \"value\": \"590000\"}, {\"label\": \"Compton-Rancho Dom\", \"value\": \"520000\"}, {\"label\": \"Daly City Serramonte\", \"value\": \"330000\"}] }"
           
            );
        
        return columnChart.render();
    }
    
    @Override
    public void setServletRequest(HttpServletRequest request) {
  this.request = request;
 }
 
    /**
     *
     * @param response
     */    @Override
 public void setServletResponse(HttpServletResponse response) {
  this.response = response;
 }
}

Step 3

Create a JSP page that will act as the view. The chart will render in the browser on executing this JSP page.


<%@page import="fusioncharts.action"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="fusioncharts.FusionCharts" %>
<!DOCTYPE html>
<html>
    <head>
        <title>FusionCharts || www.fusioncharts.com</title>
        <script src="fusioncharts.js"></script>
        <script src="fusioncharts.charts.js"></script>
        <script src="fusioncharts.theme.fint.js"></script>
        
    </head>
    <body>
         <div id="chart"></div>
        <%
           
         action a= new action();
         out.println(a.chartmaker());
         %>
         
 </body>
</html>

Note : Import the Fusioncharts wrapper in the JSP page and also include the FusionCharts JS library files in the page.

Viewing the Chart

Now, all you need to do is simply run the .jsp file to render the chart. Your output should look like the chart 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 the fusioncharts.js and the FusionCharts.java files is correct, and whether the files exist in that location.

Nikita Jhanglani and Ayan Bhadury