Site icon FusionBrew – The FusionCharts Blog

Implementing FusionCharts with the Struts 2 Framework

  • Nikita Jhanglani and Ayan Bhadury
    • 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!

    Requirements

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

    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:
    Exit mobile version