FusionCharts XT can effectively be used with JSP to plot dynamic data-driven charts. In this page, we will discuss,

• How to setup FusionCharts XT in J2EE environment.
• How to embed FusionCharts XT in your existing web application.

The following are the steps for setting up FusionCharts XT in J2EE environment:

• Place the FusionCharts folder containing all the .swf and .js files within the Web application
• Copy the fchelper.jar, fctl.jar, fcexporter.jar, and fcexporthandler.jar to the classpath of your web server (in Tomcat, {WebAppRoot}/WEB-INF/lib)
• Copy jstl-api.jar, jstl-impl.jar in case you are using JSTL in your JSPs.
• Additionally, copy fcsampleshelper.jar when trying the sample applications provided with the download

In case you are trying the sample application from the download, then all this is already in place for you. Please follow the ReadMe.txt present in Download Package > Code > J2EE folder.

Please note that the FusionCharts JSP Tag Library (fctl.jar) depends on FusionCharts Helper classes (fchelper.jar), (so always include fchelper.jar in classpath).

After you complete the initial setup, all you are left to do is - use the FusionCharts jsp tags to embed the chart in your jsp by providing the necessary attributes to it.

Steps to incorporate FusionCharts XT in your jsp:

1. Three lines of code in jsp (no logic ) to embed the chart.
2. Bean to provide the render data and data source for the chart.

Let's quickly see each of them.

Code in the jsp:

  <%@ taglib uri="http://www.fusioncharts.com/jsp/core" prefix="fc" %> 
  <jsp:useBean id="chartData" class="com.fusioncharts.sampledata.BasicRenderData"/>
  <fc:render chartId="${chartData.chartId}" swfFilename="${folderPath}${chartData.swfFilename}" 
  width="${chartData.width}" height="${chartData.height}" debugMode="false" 
  registerWithJS="false" xmlUrl="${chartData.url}" />          

Code in the bean (com.fusioncharts.sampledata.BasicRenderData) :

  protected String xml;	
  protected String chartId = "basicChart";	
  protected String URL = "Data/Data.xml";	
  protected String width = "600";	
  protected String height = "300";	
  protected String swfFilename = "Column3D.swf";
  // followed by getter and setter methods for the fields

From the above class, you can either use the xml field or the URL field for providing the data in your jsp. If you are using the xml field, then set its value to a valid FusionCharts xml. If you are using the URL field, then place Data.xml in Data folder. A sample xml is shown below:

  <chart caption='Monthly Unit Sales' 
    xAxisName='Month' yAxisName='Units' showValues='0' 
     formatNumberScale='0' showBorder='1'>
      <set label='Jan' value='462' />
      <set label='Feb' value='857' />
      <set label='Mar' value='671' />
      <set label='Apr' value='494' />
      <set label='May' value='761' />
      <set label='Jun' value='960' />
      <set label='Jul' value='629' />
      <set label='Aug' value='622' />
      <set label='Sep' value='376' />
      <set label='Oct' value='494' />
      <set label='Nov' value='761' />
      <set label='Dec' value='960' />
  </chart>

That's all! Integrating FusionCharts XT in JSP is as simple as that. In the coming pages, we will explore the examples present in the download package and see how they can be built.