|
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/Code/JavaScript/ExampleApplication/ |
Upload File : |
<!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=utf-8" />
<title>FusionCharts - Client Side Chart Plotting</title>
<link href="../../assets/ui/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../../Charts/FusionCharts.js"></script>
<script type="text/javascript" src="../../assets/ui/js/jquery.min.js"></script>
<script type="text/javascript" src="../../assets/ui/js/lib.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="../../assets/ui/js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
/* select the element name, css selector, background etc */
DD_belatedPNG.fix('img');
/* string argument can be any CSS selector */
</script>
<![endif]-->
<style type="text/css">
h2.headline {
font: normal 110%/137.5% "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 0;
margin: 25px 0 25px 0;
color: #7d7c8b;
text-align: center;
}
p.small {
font: normal 68.75%/150% Verdana, Geneva, sans-serif;
color: #919191;
padding: 0;
margin: 0 auto;
width: 664px;
text-align: center;
}
</style>
<script type="text/javascript" src="../../../Charts/FusionCharts.js"></script>
<script type="text/javascript" >
//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.
var data = new Array();
//Data for each product
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);
//Flag indicating whether our chart has loaded
var chartLoaded = false;
/**
* 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
*/
function FC_Rendered(domId){
//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
if (domId=="myChartId"){
//Yes - it is.
//Enable the form now, as the chart has loaded
this.document.productSelector.disabled = false;
//Set chartLoaded flag to true
chartLoaded = true;
//Get reference to chart object using Dom ID
var chartObj = FusionCharts(domId);
//Update it's XML - set animate Flag to true
chartObj.setXMLData(generateXML(this.document.productSelector.AnimateChart.checked));
}
return true;
}
/**
* 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
*/
function updateChart(domId){
//Update only if chart has loaded
if (chartLoaded){
//Get reference to chart object using Dom ID
var chartObj = FusionCharts(domId);
//Update it's XML - set animate Flag from AnimateChart checkbox in form
chartObj.setXMLData(generateXML(this.document.productSelector.AnimateChart.checked));
}
}
/**
* 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.
*/
function generateXML(animate){
//Variable to store XML
var strXML;
//<chart> element
//Added animation parameter based on animate parameter
//Added value related attributes if show value is selected by the user
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' ")) + ">";
//Store <categories> and child <category> elements
strXML = strXML + "<categories><category name='Quarter 1' /><category name='Quarter 2' /><category name='Quarter 3' /><category name='Quarter 4' /></categories>";
//Based on the products for which we've to generate data, generate XML
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);
//Close <chart> element;
strXML = strXML + "</chart>";
//Return data
return strXML;
}
/**
* 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.
*/
function getProductXML(productIndex){
var productXML;
//Create <dataset> element
productXML = "<dataset seriesName='" + data[productIndex][0] + "' >";
//Create set elements
for (var i=1; i<=4; i++){
productXML = productXML + "<set value='" + data[productIndex][i] + "' />";
}
//Close <dataset> element
productXML = productXML + "</dataset>";
//Return
return productXML;
}
/**
* toggleVlues method show/hides data plot value labels for a chart
* @param chartId DOMId of the chart
*/
function toggleValues(chartId)
{
// get chart reference
var chartReference = FusionCharts(chartId);
// toggle present showValues status
var toggledShowValues = 1* ( !( chartReference.getChartAttribute("showValues")==1 ) );
// set toggled value for showValues
chartReference.setChartAttribute( { "showValues" : toggledShowValues , "animation" : (this.document.productSelector.AnimateChart.checked==true?"1":"0"), rotateValues: 1 } );
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="logo"><a class="imagelink" href="http://www.fusioncharts.com/" target="_blank"><img src="../../assets/ui/images/fusionchartsv3.2-logo.png" width="131" height="75" alt="FusionCharts XT logo" /></a></div>
<h1 class="brand-name">FusionCharts XT</h1>
<h1 class="logo-text">JavaScript Example Application</h1>
</div>
<div class="content-area">
<div id="content-area-inner-main">
<p class="text" align="center">Please select the products for which you want to plot the chart:</p>
<div id="messageBox" style="margin-left:100px; margin-right:100px; display:none;"></div>
<p> </p>
<FORM NAME='productSelector' Id='productSelector' disabled>
<div class="expandable-panel-holder" style="margin-left:120px;">
<div class="expandable-panel">
<div>
<div class="selection-panel" style="width:500px; text-align:center;padding-left:120px;">
<ul>
<li><label><INPUT TYPE='Checkbox' name='ProductA' onClick="JavaScript:updateChart('myChartId');" checked="checked" /> Product A </label></li>
<li><label><INPUT TYPE='Checkbox' name='ProductB' onClick="JavaScript:updateChart('myChartId');" checked="checked" /> Product B </label></li>
<li><label><INPUT TYPE='Checkbox' name='ProductC' onClick="JavaScript:updateChart('myChartId');" checked="checked" /> Product C </label></li>
<li><label><INPUT TYPE='Checkbox' name='ProductD' onClick="JavaScript:updateChart('myChartId');" checked="checked"/> Product D </label></li>
</ul>
</div>
</div>
<span></span></div>
</div>
<div class="clear"></div>
<div class="selection-panel-sec" style="padding:0 80px 0 130px;" >
<div style="padding:0 0 25px 20px; ">
<ul>
<li><strong>Chart Configuration:</strong></li>
<li><label>
<INPUT TYPE='Checkbox' name='AnimateChart'/> Animate chart while changing data? </label></li>
<li><label>
<INPUT TYPE='Checkbox' name='ShowValues' onClick="JavaScript:toggleValues('myChartId');" checked="checked"/> Show Data Values?</label></li>
</ul>
</div>
</div>
<p> </p>
<center>
<div id="chartContainer">FusionCharts</div>
</center>
<script type="text/javascript">
var chart1 = new FusionCharts("../../../Charts/MSColumn3D.swf", "myChartId", "600", "400", "0", "1");
//Initialize chart with empty data. We'll feed it data on the chart's FC_Rendered event.
chart1.setXMLData("<chart/>");
//chart1.setXMLData("<chart/>");
chart1.render("chartContainer");
</script>
</FORM>
<div class="clear"></div>
<p> </p>
<p> </p>
<p class="small">This dashboard was created using FusionCharts XT. You are free to reproduce and distribute this dashboard in its original form, without changing any content, whatsoever. <br />
© All Rights Reserved</p>
<p> </p>
<div class="underline-dull"></div>
<div>
<p class="highlightBlock">The above sample showcases a JavaScript example . Click <a href="../../../Contents/index.html?JavaScript/JS_Example.html" target="_blank">here</a> to know more on how the code of this example works.</p>
</div>
</div>
</div>
<div id="footer">
<ul>
<li></li><li><a href="../../NoChart.html"><span>Unable to see the chart above?</span></a></li>
</ul>
</div>
</div>
<script type="text/javascript"><!--//
$(document).ready ( function() {
showConditionalMessage( "Your browser does not seem to have Flash Player support. JavaScript chart is rendered instead", isJSRenderer(chart1) );
});
// -->
</script>
</body>
</html>