JavaScript Charts in JSP

Add interactive charts to your application using JSP charts plugin for FusionCharts.

Most of the JSP charting libraries available in the market use server-side code to generate static images of charts and gauges. But why stick to static images when you can have interactive charts? You can use this JSP Charts plugin along with our core library to build interactive graphs and charts for your applications. You can choose from any of the 90+ charts and 1000+ maps and add them to your application using JSP code.

Download Wrapper View it on Github

Select Chart Types

Features

  • 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.
  • Allows you to load data from MySQL database into charts.
  • Multiple ways to add data - JSON and XML.
  • Works seamlessly across PCs (including IE6/7/8), Macs, iPads, iPhones, and Android devices.

Community

Support

Simply open up a github issue with your question/bug report/suggestion.

Along with JSP plugin, you will also need FusionCharts core JavaScript files which you can get from download page. Download FusionCharts JavaScript Files

QuickStart

Step 1: Include FusionCharts libraries

In your HTML, include fusioncharts.js and themes/fusioncharts.theme.ocean.js after all other scripts:

<script type="text/javascript" src="/path/to/fusioncharts.js"></script>
<script type="text/javascript" src="/path/to/themes/fusioncharts.theme.ocean.js"></script>

Step 2: Include FusionCharts JSP wrapper in your page

In the page, import fusioncharts.FusionCharts

Step 3: Render the chart by providing required data in constructor parameter

In your code, find the section where you wish to add the chart and provide data to the FusionCharts constructor.

// Syntax for the constructor - new FusionCharts("type of chart", "unique chart id", "width of chart", "height of chart", "div id to render the chart", "type of data", "actual data")
  FusionCharts column2DChart= new FusionCharts(
      "column2d",// chartType
      "chart1",// chartId
      "600", //   chartWidth
      "400",//    chartHeight
      "chart",//  chartContainer
      "json",//   dataFormat
      "{\"chart\": {\"caption\": \"Harry\'s SuperMart\",\"subCaption\": \"Top 5 stores in last month by revenue\",\"numberPrefix\": \"$\",\"theme\": \"ocean\"},\"data\": [{\"label\": \"Bakersfield Central\",\"value\": \"880000\"}, {\"label\": \"Garden Groove harbour\",\"value\": \"730000\"}, {\"label\": \"Los Angeles Topanga\",\"value\": \"590000\"}, {\"label\": \"Compton-Rancho Dom\",\"value\": \"520000\"}, {\"label\": \"Daly City Serramonte\",\"value\": \"330000\"}]}"
  );

Step 4: Render FusionCharts

In the previous code, we are populating the FusionCharts constructor with data and chart properties.

It's time to render it.

// Render the chart
column2DChart.render();

And your chart should display when you load the page.

Licensing

JSP-FusionCharts is open-source and distributed under the terms of the MIT/X11 License. You will still need to download and include FusionCharts in your page. This project provides no direct functionality. You can Download an evaluation. You will still need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is free for non-commercial and personal use) .