Current File : /home/caballoscriollos/www/espanol/encuesta/graphs/contents/js_example.html
<?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>FusionCharts Free Documentation</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>
<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td><h2 class="pageHeader">FusionCharts and JavaScript > Example Application </h2></td>
</tr>
<tr>
<td valign="top" class="text"><p>In this section, we're going to create a simple application to demonstrate the integration of FusionCharts and JavaScript. Our application would be completely built in HTML using HTML, JavaScript and FusionCharts. </p>
<p class="highlightBlock">We recommend that you please go through the previous topics in this section, if you've not already gone through them. This example uses a lot of concepts explained in previous topics. </p>
<p>Our application would look as under once we're done: </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Code_JSEx.jpg" class="imageBorder" /></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="highlightBlock">The code for this application is present in Download Package > Code > JavaScript > ClientSideData folder. </td>
</tr>
<tr>
<td valign="top" class="header"> </td>
</tr>
<tr>
<td valign="top" class="header">Application Description </td>
</tr>
<tr>
<td valign="top" class="text"><p>As you can see in the image above:</p>
<ul>
<li>We're building a chart to compare Quarterly sales of 4 products in a given year. </li>
<li>The user can select which products to compare and the comparison will be reflected on the chart at client side (remember, this application is build purely in HTML and JavaScript - so it does not need any server or server side scripting language). </li>
<li>The data for the entire application is stored in client-side JavaScript arrays, which we'll soon see. </li>
<li>We've also provided a few chart configuration parameters like "Animate Chart" and "Show Values" to enrich end-user experience.</li>
<li>Entire application is run using client side JavaScript functions, which we would soon explore. </li>
</ul>
<p>Before we get to the code of the application, let's first see the process flow. </p></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">Process Flow </td>
</tr>
<tr>
<td valign="top" class="text"><p>The process flow for this application can be enlisted as under: </p>
<ol>
<li>The HTML page loads with pre-defined JavaScript functions, data in JavaScript arrays and the chart object itself.</li>
<li> We build the chart for first time showing data for all the 4 products.</li>
<li>In the HTML code, we present a form to the user where he can select the products for which he wants to see the data.</li>
<li>Now, when the user changes his product selection or changes a chart configuration (also present as HTML form elements), we update the chart XML data depending on product and options selected.</li>
<li>To update the chart and build the XML, we've used various JavaScript functions in the page, like<span class="codeInline"> updateChart()</span>, <span class="codeInline">generateXML()</span>, <span class="codeInline">getProductXML()</span>. </li>
</ol>
<p>Let's now see the code for this application. </p></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">Code </td>
</tr>
<tr>
<td valign="top" class="text">The code for the above application is present in<span class="codeInline"> Chart.html</span> and can be listed as under: </td>
</tr>
<tr>
<td valign="top" class="codeBlock"><p><HTML><br />
<HEAD><br />
<TITLE>FusionCharts - Client Side Chart Plotting</TITLE> <br />
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT><br />
<SCRIPT LANGUAGE="JavaScript"><br />
<span class="codeComment"> //In this example, we'll show you how to plot and update charts on the<br />
//client side. Here, we first store our data (to be plotted) in client side<br />
//JavaScript arrays. This data is hard-coded in this example. However,<br />
//in your applications, you can build this JavaScript arrays with live<br />
//data using server side scripting languages. Or, you can make AJAX calls<br />
//to get this data live.<br />
<br />
//We store all our data in an array data. It contains data for three Products<br />
//for 3 quarters. The first column of each array contains the product Name.<br />
//Thereafter 4 columns contain data for 4 quarters.</span><br />
var data = new Array();<br />
<span class="codeComment"> //Data for each product</span><br />
data[0] = new Array("Product A",659400,465400,764500,650500);<br />
data[1] = new Array("Product B",546300,436500,546500,332500);<br />
data[2] = new Array("Product C",657600,564600,348600,436600);<br />
data[3] = new Array("Product D",436500,765700,453900,326400);<br />
<br />
<span class="codeComment">//the array of colors contains 4 unique Hex coded colours (without #) for the 4 products</span><br />
var colors=new Array("AFD8F8", "F6BD0F", "8BBA00", "FF8E46");</p>
<p> <span class="codeComment"> /**<br />
* updateChart method is called, when user changes any of the checkboxes.<br />
* Here, we generate the XML data again and build the chart. <br />
* @param domId domId of the Chart<br />
*/</span><br />
function updateChart(domId){ <br />
<span class="codeComment">//Update it's XML - set animate Flag from AnimateChart checkbox in form</span><br />
<span class="codeComment">//using updateChartXML method defined in FusionCharts</span> JavaScript class <br />
updateChartXML(domId,generateXML(this.document.productSelector.AnimateChart.checked));
<br />
}<br />
<span class="codeComment">/**<br />
* generateXML method returns the XML data for the chart based on the<br />
* checkboxes which the user has checked.<br />
* @param animate Boolean value indicating to animate the chart.<br />
* @return XML Data for the entire chart.<br />
*/ </span><br />
function generateXML(animate){ <br />
<span class="codeComment"> //Variable to store XML</span><br />
var strXML;<br />
<span class="codeComment"> //<graph> element<br />
//Added animation parameter based on animate parameter <br />
//Added value related attributes if show value is selected by the user<br />
</span>
strXML = "<graph numberPrefix='$' decimalPrecision='0' animation='" + ((animate==true)?"1":"0") + "' " + ((this.document.productSelector.ShowValues.checked==true) ? ("showValues='1' rotateValues='1'"):(" showValues='0' ")) + "yaxismaxvalue='800000'>";<br />
<br />
<span class="codeComment">//Store <categories> and child <category> elements</span><br />
strXML = strXML + "<categories><category name='Quarter 1' /><category name='Quarter 2' /><category name='Quarter 3' /><category name='Quarter 4' /></categories>";<br />
<br />
<span class="codeComment"> //Based on the products for which we've to generate data, generate XML </span><br />
strXML = (this.document.productSelector.ProductA.checked==true)?(strXML + getProductXML(0)):(strXML);<br />
strXML = (this.document.productSelector.ProductB.checked==true)?(strXML + getProductXML(1)):(strXML);<br />
strXML = (this.document.productSelector.ProductC.checked==true)?(strXML + getProductXML(2)):(strXML);<br />
strXML = (this.document.productSelector.ProductD.checked==true)?(strXML + getProductXML(3)):(strXML); <br />
<br />
<span class="codeComment"> //Close <graph> element;</span><br />
strXML = strXML + "</graph>";<br />
<br />
<span class="codeComment"> //Return data</span><br />
return strXML; <br />
}<br />
<br />
<span class="codeComment"> /**<br />
* getProductXML method returns the <dataset> and <set> elements XML for<br />
* a particular product index (in data array). <br />
* @param productIndex Product index (in data array)<br />
* @return XML Data for the product.<br />
*/</span><br />
function getProductXML(productIndex){ <br />
var productXML;<br />
<span class="codeComment">//Create <dataset> element from 'data' array<br />
</span><span class="codeComment"> //and color vaules from 'colors' array defined above </span><br />
productXML = "<dataset seriesName='" + data[productIndex][0] + "' color='"+ colors[productIndex] +"' >"; <br />
<span class="codeComment">//Create set elements</span><br />
for (var i=1; i<=4; i++){<br />
productXML = productXML + "<set value='" + data[productIndex][i] + "' />";<br />
}<br />
<span class="codeComment"> //Close <dataset> element</span><br />
productXML = productXML + "</dataset>";<br />
<span class="codeComment"> //Return </span><br />
return productXML; <br />
}<br />
</SCRIPT><br />
</HEAD><br />
<BODY><br />
<span class="codeComment"> <!-- Embed a chart --><br />
<br />
<!-- Create the form for selecting products. --></span><br />
<FORM NAME='productSelector' Id='productSelector' action='Chart.html' method='POST' ><br />
<h4>Please select the products for which you want to plot the chart:</h4><br />
<INPUT TYPE='Checkbox' name='ProductA' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product A&nbsp;&nbsp;<br />
<INPUT TYPE='Checkbox' name='ProductB' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product B&nbsp;&nbsp;<br />
<INPUT TYPE='Checkbox' name='ProductC' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product C&nbsp;&nbsp;<br />
<INPUT TYPE='Checkbox' name='ProductD' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product D&nbsp;&nbsp;<br />
<br />
<B>Chart Configuration:</B><br />
<INPUT TYPE='Checkbox' name='AnimateChart'>Animate chart while changing data?&nbsp;&nbsp;<br />
<INPUT TYPE='Checkbox' name='ShowValues' onClick="JavaScript:updateChart('chart1Id');" checked>Show Data Values?&nbsp;&nbsp; <br />
<br />
</FORM><br />
<br />
<div id="chart1div"><br />
FusionCharts<br />
</div><br />
<script language="JavaScript"> <br />
var chart1 = new FusionCharts("../../FusionCharts/FCF_MSColumn3D.swf", "chart1Id", "600", "400"); <br />
<span class="codeComment"> //loading XML data into variable strXML using generateXML() method <br />
</span> var strXML=generateXML(this.document.productSelector.AnimateChart.checked);<br />
chart1.setDataXML(strXML);<br />
chart1.render("chart1div");<br />
</script><br />
</BODY><br />
</HTML></p>
</td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text">As you can see above, we're first rendering the FORM. This form allows the user to select the products which they want to plot on the chart. We also present some chart configuration options in the same form:</td>
</tr>
<tr>
<td valign="top" class="codeBlock"><FORM NAME='productSelector' Id='productSelector' action='Chart.html' method='POST'><br />
<INPUT TYPE='Checkbox' name='ProductA' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product A&nbsp;&nbsp;<br />
<INPUT TYPE='Checkbox' name='ProductB' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product B&nbsp;&nbsp;<br />
<INPUT TYPE='Checkbox' name='ProductC' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product C&nbsp;&nbsp;<br />
<INPUT TYPE='Checkbox' name='ProductD' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product D&nbsp;&nbsp;<br />
<B>Chart Configuration:</B><br />
<INPUT TYPE='Checkbox' name='AnimateChart'>Animate chart while changing data?&nbsp;&nbsp;<br />
<INPUT TYPE='Checkbox' name='ShowValues' onClick="JavaScript:updateChart('chart1Id');" checked>Show Data Values?&nbsp;&nbsp; <br />
</FORM></td>
</tr>
<tr>
<td valign="top" class="text"><p>We've defined the <span class="codeInline">onClick</span> event for each checkbox, so that when they change, they invoke the <span class="codeInline">updateChart</span> JavaScript function. </p>
<p>After the form, we've created a 3D Column chart with DOM Id as <span class="codeInline">chart1Id</span>.</p></td>
</tr>
<tr>
<td valign="top" class="codeBlock"><div id="chart1div"><br />
FusionCharts <br />
</div><br />
<script language="JavaScript"> <br />
var chart1 = new FusionCharts("../../FusionCharts/FCF_MSColumn3D.swf", "chart1Id", "600", "400"); <br />
<span class="codeComment">//loading XML data into variable strXML using generateXML() method <br />
</span> var strXML=generateXML(this.document.productSelector.AnimateChart.checked);<br />
chart1.setDataXML(strXML);<br />
chart1.render("chart1div");<br /></script></td>
</tr>
<tr>
<td valign="top" class="text"><p>This is all about the HTML part of the application. </p>
<p>Now, let's get to the JavaScript side of story. We begin with including <span class="codeInline">FusionCharts.js</span> file, which provides all the wrapper functions to deal with FusionCharts. </p>
<p>Thereafter, we define our data for this application in JavaScript arrays:</p> </td>
</tr>
<tr>
<td valign="top" class="text"><p class="codeBlock"><span class="codeComment">//We store all our data in an array data. It contains data for three Products<br />
//for 3 quarters. The first column of each array contains the product Name.<br />
//Thereafter 4 columns contain data for 4 quarters.</span><br />
var data = new Array();<br />
<span class="codeComment">//Data for each product</span><br />
data[0] = new Array("Product A",659400,465400,764500,650500);<br />
data[1] = new Array("Product B",546300,436500,546500,332500);<br />
data[2] = new Array("Product C",657600,564600,348600,436600);<br />
data[3] = new Array("Product D",436500,765700,453900,326400);</p> </td>
</tr>
<tr>
<td valign="top" class="text">We also keep another array to store color values for each column representing each product : </td>
</tr>
<tr>
<td valign="top" class="codeBlock"><p> <span class="codeComment">//the array of colors contains 4 unique Hex coded colours (without #) for the 4 products</span><br />
var colors=new Array("AFD8F8", "F6BD0F", "8BBA00", "FF8E46");</p>
</td>
</tr>
<tr>
<td valign="top" class="text">
</td>
</tr>
<tr>
<td valign="top" class="text"><p>Before moving to <span class="codeInline">updateChart()</span> function, let's first see the other two functions: <span class="codeInline">generateXML() </span>and <span class="codeInline">getProductXML().</span> </p>
<p><span class="codeInline">getProductXML</span> function basically takes in the numeric index of a product and returns the XML data document for data pertinent to that product. The data is returned in multi-series XML format, as we're using a multi-series 3D Column Chart. </p></td>
</tr>
<tr>
<td valign="top" class="codeBlock">function <strong>getProductXML(productIndex)</strong>{ <br />
var productXML;<br />
<span class="codeComment"> //Create <dataset> element </span><br />
<span class="codeComment"> //and color vaules from 'colors' array defined above </span><br />
productXML = "<dataset seriesName='" + data[productIndex][0] + "' color='"+ colors[productIndex] +"' >";<br />
<br /> <span class="codeComment"> //Create set elements</span><br />
for (var i=1; i<=4; i++){<br />
productXML = productXML + "<set value='" + data[productIndex][i] + "' />";<br />
}<br />
<span class="codeComment"> //Close <dataset> element</span><br />
productXML = productXML + "</dataset>";<br />
<span class="codeComment">//Return </span><br />
return productXML; <br />
}</td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text"><span class="codeInline">generateXML</span> function generates the full XML data document for the selected products and returns it. It also reads the chart configuration parameters from FORM elements and then puts it in XML Data document. </td>
</tr>
<tr>
<td valign="top" class="codeBlock">function <strong>generateXML(animate)</strong>{ <br />
<span class="codeComment">//Variable to store XML</span><br />
var strXML;<br />
<br />
<span class="codeComment"> //<graph> element<br />
//Added animation parameter based on animate parameter <br />
//Added value related attributes if show value is selected by the user<br />
</span> strXML = "<graph numberPrefix='$' decimalPrecision='0' animation='" + ((animate==true)?"1":"0") + "' " + ((this.document.productSelector.ShowValues.checked==true) ? ("showValues='1' rotateValues='1'"):(" showValues='0' ")) + "yaxismaxvalue='800000'>";<br />
<br />
<span class="codeComment">//Store <categories> and child <category> elements</span><br />
strXML = strXML + "<categories><category name='Quarter 1' /><category name='Quarter 2' /><category name='Quarter 3' /><category name='Quarter 4' /></categories>";<br />
<br />
<span class="codeComment"> //Based on the products for which we've to generate data, generate XML </span><br />
strXML = (this.document.productSelector.ProductA.checked==true)?(strXML + getProductXML(0)):(strXML);<br />
strXML = (this.document.productSelector.ProductB.checked==true)?(strXML + getProductXML(1)):(strXML);<br />
strXML = (this.document.productSelector.ProductC.checked==true)?(strXML + getProductXML(2)):(strXML);<br />
strXML = (this.document.productSelector.ProductD.checked==true)?(strXML + getProductXML(3)):(strXML); <br />
<br />
<span class="codeComment"> //Close <graph> element;</span><br />
strXML = strXML + "</graph>";<br />
<br />
<span class="codeComment"> //Return data</span><br />
return strXML; <br />
}</td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text"><p>Finally we've the <span class="codeInline">updateChart()</span> function, which is the main function responsible for updating the chart. This function is invoked when the user changes the state of any checkbox in the form. In this function:
<ul>
<li>We generate the XML Data document (pertinent to the products and configuration selected by the user) and then update the chart using <span class="codeInline">updateChartXML</span> method defined in FusionCharts JavaScript class. </li>
</ul>
</p></td>
</tr>
<tr>
<td valign="top" class="codeBlock"> function <strong>updateChart(domId)</strong>{ <br />
<span class="codeComment">//Update it's XML - set animate Flag from AnimateChart checkbox in form</span><br />
<span class="codeComment">//using updateChartXML method defined in FusionCharts JavaScript class</span><br />
updateChartXML(domId,generateXML(this.document.productSelector.AnimateChart.checked)); <br />
}</td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text">And that's it - this marks the end of code required for this application. When you now view this application, you'll get exactly what you were looking for. </td>
</tr>
</table>
</body>
</html>
Mr. DellatioNx196 GaLers xh3LL Backd00r 1.0, Coded By Mr. DellatioNx196 - Bogor BlackHat