|
Server : Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 DAV/2 PHP/5.2.17 System : Linux localhost 2.6.18-419.el5 #1 SMP Fri Feb 24 22:47:42 UTC 2017 x86_64 User : nobody ( 99) PHP Version : 5.2.17 Disable Function : NONE Directory : /home/queenjbs/www/FusionChart/Contents/Code/J2EE/ |
Upload File : |
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Using FusionCharts XT with JSP > Charting Data from
Forms
</title>
<link rel="stylesheet" href="../../assets/ui/css/style.css" type="text/css" />
<script type="text/javascript" src="../../assets/prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="../../assets/prettify/prettify.css" />
<script type="text/javascript" src="../../assets/ui/js/jquery.min.js" ></script>
<style type="text/css">
<!--
div.WebHelpPopupMenu { position:absolute;
left:0px;
top:0px;
z-index:4;
visibility:hidden; }
a.whtbtnhide, a.whtbtnshow, a.whtbtnhidenav , a.whtbtnshownav { border-bottom:none !important; }
-->
</style>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whmsg.js"></script>
<script type="text/javascript" language="javascript" src="../../assets/ui/js/whver.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whproxy.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whutils.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whlang.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whtopic.js"></script>
<script type="text/javascript" src="../../assets/ui/js/lib.js"></script>
</head>
<body>
<!-- breadcrumb starts here -->
<div id="breadcrumb"></div>
<script type="text/javascript">
document.write( addFCBreadcrumb( [ "Home|../../Introduction/Overview.html", "Guide for web developers", "Using with J2EE|JSP_GettingStarted.html", "Using with data in forms" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Charting Data from
Forms </td>
</tr>
<tr>
<td valign="top" class="text">
<p>In this section, we will show you how to use FusionCharts XT with JSP to plot
data collected in forms. </p>
<p>We will 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 will acquire this data and plot in on a chart. For the sake of simplicity, we will not process anything on this data. However, your real life applications might process data before presenting it on the chart. </p>
<p><strong>Before you go further with this page, we recommend you to please see the previous section, <a href="JSP_BasicExample.html">Basic Examples</a>, as we start off from concepts explained in that page. </strong></p>
<p class="highlightBlock">The code examples contained in this
page are present in<span class="codeInline"> Download Package > Code
> J2EE</span> > <span class="codeInline">FormBased</span> folder.</p> </td>
</tr>
<tr>
<td valign="top" class="header">Building the Form </td>
</tr>
<tr>
<td valign="top" class="text"><p>The form is contained in <span class="codeInline">Default.jsp</span>
and looks as under:</p> </td>
</tr>
<tr>
<td valign="top" class="text"><img src="../../guide-for-web-developers/Images/Code_Form.gif" width="445" height="387" class="imageBorder" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>It's a very simple form which submits to <span class="codeInline">Chart.jsp</span>.
You can also use java server faces to create such form. Here, we have used plain HTML in our page. We are not going into the code of the form, you can directly open the source from download and see it.</p> </td>
</tr>
<tr>
<td valign="top" class="header">Requesting the Data and Creating the Chart </td>
</tr>
<tr>
<td valign="top" class="text"><p>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 <span class="codeInline">Chart.jsp</span>,
present in the same folder. It contains the following code:</p> </td>
</tr>
<tr>
<td valign="top" class="text"><pre class="code_container prettyprint"><%@ 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" %>
<strong><jsp:useBean id="restaurantBean" class="com.fusioncharts.sampledata.RestaurantBean"/>
<c:set var="folderPath" value="../../FusionCharts/"/></strong>
<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."/>
<strong><c:set var="jsPath" value="${folderPath}" scope="request"/></strong>
<strong><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}"/></strong>
<tags:template2>
<strong><fc:render chartId="${restaurantBean.chartId}" swfFilename="${folderPath}${restaurantBean.filename}"
width="${restaurantBean.width}" height="${restaurantBean.height}"
xmlData="${restaurantBean.xml}" /></strong>
<br/>
<a href='javascript:history.go(-1);'>Enter data again</a> <br/><br/>
</tags:template2></pre></td> </tr>
<tr>
<td valign="top" class="text"><p>As you can see in the above code, we are doing the following:</p>
<ul>
<li>Included the path to the folder containing the <span class="codeInline">javascript</span> files, which are required when using the JavaScript method.</li>
<li>Requesting data from the submitted form and setting it in the bean. (<span class="codeInline">c:set</span> tags) </li>
<li>Getting the XML from RestaurantBean for the chart.</li>
<li>Rendering a Pie 3D chart by using the fc:render tag and passing the XML as attribute.</li>
</ul>
<p>The actual XML is constructed in <span class="codeInline">RestaurantBean</span> as shown below:</p>
<pre class="code_container prettyprint"><span class="codeComment">//Initialize <chart> element</span>
xml = "<chart caption='Sales by Product Category' subCaption='For this week'
showPercentValues='0' pieSliceDepth='30' showBorder='1'>";
<span class="codeComment">//Add all data</span>
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 + "' />";
<span class="codeComment">//Close <chart> element</span>
xml += "</chart>"; </pre>
<p>Here, <span class="codeInline">soups, salads, sandwiches, beverages</span> and <span class="codeInline">desserts</span> are names of the bean class members whose values are set using <span class="codeInline">c:set </span>tags in <span class="codeInline">Chart.jsp</span>. </p>
<p>When you finally run the code, you will see a chart as under: </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="../../guide-for-web-developers/Images/Code_FormChart.jpg" width="468" height="268" class="imageBorder" /></td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Charting data from Array|JSP_Array.html","Plotting from database|JSP_DB.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>