Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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.

<%=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>
Top