Introduction to the FusionCharts JSP Wrapper

FusionCharts JSP Wrapper can be downloaded from here.

FusionCharts Suite XT includes the FusionCharts JSP wrapper that lets you create interactive, data-driven charts without writing any JavaScript code.

JavaScript and HTML code is used to generate charts in the browsers. The server-side JSP wrapper generates the required JavaScript and HTML code as a string, which is then used to render charts on a browser page.

In this section, you will be shown how you can create a simple chart using the FusionCharts server-side JSP wrapper.

We will create a simple column 2D chart that plots the monthly revenue for the last year at Harry’s SuperMart. The data for the chart is shown in the table below:

Month	Revenue (In USD)
Jan	420000
Feb	810000
Mar	720000
Apr	550000
May	910000
Jun	510000
Jul	680000
Aug	620000
Sep	610000
Oct	490000
Nov	900000
Dec	730000

The rendered column 2D chart will look like this:

FusionCharts will load here..

The data structure to render this chart is explained below:

Step 1:

Include the fusioncharts.js file, as shown in the code snippet below.


<%@page contentType="text/html" pageEncoding="UTF-8"%>
  <!DOCTYPE html>
  <html>
      <head>
         <title>Loading Data from a Static JSON String - fusioncharts.com</title>
         <script src="fusioncharts.js"></script>
      </head>
      <body>
          <div id="chart-container"></div>

This file is needed to render the chart. Ensure that the path to this JS file is correct. Otherwise, it may lead to JavaScript errors. Download FusionCharts from here.

Step 2:

Include the FusionCharts.java file as a package in your project.

Step 3:

Include the package in the file where you want to show FusionCharts.


  <%@page import="fusioncharts.FusionCharts" %>

Step 4:

Create a chart object using the FusionCharts JAVA class constructor. Syntax for the constructor:

FusionCharts("type of chart", "unique chart id", "width of chart", "height of chart", "div id to render the chart", "data format", "data source")


<%
    FusionCharts column2dChart = new FusionCharts(
      // type of chart
      "column2D",        
      // unique chart ID
      "myFirstChart",
      // width and height of the chart    
      "500","300",    
      // div ID of the chart container
      "chart-container",
      // data format        
      "json",    
      // data source        
      "{              
          \"chart\": {  
              \"caption\": \"Monthly revenue for last year\",  
              \"subCaption\": \"Harry's SuperMart\", 
              \"xAxisName\": \"Month\",  
              \"yAxisName\": \"Revenues (In USD)\",    
              \"numberPrefix\": \"$\",   
              \"theme\": \"zune\" 
          },                                   
          \"data\": [{    
              \"label\": \"Jan\",
          \"value\": \"420000\"
      }, {
          \"label\": \"Feb\",
          \"value\": \"810000\"
      }, {
          \"label\": \"Mar\",
          \"value\": \"720000\"
      }, {
          \"label\": \"Apr\",
          \"value\": \"550000\"
      }, {
          \"label\": \"May\",
          \"value\": \"910000\"
      }, {
          \"label\": \"Jun\",
          \"value\": \"510000\"
      }, {
          \"label\": \"Jul\",
          \"value\": \"680000\"
      }, {
          \"label\": \"Aug\",
          \"value\": \"620000\"
      }, {
          \"label\": \"Sep\",
          \"value\": \"610000\"
      }, {
          \"label\": \"Oct\",
          \"value\": \"490000\"
      }, {
          \"label\": \"Nov\",
          \"value\": \"900000\"
      }, {
          \"label\": \"Dec\",
          \"value\": \"730000\"   
          }]  
      }"
  );

%>

Note: Instead of coping the code from the code viewer, use copy to clipboard button to copy the code. The reason we suggest this because in a code viewer, break lines(which is a complete string line) has been used to display the proper method to set the chart cosmetics and how the datasource can be passed as a parameter.

Step 5:

Render the chart.

<html>
  <body>
        <%=column2dChart.render()%>
  </body>
</html>

Final template

The full HTML code for the example looks as under:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
  <!DOCTYPE html>
  <html>
    <head>
        <title>Loading Data from a Static JSON String - fusioncharts.com</title>
        <script src="fusioncharts.js"></script>
    </head>
    <body>
        <div id="chart"></div>
        <%@page import="fusioncharts.FusionCharts" %>
        <%
        FusionCharts columnChart= new FusionCharts(
          // chartType
          "column2d",
          // chartId
          "chart1",
          // chartWidth, chartHeight
          "600","400",
          // chartContainer
          "chart",
          // dataFormat
          "json",
          "{\"chart\": {  \"caption\": \"Monthly revenue for last year\",\"subCaption\": \"Harry’s SuperMart\",\"xAxisName\": \"Month\",\"yAxisName\": \"Revenues (In USD)\",\"numberPrefix\": \"$\",\"theme\": \"zune\"},\"data\": [{\"label\": \"Jan\",\"value\": \"420000\"}, {\"label\": \"Feb\",\"value\": \"810000\"}, {\"label\": \"Mar\",\"value\": \"720000\"}, {\"label\": \"Apr\",\"value\": \"550000\"}, {\"label\": \"May\",\"value\": \"910000\"}, {\"label\": \"Jun\",\"value\": \"510000\"}, {\"label\": \"Jul\",\"value\": \"680000\"}, {\"label\": \"Aug\",\"value\": \"620000\"}, {\"label\": \"Sep\",\"value\": \"610000\"}, {\"label\": \"Oct\",\"value\": \"490000\"}, {\"label\": \"Nov\",\"value\": \"900000\"}, {\"label\": \"Dec\",\"value\": \"730000\"}]}");
        %>
        <%=column2dChart.render()%>
    </body>
  </html>

Was this article helpful to you ?