Spring is a well-established framework with features that help developers focus on the actual code of their application, instead of worrying about setting up the configuration files, the mapping, and other infrastructure details.

FusionCharts Suite XT offers a set of JavaScript charts that use simple XML and JSON formats to feed data to the charts. In addition, the charts in the package can also be created using the Spring framework.

In this tutorial, we will be creating a chart from the FusionCharts package using the Spring framework.


Before we start:

Creating and Configuring the Application

  1. Open the Netbeans IDE.
  2. From the File menu, select New Project. The New Project dialog box opens.
  3. From the Categories box, select Java Web. From the Projects box, select Web Application. Click Next. The New Web Application dialog box opens.
  4. In the Project Name field, add the project name, as shown in the image below, and click Next.
  5. From the Server drop-down box, select the server, as shown in the image below, and click Next.
  6. From the Select the frameworks you want to use in your web application checkbox, select Spring Web MVC.
  7. Click Finish.

Your project has been created and configured.

Creating the Chart Object And Rendering the Chart

Now that the project has been created and configured, let’s take a look at the procedure to render the chart.

Step 1
Create a Java class that will act as the 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). The chart will render when this string is executed in the browser.

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 JSP wrapper inside a different package, import it into the folder with the Java class.

To create the Java class, create a controller file and name it chartscontrollers.java. Copy the following code and paste it in the controller file:

package fusioncharts;

 * @author fusioncharts

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.Controller;

public class chartscontroller implements Controller{
    public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        return new ModelAndView("/WEB-INF/jsp/index.jsp");
     public String chartmaker(){
        FusionCharts lineChart= new FusionCharts(
            "line",// chartType
            "chart1",// chartId
            "600","350",// chartWidth, chartHeight
            "chart",// chartContainer
            "jsonurl",// dataFormat
        return lineChart.render();


      "chart": {
        "caption": "Top Paying Programming Languages in the US",
        "theme": "fint",
        "xAxisName": "Programming Languages",
        "yAxisName": "Revenues (In USD)",
        "numberPrefix": "$",
        "paletteColors": "#25BCD1",
        "bgColor": "#ffffff",
        "borderAlpha": "20",
        "canvasBorderAlpha": "0",
        "usePlotGradientColor": "0",
        "plotBorderAlpha": "10",
        "placevaluesInside": "1",
        "rotatevalues": "1",
        "rotateLabels": "1",
        "valueFontColor": "#00000",
        "showXAxisLine": "1",
        "xAxisLineColor": "#999999",
         "yAxisLineColor": "#999999",
        "divLinealpha": "0",
        "yaxisminvalue": "80000",
      "data": [{
        "label": "Go",
        "value": "110000"
      }, {
        "label": "Scala",
        "value": "110000"
      }, {
        "label": "Objective-C",
        "value": "109000"
      }, {
        "label": "CoffeeScript",
        "value": "105000"
      }, {
        "label": "Perl",
        "value": "105000"
      }, {
        "label": "C++",
        "value": "100890"
      }, {
        "label": "R",
        "value": "100000"
      }, {
        "label": "Swift",
        "value": "100000"
      }, {
        "label": "TypeScript",
        "value": "100000"
      }, {
        "label": "Python",
        "value": "99000"

Step 2
Create a JSP page and name it index.jsp. This page that will act as the view. On running, this will render the chart in the browser.
Copy the following code and paste it in the index.jsp file:

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


Note: Ensure that you import the Fusioncharts wrapper in the JSP page and also include the FusionCharts JS library files in the page.

Rendering the Chart

To render the chart, all you need to do is execute the redirect.jsp page that is automatically created by the framework at the time of creation and saved in the Web pages folder. This file will initiate the server and invoke the index.jsp file to run on the browser.

Your output should look like the chart shown in the image below:

spring framework charts

That’s it! You’ve now created a Fusioncharts chart using the Spring framework.

If your output does not render as expected or if you have trouble with the configuration files, you can download the sample created for this tutorial from here and import it to your system.

Take your data visualization to a whole new level

From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

Explore FusionCharts

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Your next great dashboard starts here

With our interactive and responsive charts, extensive documentation, consistent API, and cross-browser support - delight your customers with kick-ass dashboards