JSFeeds: fusioncharts.com - Charting In Spring Framework

Tuesday, 31 October, 2017 UTC

Charting In Spring Framework – All You Need To Know

Summary

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.

Requirements:

Before we start:

Creating and Configuring the Application

Open the Netbeans IDE.
From the File menu, select New Project. The New Project dialog box opens.
From the Categories box, select Java Web. From the Projects box, select Web Application. Click Next. The New Web Application dialog box opens.
In the Project Name field, add the project name, as shown in the image below, and click Next.
From the Server drop-down box, select the server, as shown in the image below, and click Next.
From the Select the frameworks you want to use in your web application checkbox, select Spring Web MVC.
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{
    @Override
    public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        return new ModelAndView("/WEB-INF/jsp/index.jsp");
    }
    
     public String chartmaker(){
        FusionCharts angularChart= new FusionCharts(
            "angulargauge",// chartType
            "chart1",// chartId
            "450","270",// chartWidth, chartHeight
            "chart",// chartContainer
            "json",// dataFormat
            "{\"chart\": {\"caption\": \"Customer Satisfaction Score\", \"animation\":\"1\", \"showtooltip\":\"1\",\"subcaption\": \"Los Angeles Topanga\", \"lowerlimit\": \"0\", \"upperlimit\": \"100\", \"lowerlimitdisplay\": \"Bad\", \"upperlimitdisplay\": \"Good\", \"numbersuffix\": \"%\", \"tickvaluedistance\": \"10\",\"gaugeinnerradius\": \"0\", \"bgcolor\": \"FFFFFF\", \"pivotfillcolor\": \"333333\", \"pivotradius\": \"8\", \"pivotfillmix\": \"333333, 333333\",\"theme\":\"fint\", \"pivotfilltype\": \"radial\", \"pivotfillratio\": \"0,100\", \"showtickvalues\": \"1\", \"majorTMThickness\": \"2\", \"majorTMHeight\": \"15\", \"minorTMHeight\": \"3\", \"showborder\": \"0\", \"plottooltext\": \"<div>Average Score : <b>$value%</b></div>\", }, \"colorrange\": {\"color\": [{\"minvalue\": \"0\", \"maxvalue\": \"50\", \"code\": \"e44a00\"}, {\"minvalue\": \"50\", \"maxvalue\": \"75\", \"code\": \"f8bd19\"}, {\"minvalue\": \"75\", \"maxvalue\": \"100\", \"code\": \"6baa01\"}] }, \"dials\": {\"dial\": [{\"value\": \"84\", \"rearextension\": \"15\", \"radius\": \"100\", \"bgcolor\": \"333333\", \"bordercolor\": \"333333\", \"basewidth\": \"8\"}] } }"
            );
            
        
        return angularChart.render();
    }
    
}

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>
<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>
        <script src="fusioncharts.widgets.js"></script>
        
    </head>
    <body>
         <div id="chart"></div>
        <%
           
         chartscontroller a= new chartscontroller();
         out.println(a.chartmaker());
         %>
         
 </body>
</html>

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:

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.

The post Charting In Spring Framework – All You Need To Know appeared first on FusionBrew - The FusionCharts Blog.

... more @ fusioncharts.com

fusioncharts.com