|
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/API/SpecialCharts/ |
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>Combi3D Chart - JavaScript API </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", "API Reference|../Overview.html", "Chart Specific API", "3D chart JavaScript API" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Combi3D Chart - JavaScript API </td>
</tr>
<tr>
<td valign="top" class="text"><p>Combination 3D chart exposes a number of functions for better interactivity. These functions can be called using JavaScript. Shown below is a list of these functions along with their description and parameter(s):</p> </td>
</tr>
<tr>
<td valign="top" class="text"><table width="100%" border="0" cellpadding="2" cellspacing="0" class="table">
<tr>
<td width="20%" class="header">Function Name</td>
<td width="15%" class="header">Parameter </td>
<td width="65%" class="header">Description</td>
</tr>
<tr>
<td width="20%" valign="top" class="codeInline">view2D()</td>
<td width="15%" valign="top" class="text">None</td>
<td width="65%" class="text">Sets the chart to 2D-View mode. This function will not work if the current view is already in 2D mode.</td>
</tr>
<tr>
<td width="20%" valign="top" class="codeInline">view3D()</td>
<td width="15%" valign="top" class="text">None</td>
<td width="65%" class="text">Sets the chart to the last 3D state before it has been set to 2D mode. This function will not work if the current view is already in 3D mode.</td>
</tr>
<tr>
<td valign="top" class="codeInline">view100Percent()
<div class="version-info">Since v 3.2.2</div></td>
<td valign="top" class="text">None</td>
<td class="text">Sets the chart view to 100% mode. </td>
</tr>
<tr>
<td width="20%" valign="top" class="codeInline">resetView()</td>
<td width="15%" valign="top" class="text">None</td>
<td width="65%" class="text">Sets the chart back to the initial mode at which it was rendered. </td>
</tr>
<tr >
<td valign="top" class="codeInline"><a name="fittostage" id="fittostage"></a>fitToStage()</td>
<td valign="top">None</td>
<td class="text">Sets the chart's zoom level for best possible view on the stage. </td>
</tr>
<tr >
<td width="20%" valign="top" class="codeInline">rotateView(x,y)</td>
<td width="15%" valign="top" class="codeInline">x,y </td>
<td width="65%" class="text">This function lets you rotate the camera view angle. Relatively, we will see the chart to rotate. When <span class="codeInline">animate3D</span> is set to 1, the chart animates to reach the x and y angle position of the camera. In case of <span class="codeInline">animate3D=0</span>, the view angles are set instantly without animation. </td>
</tr>
<tr>
<td valign="top" class="codeInline">getViewAngles()</td>
<td valign="top" class="text">None</td>
<td class="text">This function returns the current view or camera angles of the chart. The function returns an object with 2 properties, <span class="codeInline">xAng</span> and <span class="codeInline">yAng</span>. <span class="codeInline">xAng</span> stores the value of x angle while <span class="codeInline">yAng</span> stores the value of y angle.
<p>Example:</p>
<span class="codeInline"> var a=getViewAngles();<br />
alert(a.xAng);<br />
alert(a.yAng);</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td valign="top" class="header">Usage Example:</td>
</tr>
<tr>
<td valign="top" class="text"><p>Given below are the examples of how to use these functions using JavaScript.</p>
<p class="highlightBlock">You can also experience these API live from the consolidated example clicking <a href="../../../../Code/JavaScript/Combi3D_JSAPI/index.html" target="_blank">here</a>. </p>
<p class="header" style="padding:3px;"><strong class="codeInline"><a name="view2d" id="view2d"></a>view2D()</strong></p></td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container"><HTML>
<HEAD>
<TITLE>FusionCharts XT and JavaScript - Combi3D chart - View 2D Example</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="../../Charts/FusionCharts.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function viewAs2D()
{
<span class="codeComment">//Get chart from its ID</span>
var chartToView2D = getChartFromId("chart1Id");
chartToView2D.<strong>view2D</strong>();
}
</SCRIPT>
</HEAD>
<BODY>
<div id="chart1div">FusionCharts XT</div>
<script language="JavaScript">
var chart1 = new FusionCharts("../../Charts/MSCombi3D.swf", "chart1Id", "400", "300", "0", "1");
chart1.setXMLData("<chart ><categories><category label='A' /></categories><dataset><set label='A' value='10' /></dataset>
<dataset><set label='B' value='11' /></dataset></chart>");
chart1.render("chart1div");
</script>
<input type='button' value='2D View' onClick='view2D();'>
</BODY>
</HTML></pre> </td>
</tr>
<tr>
<td valign="top" class="text"><p>In the above code, we have first created a True 3D chart with DOMId as <span class="codeInline">chart1Id</span>. Thereafter, we have created an HTML button, which when clicked invokes the local <span class="codeInline">viewAs2D()</span> function. This function just gets the reference to the chart using <span class="codeInline">getChartFromId()</span> function and finally invokes the <span class="codeInline">view2D()</span> method of the chart.</p>
<p>See it <a href="../../../../Code/JavaScript/Combi3D_JSAPI/view2D.html" target="_blank" class="">live</a>! </p>
<p class="header" style="padding:3px;"><a name="view3d" id="view3d"></a><strong class="codeInline">view3D()</strong></p></td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container"><HTML>
<HEAD>
<TITLE>FusionCharts XT and JavaScript - Combi3D chart - View 3D Example</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function viewAs3D()
{
<span class="codeComment">//Get chart from its ID</span>
var chartToView3D = getChartFromId("chart1Id");
chartToView3D.<strong>view3D</strong>();
}
</SCRIPT>
</HEAD>
<BODY>
<h5>Please drag the chart to another view, then set to 2D View mode and click on '3D View' button to get the desired result</h5>
<div id="chart1div">FusionCharts XT</div>
<script language="JavaScript"><br/>
var chart1 = new FusionCharts("../../Charts/MSCombi3D.swf", "chart1Id", "400", "300", "0", "1");
chart1.setXMLData("<chart ><categories><category label='A' /></categories><dataset><set label='A' value='10'/></dataset>
<dataset><set label='B' value='11' /></dataset></chart>");
chart1.render("chart1div");
</script>
<input type='button' value='3D View' onClick='view3D();'>
</BODY>
</HTML></pre>
</td>
</tr>
<tr>
<td valign="top" class="text">
<p>In the above code, we have first created a True 3D chart with DOMId as <span class="codeInline">chart1Id</span>. Thereafter, we have created an HTML button.</p>
<p><span class="codeInline">View3D() </span>function sets the chart to the last 3D Mode of the chart, before it has been set to 2D mode. Hence, before calling the function one must use mouse or <span class="codeInline">rotateView()</span> function to give the chart a different 3D state. Now, the chart needs to be set to 'View 2D' mode. Once done, one can properly use this function.</p>
<p>Now, when the button is clicked the local <span class="codeInline">viewAs3D()</span> function is invoked. This function just gets the reference to the chart using <span class="codeInline">getChartFromId()</span> function and finally invokes the<span class="codeInline"> view3D()</span> method on the chart and resets the chart to the last 3D view. </p>
<p>See it <a href="../../../../Code/JavaScript/Combi3D_JSAPI/view3D.html" target="_blank" class="">live</a>! </p>
<p class="header" style="padding:3px;"><strong class="codeInline"><a name="view100" id="view100"></a>view100Percent()</strong></p>
</tr>
<tr>
<td valign="top" class="text">
<pre class="prettyprint code_container"><HTML>
<HEAD>
<TITLE>FusionCharts XT and JavaScript - Combi3D chart - View 100 Percent Example</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function view100()
{
<span class="codeComment"> //Get chart from its ID</span>
var chartToReset3DView = getChartFromId("chart1Id");
chartToReset3DView.view100Percent();
}
</SCRIPT>
</HEAD>
<BODY>
<div id="chart1div">FusionCharts</div>
<script language="JavaScript">
var chart1 = new FusionCharts("../../Charts/MSCombi3D.swf", "chart1Id", "400", "300", "0", "1");
chart1.setXMLData("<chart ><categories><category label='A' /></categories><dataset><set label='A' value='10' /></dataset>
<dataset><set label='B' value='11' /></dataset></chart>");
chart1.render("chart1div");
</script>
<input type='button' value=View 100 Percent' onClick='view100();'>
</BODY>
</HTML></pre>
<p>In the above code, we've created a True 3D chart with DOM Id as <span class="codeInline">chart1Id</span>. Thereafter, we've created an HTML button to call <span class="codeInline">View100 </span>JavaScript function. This function invokes <span class="codeInline">view100Percent()</span> function and sets the chart to 100 percent view.</p>
<p>See it <a href="../../../../Code/JavaScript/Combi3D_JSAPI/view100.html" target="_blank" class="">live</a>! </p>
<p class="header" style="padding:3px;"><strong class="codeInline"><a name="resetview" id="resetview"></a>resetView()</strong></p></td>
</tr>
<tr>
<td valign="top" class="text">
<pre class="prettyprint code_container"><HTML>
<HEAD>
<TITLE>FusionCharts XT and JavaScript - Combi3D chart - Reset 3D View Example</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function reset3DView()
{
<span class="codeComment"> //Get chart from its ID</span>
var chartToReset3DView = getChartFromId("chart1Id");
chartToReset3DView.<span class="codeInline"><strong>resetView</strong></span>();
}
</SCRIPT>
</HEAD>
<BODY>
<div id="chart1div">FusionCharts XT</div>
<script language="JavaScript">
var chart1 = new FusionCharts("../../Charts/MSCombi3D.swf", "chart1Id", "400", "300", "0", "1");
chart1.setXMLData("<chart ><categories><category label='A' /></categories><dataset><set label='A' value='10' /></dataset>
<dataset><set label='B' value='11' /></dataset></chart>");
chart1.render("chart1div");
</script>
<input type='button' value='Reset to Initial View' onClick='reset3DView();'>
</BODY>
</HTML></pre>
</td>
</tr>
<tr>
<td valign="top" class="text"><p>In the above code, we have first created a True 3D chart with DOM Id as <span class="codeInline">chart1Id</span>. Thereafter, we have created an HTML button, which when clicked invokes the local <span class="codeInline">reset3DView()</span> function. This function just gets the reference to the chart using <span class="codeInline">getChartFromId()</span> function and finally invokes the<span class="codeInline"> resetView()</span> method on the chart.</p>
<p>See it <a href="../../../../Code/JavaScript/Combi3D_JSAPI/resetView.html" target="_blank" class="">live</a>! </p>
<p class="header" style="padding:3px;"><strong class="codeInline"><a name="rotateview" id="rotateview"></a>rotateView(x,y)</strong></p>
</td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container"><HTML>
<HEAD>
<TITLE>FusionCharts XT and JavaScript - Combi3D chart - Rotate Chart Example</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function rotateBy(xAngle,yAngle)
{
<span class="codeComment"> //Get chart from its ID</span>
var chartToRotate = getChartFromId("chart1Id");
chartToRotate.<span class="codeInline"><strong>rotateView</strong></span><strong>(xAngle,yAngle);</strong>
}
</SCRIPT>
</HEAD>
<BODY>
<div id="chart1div">FusionCharts XT</div>
<script type="text/javascript">
var chart1 = new FusionCharts("../../Charts/MSCombi3D.swf", "chart1Id", "400", "300", "0", "1");
chart1.setXMLData("<chart ><categories><category label='A' /></categories><dataset><set label='A' value='10' /></dataset>
<dataset><set label='B' value='11' /></dataset></chart>");
chart1.render("chart1div");
</script>
<strong>Rotate Chart To</strong><br />
xAngle Value: <input type="text" id="xAngle" /><br />
yAngle Value: <input type="text" id="yAngle"/><br />
<input type="button" value="Rotate Chart" id="btnRotate"
onClick="rotate(document.getElementById('xAngle').value,document.getElementById('yAngle').value);" />
</BODY>
</HTML></pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>In the above code, we have first created a True 3D chart with DOM Id as <span class="codeInline">chart1Id</span>. Thereafter, we have created an HTML button, which when clicked invokes the local <span class="codeInline">rotateBy(xAngle,yAngle)</span> function. This function just gets the reference to the chart using <span class="codeInline">getChartFromId()</span> function and finally invokes the<span class="codeInline"> rotateView(x,y)</span> method on the chart.</p>
<p>See it <a href="../../../../Code/JavaScript/Combi3D_JSAPI/rotateView.html" target="_blank" class="">live</a>! </p>
<p class="header" style="padding:3px;"><strong class="codeInline"><a name="getviewangles" id="getviewangles"></a>Object getViewAngles()</strong></p></td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container"><HTML>
<HEAD>
<TITLE>FusionCharts XT and JavaScript - Combi3D chart - Get Angles Example</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function getAngles()
{
<span class="codeComment"> //Get chart from its ID</span>
var chart = getChartFromId("chart1Id");
<strong> var vAngles=chart.getViewAngles();</strong>
<strong> alert("X :"+ vAngles.xAng + ", Y :"+ vAngles.yAng);</strong>
}
</SCRIPT>
</HEAD>
<BODY>
<div id="chart1div">FusionCharts XT</div>
<script language="JavaScript">
var chart1 = new FusionCharts("../../Charts/MSCombi3D.swf", "chart1Id", "400", "300", "0", "1");
chart1.setXMLData("<chart><categories><category label='A'/></categories><dataset><set label='A' value='10'/></dataset>
<dataset><set label='B' value='11'/></dataset></chart>");
chart1.render("chart1div");
</script>
<input type='button' value='Get Current Angles' onClick='getAngles();'>
</BODY>
</HTML></pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>In the above code, we have first created a True 3D chart with DOM Id as <span class="codeInline">chart1Id</span>. Thereafter, we have created an HTML button, which when clicked invokes the local <span class="codeInline">getAngles()</span> function. This function just gets the reference to the chart using <span class="codeInline">getChartFromId()</span> function and finally invokes the<span class="codeInline"> getViewAngles()</span> method on the chart. This function returns an object that has two properties: <span class="codeInline">xAng</span>, which gives the camera angle for x-axis, and <span class="codeInline">yAng</span>, gives the camera angle for y-axis. These two properties are encapsulated in the object.</p>
<p>See it <a href="../../../../Code/JavaScript/Combi3D_JSAPI/getViewAngles.html" target="_blank" class="">live</a>! </p>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("API Reference - Events|../Events.html","Zoom chart JavaScript API|ZoomLine_JSAPI.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>