|
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/FirstChart/ |
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>Charting Data from HTML 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", "Creating your first chart|FirstChart.html", "Creating charts using data from Forms" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Charting Data from HTML Forms </td>
</tr>
<tr>
<td valign="top" class="text"><p>In this page, we will show you how to use data from HTML Forms and render a chart using that data. </p>
<p>We will build a simple restaurant sales example, where one will enter the items sold by a restaurant in a day. We will acquire this data and plot it on a chart. For the sake of simplicity, we will not do any validation on this data. However, your real life applications might process data before presenting it on the chart.</p>
<p class="highlightBlock">The code examples contained in this page are present in<span class="codeInline"> Download Package > Code > MyFirstChart</span> > <span class="codeInline">FormBased.html</span></p></td>
</tr>
<tr>
<td class="text"> The application will look as under:
<div style="height: 25px; line-height: 25px;"></div>
<img src="Images/FormBasedChart.jpg"/>
<p>See it <a href="../../Code/MyFirstChart/FormBased.html" target="_blank">live</a>!</p></td>
</tr>
<tr>
<td class="text">The user can put values in the input boxes for the food items and click "Chart it!". This button will generate the chart with the latest data provided in the input boxes.
<p>The code for the above application is given below:</p></td>
</tr>
<tr>
<td class="text" valign="top" width="500"><pre class="code_container prettyprint lang-xml" ><html>
<head>
<title>FusionCharts XT - Form Based Data Charting Example</title>
<script type="text/javascript" src="../../Charts/FusionCharts.js"></script>
</head>
<body>
<input type='text' size='5' id='soups' value='108'/> <span>bowls</span>
<input type='text' size='5' id='salads' value='162'/> <span>plates</span>
<input type='text' size='5' id='sandwiches' value='360'/> <span>pieces</span>
<input type='text' size='5' id='beverages' value='171'/> <span>cans</span>
<input type='text' size='5' id='deserts' value='99'/> <span>plates</span>
<input name="button" type='button' value='Chart it!' onclick="chartIt();" />
<div id="chartContainer">FusionCharts XT will load here</div>
<script type="text/javascript">
function chartIt()
{
// retrieving Form data
var soupSales = document.getElementById("soups").value;
var saladsSales = document.getElementById("salads").value;
var sandwichesSales = document.getElementById("sandwiches").value;
var beveragesSales = document.getElementById("beverages").value;
var desertsSales = document.getElementById("deserts").value;
// creating chart data from Form data
var chartXMLData = "";
chartXMLData += "<chart caption='Restaurant Sales' subCaption='for one day' >";
chartXMLData += "<set label='Soups' value='" + soupSales + "' />";
chartXMLData += "<set label='Salads' value='" + saladsSales + "' />";
chartXMLData += "<set label='Sandwiches' value='" + sandwichesSales + "' />";
chartXMLData += "<set label='Beverages' value='" + beveragesSales + "' />";
chartXMLData += "<set label='Deserts' value='" + desertsSales + "' />";
chartXMLData += "</chart>";
//rendering the chart
var myChart = new FusionCharts( "../../Charts/Pie3D.swf", "myChartId", "400", "300", "0" );
myChart.setXMLData( chartXMLData );
myChart.render( "chartContainer" );
}
</script>
</body>
</html>
</pre>
<br/>
See it <a href="../../Code/MyFirstChart/FormBased.html" target="_blank">live</a>!</td>
</tr>
<tr>
<td class="text"> </td>
</tr>
<tr>
<td class="text">Let's analyze the steps involved in the following code:<br/>
<br/>
<ul>
<li>We have included the JavaScript class file <span class="codeInline">FusionCharts.js</span> </li>
<li>We have created five text input boxes for five products</li>
<li>We have set each text input box with an <span class="codeInline">id</span> which can be used to refer to its value<br />
<br/>
<pre class="code_container prettyprint"><input type='text' size='5' id='soups' value='108'/> <span>bowls</span>
<input type='text' size='5' id='salads' value='162'/> <span>plates</span>
<input type='text' size='5' id='sandwiches' value='360'/> <span>pieces</span>
<input type='text' size='5' id='beverages' value='171'/> <span>cans</span>
<input type='text' size='5' id='deserts' value='99'/> <span>plates</span></pre>
<br/>
</li>
<li>A button is placed below the text input boxes to call a JavaScript function - <span class="codeInline">chartIt()</span> when clicked <br />
<br />
<pre class="code_container prettyprint"> <input name="button" type='button' value='Chart it!' onclick="chartIt();" /></pre>
<br />
</li>
<li>The function first retrieves all the values from the text input boxes<br/>
<br/>
<pre class="code_container prettyprint">var soupSales = document.getElementById("soups").value;
var saladsSales = document.getElementById("salads").value;
var sandwichesSales = document.getElementById("sandwiches").value;
var beveragesSales = document.getElementById("beverages").value;
var desertsSales = document.getElementById("deserts").value;</pre>
<br/>
</li>
<li>It creates an XML string for the chart with all the retrieved values<br/>
<br/>
<pre class="code_container prettyprint">var chartXMLData = "";
chartXMLData += "<chart caption='Restaurant Sales' subCaption='for one day' >";
chartXMLData += "<set label='Soups' value='" + soupSales + "' />";
chartXMLData += "<set label='Salads' value='" + saladsSales + "' />";
chartXMLData += "<set label='Sandwiches' value='" + sandwichesSales + "' />";
chartXMLData += "<set label='Beverages' value='" + beveragesSales + "' />";
chartXMLData += "<set label='Deserts' value='" + desertsSales + "' />";
chartXMLData += "</chart>";</pre>
<br/>
</li>
<li>It renders a pie chart and passes the XML string to the chart<br/>
<br/>
<pre class="code_container prettyprint">var myChart = new FusionCharts( "../../Charts/Pie3D.swf", "myChartId", "400", "300", "0" );
myChart.setXMLData( chartXMLData );
myChart.render( "chartContainer" );</pre>
<br/>
</li>
</ul></td>
</tr>
<tr>
<td class="highlightBlock">Note : This is a very basic JavaScript example to showcase the use of Form data in charts. Hence, we have kept the code as simple as possible. It can always be optimized and shortened as per your needs. </td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Creating multiple charts in a page|MultipleCharts.html","Using HTML embedded method|HtmlEmbed.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>