|
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/Basics/Tabs/ |
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>Using in tabs | FusionCharts XT</title>
<script type="text/javascript" src="../../../../Charts/FusionCharts.js"></script>
<script type="text/javascript" src="../../../../Charts/jquery.min.js"></script>
<script type="text/javascript" language="Javascript" src="../../../assets/ui/js/lib.js"></script>
<link rel="stylesheet" type="text/css" href="../../../assets/ext-js/resources/css/ext-all.css" />
<script type="text/javascript" src="../../../assets/ext-js/js/ext-base.js"></script>
<script type="text/javascript" src="../../../assets/ext-js/js/ext-all.js"></script>
<link href="../../../assets/ui/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"><!--
// Global tabs variable
var tabs;
$(document).ready( function() {
// global var win to store the ExtJs html element
// basic tabs 1, built from existing content
if(!tabs)
tabs = new Ext.TabPanel({
renderTo: 'tabs1',
width:750,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items:[
{contentEl:'simple-int', title: 'Simple Interest'},
{contentEl:'comp-int', title: 'Compound Interest'},
{contentEl:'mix-int', title: 'Compare'}
]
});
var myChart = new FusionCharts( "../../../../Charts/Column2D.swf", "myChartId-sim", "100%", "300", "0", "0" );
myChart.setXMLData( generateChartData('simple') );
myChart.render("simple-int-chart");
var myChart = new FusionCharts( "../../../../Charts/Column2D.swf", "myChartId-com", "100%", "300", "0", "0" );
myChart.setXMLData( generateChartData('compound') );
myChart.render("comp-int-chart");
var myChart = new FusionCharts( "../../../../Charts/MSColumn2D.swf", "myChartId-mix", "100%", "300", "0", "0" );
myChart.setXMLData( generateChartData('mix') );
myChart.render("mix-int-chart");
showConditionalMessage( "Your browser does not seem to have Flash Player support. JavaScript chart is rendered instead", isJSRenderer(myChart) );
});
//--></script>
<!--[if IE 6]>
<script 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>
</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">Using in Tabs</h1>
</div>
<div class="content-area">
<div id="content-area-inner-main">
<p class="text" align="center">Rendering Charts in different tabs. The calculation shown below will reflect only the active tab</p>
<div id="messageBox" style="margin-left:100px; margin-right:100px; display:none;"></div>
<p> </p>
<div class="clear"></div>
<div class="gen-chart-render">
<center>
<script type="text/javascript">
function generateChartData( type ) {
var p, i, t, dataXML = '', val, interest, categories, datasetSim, datasetCom, year, simAmt, comAmt;
if (type == 'simple') {
p = $('#amount-s').val();
i = $('#interest-s').val();
t = $('#time-s').val();
} else if (type == 'compound') {
p = $('#amount-c').val();
i = $('#interest-c').val();
t = $('#time-c').val();
}else if (type == 'mix') {
p = $('#amount-m').val();
i = $('#interest-m').val();
t = $('#time-m').val();
}
dataXML = "<chart xAxisName = 'Year' yAxisName='Amount' showValues='0'>";
if (!((p == null || p.length == 0) || (t == null || t.length == 0) || (i == null || i.length == 0))) {
if (type == 'simple') {
interest = (p * i) / 100;
val = p;
for (year = 1; year <= t; year++) {
val = parseInt(val) + interest;
dataXML += "<set label='" + year + "' value='" + val + "' />";
}
} else if (type == 'compound') {
val = p;
for (year = 1; year <= t; year++) {
interest = (val * i) / 100;
val = parseInt(val) + interest;
dataXML += "<set label='" + year + "' value='" + val + "' />";
}
} else if (type == 'mix') {
simAmt = p;
comAmt = p;
interest = (p * i) / 100;
dataXML += "<dataset label='" + year + "' value='" + val + "' />";
categories = "<categories>";
datasetSim = "<dataset seriesName='Simple Interest'>";
datasetCom = "<dataset seriesName='Compound Interest'>";
for (year = 1; year <= t; year++) {
simAmt = parseInt(simAmt) + interest;
comAmt = parseInt(comAmt) + ((comAmt * i) / 100);
categories += "<category label=' " + year + " ' />";
datasetSim += "<set value='" + simAmt + "' />";
datasetCom += "<set value='" + comAmt + "' />";
}
categories += "</categories>";
datasetSim += "</dataset>";
datasetCom += "</dataset>";
dataXML += categories + datasetSim + datasetCom;
}
}
dataXML += "</chart>";
return dataXML;
}
function updateData (type) {
if (type == 'simple') {
FusionCharts('myChartId-sim').setXMLData( generateChartData('simple') );
}
if (type == 'compound') {
FusionCharts('myChartId-com').setXMLData( generateChartData('compound') );
}
if (type == 'mix') {
FusionCharts('myChartId-mix').setXMLData( generateChartData('mix') );
}
}
// --></script>
<div id="tabs1">
<div id="simple-int" class="x-hide-display">
<span id="simple-int-chart"></span>
<p class="text"> </p>
Amount:
<input type="text" size="10" id="amount-s" value="1000"/>
Interest:
<input type="text" size="4" id="interest-s" value="10"/>
Time <span class='small'>(in year): </span>
<input type="text" size="4" id="time-s" value="10"/>
<input type="button" onclick="updateData('simple')" value="Calculate"/>
<p class="text"> </p>
</div>
<div id="comp-int" class="x-hide-display">
<span id="comp-int-chart"></span>
<p class="text"> </p>
Amount:
<input type="text" size="10" id="amount-c" value="1000"/>
Interest:
<input type="text" size="4" id="interest-c" value="10"/>
Time <span class='small'>(in year): </span>
<input type="text" size="4" id="time-c" value="10"/>
<input type="button" onclick="updateData('compound')" value="Calculate"/>
<p class="text"> </p>
</div>
<div id="mix-int" class="x-hide-display">
<span id="mix-int-chart"></span>
<p class="text"> </p>
Amount:
<input type="text" size="10" id="amount-m" value="1000"/>
Interest:
<input type="text" size="4" id="interest-m" value="10"/>
Time <span class='small'>(in year): </span>
<input type="text" size="4" id="time-m" value="10"/>
<input type="button" onclick="updateData('mix')" value="Calculate"/>
<p class="text"> </p>
</div>
</div>
<p class="text"> </p>
</center>
</div>
<div class="clear"></div>
<p> </p>
<p class="small"> </p>
<p> </p>
<div class="underline-dull"></div>
</div>
</div>
<div id="footer">
<ul>
<li></li>
</ul>
</div>
</div>
</body>
</html>