Loading
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:
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="../scripts/fusioncharts.js"></script>
</head>
<body>
<div id="chart"></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.
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.
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 area2dChart = new FusionCharts(
"Area2D", // type of chart
"myFirstChart", // unique chart ID
"500","300", // width and height of the chart
"chart", // div ID of the chart container
"json", // data format
"{ //data source (the chart data)
\"chart\": {
\"caption\": \"Sales of Liquor\",
\"subCaption\": \"Last week\",
\"xAxisName\": \"Day\",
\"yAxisName\": \"Sales\",
\"numberPrefix\": \"$\",
\"paletteColors\": \"#0075c2\",
\"bgColor\": \"#ffffff\",
\"showBorder\": \"0\",
\"showCanvasBorder\": \"0\",
\"plotBorderAlpha\": \"10\",
\"usePlotGradientColor\": \"0\",
\"plotFillAlpha\": \"50\",
\"showXAxisLine\": \"1\",
\"axisLineAlpha\": \"25\",
\"divLineAlpha\": \"10\",
\"showValues\": \"1\",
\"showAlternateHGridColor\": \"0\",
\"captionFontSize\": \" 14\",
\"subcaptionFontSize\": \"14\",
\"subcaptionFontBold\": \"0\",
\"toolTipColor\": \"#ffffff\",
\"toolTipBorderThickness\": \"0\",
\"toolTipBgColor\": \"#000000\",
\" toolTipBgAlpha\": \"80\",
\"toolTipBorderRadius\": \"2\",
\"toolTipPadding\": \"5\"
},
\"data\": [{
\"label\": \" Mon\",
\" value\": \"4123\"
}, {
\"label\": \"Tue\",
\"value\": \"4633\"
}, {
\"label\": \"Wed\",
\"value\": \"5507\"
}, {
\"label\": \"Thu\",
\"value\": \"4910\"
}, {
\"label\": \"Fri\",
\"value\": \"5529\"
}, {
\"label\": \"Sat\",
\"value\": \"5803\"
}, {
\"label\": \"Sun\",
\"value\": \"6202\"
}]
}"
);
%>
Step 5:
Render the chart.