|
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/JavaScript/ |
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>FusionCharts XT and JavaScript - Example Application </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", "FusionCharts XT and JavaScript|JS_Overview.html", "Example application" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">FusionCharts XT and JavaScript - Example Application </td>
</tr>
<tr>
<td valign="top" class="text"><p>In this section, we are going to create a simple application to demonstrate the integration of FusionCharts XT and JavaScript. Our application will 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 have not already gone through them. This example uses a lot of concepts explained in previous topics. </p>
<p>Our application will look as under once we are done: </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Code_JSEx.jpg" width="690" height="514" class="imageBorder" />
<p>See it <a href='../../Code/JavaScript/ExampleApplication/index.html' target='_blank'>live</a></p>
</td>
</tr>
<tr>
<td valign="top" class="highlightBlock">The code for this application is present in <span class="codeInline">Download Package</span> > <span class="codeInline">Code</span> > <span class="codeInline">JavaScript</span> > <span class="codeInline">ExampleApplication</span> folder. </td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td valign="top" class="header"><a name="application"></a>Application Description </td>
</tr>
<tr>
<td valign="top" class="text"><p>As you can see in the image above:</p>
<ul>
<li>We have built a chart to compare Quarterly sales of four 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 built 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 will soon see. </li>
<li>We have 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 will soon explore. </li>
</ul>
<p>Before we get to the code of the application, let us first see the process flow. </p></td>
</tr>
<tr>
<td valign="top" class="header"><a name="process"></a>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>The chart Object is initialized with empty data. We register it with JavaScript with <span class="codeInline">DOMId</span> as <span class="codeInline">chart1Id</span>.</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. This form is disabled by default. </li>
<li>In the <span class="codeInline">FC_Rendered</span> function, which is invoked when the chart is loaded, we enable this form so that user can now select the products. </li>
<li>In <span class="codeInline">FC_Rendered</span> function itself, we also build the chart for first time showing data for all the four products.</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 have 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 us now see the code for this application. We have used the simple event model and simple functions to build this application.</p></td>
</tr>
<tr>
<td valign="top" class="header"><a name="code"></a>Code </td>
</tr>
<tr>
<td valign="top" class="text"><p>The code for the above application is present in<span class="codeInline"> Chart.html</span> and can be listed as under:</p> </td>
</tr>
<tr>
<td valign="top" class="text">
<pre class="prettyprint code_container"><HTML>
<HEAD>
<TITLE>FusionCharts XT - Client Side Chart Plotting</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<span class="codeComment"> //In this example, we'll show you how to plot and update charts on the
//client side. Here, we first store our data (to be plotted) in client side
//JavaScript arrays. This data is hard-coded in this example. However,
//in your applications, you can build this JavaScript arrays with live
//data using server side scripting languages. Or, you can make AJAX calls
//to get this data live.
//We store all our data in an array data. It contains data for three Products
//for 3 quarters. The first column of each array contains the product Name.
//Thereafter 4 columns contain data for 4 quarters.</span>
var data = new Array();
<span class="codeComment"> //Data for each product</span>
data[0] = new Array("Product A",659400,465400,764500,650500);
data[1] = new Array("Product B",546300,436500,546500,332500);
data[2] = new Array("Product C",657600,564600,348600,436600);
data[3] = new Array("Product D",436500,765700,453900,326400);
<span class="codeComment"> //Flag indicating whether our chart has loaded</span>
var chartLoaded = false;
<span class="codeComment"> /**
* FC_Rendered method is invoked when the chart has completed rendering for the first time.
* It's a pre-defined method name.
* @param domId Dom ID of the chart object
*/</span>
function FC_Rendered(domId){
<span class="codeComment"> //It is in this method that you can update chart's data using JS methods.
//Check if this is the chart that we want to update</span>
if (domId=="chart1Id"){
<span class="codeComment"> //Yes - it is.
//Enable the form now, as the chart has loaded</span>
this.document.productSelector.disabled = false;
<span class="codeComment"> //Set chartLoaded flag to true</span>
chartLoaded = true;
<span class="codeComment"> //Get reference to chart object using Dom ID</span>
var chartObj = getChartFromId(domId);
<span class="codeComment"> //Update its XML - set animate Flag to true</span>
chartObj.setXMLData(generateXML(true));
}
return true;
}
<span class="codeComment"> /**
* updateChart method is called, when user changes any of the checkboxes.
* Here, we generate the XML data again and build the chart.
* @param domId domId of the Chart
*/</span>
function updateChart(domId){
<span class="codeComment">//Update only if chart has loaded</span>
if (chartLoaded){
<span class="codeComment">//Get reference to chart object using Dom ID</span>
var chartObj = getChartFromId(domId);
<span class="codeComment"> //Update its XML - set animate Flag from AnimateChart checkbox in form</span>
chartObj.setXMLData(generateXML(this.document.productSelector.AnimateChart.checked));
}
}
<span class="codeComment">/**
* generateXML method returns the XML data for the chart based on the
* checkboxes which the user has checked.
* @param animate Boolean value indicating to animate the chart.
* @return XML Data for the entire chart.
*/ </span>
function generateXML(animate){
<span class="codeComment"> //Variable to store XML</span>
var strXML;
<span class="codeComment"> //<chart> element
//Added animation parameter based on animate parameter
//Added value related attributes if show value is selected by the user
</span> strXML = "<chart caption='Product Wise Sales' formatNumberScale='0' numberPrefix='$'
animation='" + ((animate==true)?"1":"0") + "' " + ((this.document.productSelector.ShowValues.checked==true)?
(" showValues='1' rotateValues='1' placeValuesInside='1' "):(" showValues='0' ")) + ">";
<span class="codeComment">//Store <categories> and child <category> elements</span>
strXML = strXML + "<categories><category label='Quarter 1' /><category label='Quarter 2' /><category label='Quarter 3' />
<category label='Quarter 4' /></categories>";
<span class="codeComment">
//Based on the products for which we've to generate data, generate XML </span>
strXML = (this.document.productSelector.ProductA.checked==true)?(strXML + getProductXML(0)):(strXML);
strXML = (this.document.productSelector.ProductB.checked==true)?(strXML + getProductXML(1)):(strXML);
strXML = (this.document.productSelector.ProductC.checked==true)?(strXML + getProductXML(2)):(strXML);
strXML = (this.document.productSelector.ProductD.checked==true)?(strXML + getProductXML(3)):(strXML);
<span class="codeComment"> //Close <chart> element;</span>
strXML = strXML + "</chart>";
<span class="codeComment"> //Return data</span>
return strXML;
}
<span class="codeComment"> /**
* getProductXML method returns the <dataset> and <set> elements XML for
* a particular product index (in data array).
* @param productIndex Product index (in data array)
* @return XML Data for the product.
*/</span>
function getProductXML(productIndex){
var productXML;
<span class="codeComment">//Create <dataset> element </span>
productXML = "<dataset seriesName='" + data[productIndex][0] + "' >";
<span class="codeComment">//Create set elements</span>
for (var i=1; i<=4; i++){
productXML = productXML + "<set value='" + data[productIndex][i] + "' />";
}
<span class="codeComment"> //Close <dataset> element</span>
productXML = productXML + "</dataset>";
<span class="codeComment"> //Return </span>
return productXML;
}</p>
function toggleValues(chartId)
{
<span class="codeComment"> // get chart reference</span>
var chartReference = FusionCharts(chartId);
<span class="codeComment"> // toggle present showValues status</span>
var toggledShowValues = 1* ( !( chartReference.getChartAttribute("showValues")==1 ) );
<span class="codeComment"> // set toggled value for showValues</span>
chartReference.setChartAttribute( "showValues" , toggledValue );
}
</SCRIPT>
</HEAD>
<BODY>
<span class="codeComment"> <!-- In this example, we'll initially plot the chart with no data. -->
<!-- Embed a chart -->
<!-- Create the form for selecting products. We disable the form till the chart is loaded and initialized. --></span>
<FORM NAME='productSelector' Id='productSelector' action='Chart.html' method='POST' disabled>
<h4>Please select the products for which you want to plot the chart:</h4>
<INPUT TYPE='Checkbox' name='ProductA' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product A&nbsp;&nbsp;
<INPUT TYPE='Checkbox' name='ProductB' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product B&nbsp;&nbsp;
<INPUT TYPE='Checkbox' name='ProductC' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product C&nbsp;&nbsp;
<INPUT TYPE='Checkbox' name='ProductD' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product D&nbsp;&nbsp;
<B>Chart Configuration:</B>
<INPUT TYPE='Checkbox' name='AnimateChart'>Animate chart while changing data?&nbsp;&nbsp;
<INPUT TYPE='Checkbox' name='ShowValues' onClick="JavaScript:toggleValues('chart1Id');" checked>Show Data Values?&nbsp;&nbsp;
</FORM>
<div id="chart1div">FusionCharts XT</div>
<script language="JavaScript">
var chart1 = new FusionCharts("../../FusionCharts/MSColumn3D.swf", "chart1Id", "600", "400", "0", "1");
<span class="codeComment"> //Initialize chart with empty data. We'll feed it data on the chart's FC_Rendered event.</span>
chart1.setXMLData("<chart></chart>");
chart1.render("chart1div");
</script>
</BODY>
</HTML>
</pre>
</td>
</tr>
<tr>
<td valign="top" class="text"><p>As you can see above, we are 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:</p></td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container"><FORM NAME='productSelector' Id='productSelector' action='Chart.html' method='POST' disabled>
<INPUT TYPE='Checkbox' name='ProductA' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product A&nbsp;&nbsp;
<INPUT TYPE='Checkbox' name='ProductB' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product B&nbsp;&nbsp;
<INPUT TYPE='Checkbox' name='ProductC' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product C&nbsp;&nbsp;
<INPUT TYPE='Checkbox' name='ProductD' onClick="JavaScript:updateChart('chart1Id');" checked>&nbsp;Product D&nbsp;&nbsp;
<B>Chart Configuration:</B>
<INPUT TYPE='Checkbox' name='AnimateChart'>Animate chart while changing data?&nbsp;&nbsp;
<INPUT TYPE='Checkbox' name='ShowValues' onClick="JavaScript:updateChart('chart1Id');" checked>Show Data Values?&nbsp;&nbsp;
</FORM></pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>We have 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 have created an empty 3D Column chart with <span class="codeInline">DOMId</span> as <span class="codeInline">chart1Id</span>. This chart is set to register with JavaScript. </p></td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container"><div id="chart1div">
FusionCharts XT
</div>
<script language="JavaScript">
var chart1 = new FusionCharts("../../FusionCharts/MSColumn3D.swf", "chart1Id", "600", "400", "0", "1");
//Initialize chart with empty data. We'll feed it data on the chart's FC_Rendered event.
chart1.setXMLData("<chart></chart>");
chart1.render("chart1div");
</script></pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>This is all about the HTML part of the application. </p>
<p>Now, let us get to the JavaScript side of story. We begin with providing <span class="codeInline">FusionCharts.js</span> file, which contains all the wrapper functions to deal with FusionCharts XT. </p>
<p>Thereafter, we define our data for this application in JavaScript arrays:</p> </td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container">//We store all our data in an array data. It contains data for three Products
//for 3 quarters. The first column of each array contains the product Name.
//Thereafter 4 columns contain data for 4 quarters.</span>
var data = new Array();
<span class="codeComment">//Data for each product</span>
data[0] = new Array("Product A",659400,465400,764500,650500);
data[1] = new Array("Product B",546300,436500,546500,332500);
data[2] = new Array("Product C",657600,564600,348600,436600);
data[3] = new Array("Product D",436500,765700,453900,326400);</pre> </td>
</tr>
<tr>
<td valign="top" class="text"><p>We also keep a flag to store whether the chart has loaded.</p>
<pre class="prettyprint code_container">//Flag indicating whether our chart has loaded
var chartLoaded = false;</pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>Post this, our first JavaScript function is <span class="codeInline">FC_Rendered</span> function, which is invoked when the chart has loaded. In this function, we:</p>
<ul>
<li>First check if the <span class="codeInline">DOMId</span> passed to this function is same as that of our chart. This is to ensure that it is our required chart which called this function.</li>
<li>Since the chart has loaded, the user can now interact with the form to update chart. So, we enable the Product Selection form, which was originally disabled. </li>
<li>We set the flag indicating chart loaded status to true.</li>
<li>We build the XML data for all products and provide it to the chart to build it. </li>
</ul>
<p class="highlightBlock">If you have your chart objects inside <span class="codeInline"><FORM></span> elements, you CANNOT use<span class="codeInline"> getChartFromId() </span>method to get a reference to the chart, as the DOM Hierarchy of the chart object has changed. You will get a JavaScript "<span class="codeInline"><<ChartId>> is undefined"</span> error. In these cases, you manually need to get a reference to the chart object. Or, you can opt to place the chart object outside <span class="codeInline"><FORM></span> element. </p>
<p><strong><span class="codeInline"><a name="fcrendered"></a>FC_Rendered</span> Function:</strong></p></td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container">function FC_Rendered(domId){
if (domId=="chart1Id"){
<span class="codeComment">//Enable the form now, as the chart has loaded</span>
this.document.productSelector.disabled = false;
<span class="codeComment">//Set chartLoaded flag to true</span>
chartLoaded = true;
<span class="codeComment"> //Get reference to chart object using Dom ID</span>
var chartObj = getChartFromId(domId);
<span class="codeComment"> //Update it's XML - set animate Flag to true</span>
chartObj.setXMLData(generateXML(true));
}
return true;
}</pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>Before moving to <span class="codeInline">updateChart()</span> function, let us 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 are using a multi-series 3D Column Chart. </p></td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container">function <strong>getProductXML(productIndex)</strong>{
var productXML;
<span class="codeComment"> //Create <dataset> element </span>
productXML = "<dataset seriesName='" + data[productIndex][0] + "' >";
<span class="codeComment"> //Create set elements</span>
for (var i=1; i<=4; i++){
productXML = productXML + "<set value='" + data[productIndex][i] + "' />";
}
<span class="codeComment"> //Close <dataset> element</span>
productXML = productXML + "</dataset>";
<span class="codeComment">//Return </span>
return productXML;
}</pre></td>
</tr>
<tr>
<td valign="top" class="text"><p><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.</p> </td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container">function generateXML(animate){
<span class="codeComment">//Variable to store XML</span>
var strXML;
<span class="codeComment"> //<chart> element
//Added animation parameter based on animate parameter
//Added value related attributes if show value is selected by the user</span>
strXML = "<chart caption='Product Wise Sales' formatNumberScale='0' numberPrefix='$' animation='" + ((animate==true)?"1":"0") + "' " + ((this.document.productSelector.ShowValues.checked==true)?(" showValues='1' rotateValues='1' placeValuesInside='1' "):(" showValues='0' ")) + ">";
<span class="codeComment">//Store <categories> and child <category> elements</span>
strXML = strXML + "<categories><category label='Quarter 1' /><category label='Quarter 2' /><category label='Quarter 3' /><category label='Quarter 4' /></categories>";
<span class="codeComment"> //Based on the products for which we've to generate data, generate XML </span>
strXML = (this.document.productSelector.ProductA.checked==true)?(strXML + getProductXML(0)):(strXML);
strXML = (this.document.productSelector.ProductB.checked==true)?(strXML + getProductXML(1)):(strXML);
strXML = (this.document.productSelector.ProductC.checked==true)?(strXML + getProductXML(2)):(strXML);
strXML = (this.document.productSelector.ProductD.checked==true)?(strXML + getProductXML(3)):(strXML);
<span class="codeComment"> //Close <chart> element;</span>
strXML = strXML + "</chart>";
<span class="codeComment"> //Return data</span>
return strXML;
}</pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>Finally we have 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:</p>
<ul>
<li>We first check if the chart has loaded.</li>
<li>If it has loaded, 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">setXMLData</span> method. </li>
</ul><br /></td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container">function updateChart(domId){
<span class="codeComment">//Update only if chart has loaded</span>
if (chartLoaded){
<span class="codeComment">//Get reference to chart object using Dom ID</span>
var chartObj = getChartFromId(domId);
<span class="codeComment"> //Update it's XML - set animate Flag from AnimateChart checkbox in form</span>
chartObj.setXMLData(generateXML(this.document.productSelector.AnimateChart.checked));
}
}</pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>Additionally, we have a function named <span class="codeInline">toggleValues()</span> which is called by the <strong>Show Values</strong> check box. The function reads the <span class="codeInline">showValues</span> attribute's value from the chart and reverts or make an inverse of the value, that is, when <span class="codeInline">showValues</span> is 1 it makes it 0 and vice-versa. It finally sets the new value to the chart using <span class="codeInline">setChartAttribute()</span> function.</p> </td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container">function toggleValues(chartId)
{
<span class="codeComment"> // get chart reference</span>
var chartReference = FusionCharts(chartId);
<span class="codeComment"> // toggle present showValues status</span>
var toggledShowValues = 1* ( !( chartReference.getChartAttribute("showValues")==1 ) );
<span class="codeComment"> // set toggled value for showValues</span>
chartReference.setChartAttribute( "showValues" , toggledValue );
}</pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>And that's it - this marks the end of code required for this application. When you now view this application, you will get exactly what you were looking for.</p> </td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Pie/Doughnut chart API|API/SpecialCharts/PieDoughnut_JSAPI.html","FusionCharts XT and jQuery - FusionCharts jQuery plugin overview|../jQuery/Overview.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>