Using FusionCharts with JSP > Getting Started |
FusionCharts can effectively be used with JSP to plot dynamic data-driven charts. In this page, we will discuss,
How to setup FusionCharts in J2EE environment. The following are the steps for setting up FusionCharts in J2EE environment:
Please note that the FusionCharts JSP Tag Library (fctl.jar) depends on FusionCharts Helper classes (fchelper.jar). (so always include fchelper.jar in classpath) How to embed FusionCharts in your existing web application 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 in your jsp:
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 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. |