You are viewing documentation for an older version. For current documentation - click here.
Using FusionCharts with JSP > Charting Data from Forms

In this section, we'll show you how to use FusionCharts with JSP to plot data collected in forms.

We'll build a simple restaurant sales example, where the user will enter the items sold by a restaurant in a given week. This data will be submitted in a form to the server. We'll acquire this data and plot in on a chart. For the sake of simplicity, we wouldn't do any processing on this data. However, your real life applications might process data before presenting it on the chart.

Before you go further with this page, we recommend you to please see the previous section "Basic Examples" as we start off from concepts explained in that page.

The code examples contained in this page are present in Download Package > Code > J2EE > FormBased folder.
 
Building the Form
The form is contained in Default.jsp and looks as under:
It's a very simple form which submits to Chart.jsp. You can also use java server faces to create such form. Here, we have used plain html in our page. As such, we wouldn't go into the code of this form. You can directly open the source from download and see it.
 
Requesting the data and Creating the Chart
The work of requesting the data from submitted form, setting it in the bean which constructs the xml and rendering the chart is done in Chart.jsp, present in the same folder. It contains the following code: 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.fusioncharts.com/jsp/core" prefix="fc" %> 
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<jsp:useBean id="restaurantBean" class="com.fusioncharts.sampledata.RestaurantBean"/>
<c:set var="folderPath" value="../../FusionCharts/"/>
<c:set var="title" value="FusionCharts - Form Based Data Charting Example" scope="request"/>
<c:set var="header1" value="FusionCharts Form-Based Data Example" scope="request"/>
<c:set var="header2" value="Restaurant Sales Chart below" scope="request"/>
<c:set var="intro" value="Click on any pie slice to see slicing effect. Or,
right click on chart and choose 'Enable Rotation', and then drag and
rotate the chart."/>
<c:set var="jsPath" value="${folderPath}" scope="request"/>
<c:set target="${restaurantBean}" property="soups" value="${param.Soups}"/> 
<c:set target="${restaurantBean}" property="salads" value="${param.Salads}"/>
<c:set target="${restaurantBean}" property="sandwiches" value="${param.Sandwiches}"/>
<c:set target="${restaurantBean}" property="beverages" value="${param.Beverages}"/>
<c:set target="${restaurantBean}" property="desserts" value="${param.Desserts}"/>
<tags:template2> 
<fc:render chartId="${restaurantBean.chartId}" swfFilename="${folderPath}${restaurantBean.filename}" 
           width="${restaurantBean.width}" height="${restaurantBean.height}" 
           xmlData="${restaurantBean.xml}" />
<br/>
<a href='javascript:history.go(-1);'>Enter data again</a> <br/><br/>
</tags:template2>

As you can see in the above code, we're doing the following:

  • Included the path to the folder containing the javascript files, which are required when using the JavaScript method.
  • Requesting data from the submitted form and setting it in the bean. (c:set tags)
  • Getting the xml from RestaurantBean for the chart.
  • Rendering a Pie 3D chart by using fc:render tag and passing the xml as attribute.

The actual xml is constructed in RestaurantBean as shown below:

//Initialize <chart> element
xml = "<chart caption='Sales by Product Category' subCaption='For this week' 
showPercentValues='0' pieSliceDepth='30' showBorder='1'>";
//Add all data
xml += "<set label='Soups' value='" + soups + "' />";
xml += "<set label='Salads' value='" + salads + "' />";
xml += "<set label='Sandwiches' value='" + sandwiches + "' />";
xml += "<set label='Beverages' value='" + beverages + "' />";
xml += "<set label='Desserts' value='" + desserts + "' />";
//Close <chart> element
xml += "</chart>";

Here, soups, salads, sandwiches, beverages and desserts are names of the bean class members whose values are set using c:set tags in Chart.jsp.

When you finally run the code, you'll see a chart as under: