Combi3D Chart - JavaScript API |
||||||||||||||||||
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): | ||||||||||||||||||
|
||||||||||||||||||
Usage Example: |
||||||||||||||||||
Given below are the examples of how to use these functions using JavaScript. | ||||||||||||||||||
You can also experience these API live from the consolidated example clicking here. | ||||||||||||||||||
view2D() | ||||||||||||||||||
<HTML> |
||||||||||||||||||
In the above code, we've first created a Column 3D chart with DOM Id as chart1Id. We also register it with JavaScript. Thereafter, we've created a HTML button, which when clicked invokes the local viewAs2D() function. This function just gets the reference to the chart using getChartFromId() function and finally invokes the view2D() method of the chart. | ||||||||||||||||||
view3D() | ||||||||||||||||||
<HTML> |
||||||||||||||||||
In the above code, we've first created a Column 3D chart with DOM Id as chart1Id. We also register it with JavaScript. Thereafter, we've created a HTML button. |
||||||||||||||||||
resetView() | ||||||||||||||||||
<HTML> |
||||||||||||||||||
In the above code, we've first created a Column 3D chart with DOM Id as chart1Id. We also register it with JavaScript. Thereafter, we've created a HTML button, which when clicked invokes the local reset3DView() function. This function just gets the reference to the chart using getChartFromId() function and finally invokes the resetView() method on the chart. | ||||||||||||||||||
rotateView(x,y) | ||||||||||||||||||
<HTML> <HEAD> <TITLE>FusionCharts & JavaScript - Combi3D chart - Rotate Chart Example</TITLE> <SCRIPT LANGUAGE="Javascript" SRC="../../JSClass/FusionCharts.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function rotateBy(xAngle,yAngle) { //Get chart from its ID var chartToRotate = getChartFromId("chart1Id"); chartToRotate.rotateView(xAngle,yAngle); } </SCRIPT> </HEAD> <BODY> <div id="chart1div">FusionCharts</div> <script type="text/javascript"> var chart1 = new FusionCharts("../../Charts/MSCombi3D.swf", "chart1Id", "400", "300", "0", "1"); chart1.setDataXML("<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> |
||||||||||||||||||
In the above code, we've first created a Column 3D chart with DOM Id as chart1Id. We also register it with JavaScript. Thereafter, we've created a HTML button, which when clicked invokes the local rotateBy(xAngle,yAngle) function. This function just gets the reference to the chart using getChartFromId() function and finally invokes the rotateView(x,y) method on the chart. | ||||||||||||||||||
Object getViewAngles() | ||||||||||||||||||
<HTML> <HEAD> <TITLE>FusionCharts & JavaScript - Combi3D chart - Get Angles Example</TITLE> <SCRIPT LANGUAGE="Javascript" SRC="../../JSClass/FusionCharts.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function getAngles() { //Get chart from its ID var chart = getChartFromId("chart1Id"); var vAngles=chart.getViewAngles(); alert("X :"+ vAngles.xAng + ", Y :"+ vAngles.yAng); } </SCRIPT> </HEAD> <BODY> <div id="chart1div">FusionCharts</div> <script language="JavaScript"> var chart1 = new FusionCharts("../../Charts/MSCombi3D.swf", "chart1Id", "400", "300", "0", "1"); chart1.setDataXML("<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> |
||||||||||||||||||
In the above code, we've first created a Column 3D chart with DOM Id as chart1Id. We also register it with JavaScript. Thereafter, we've created a HTML button, which when clicked invokes the local getAngles() function. This function just gets the reference to the chart using getChartFromId() function and finally invokes the getViewAngles() method on the chart. This function returns an object that has two properties: xAng, which gives the camera angle for X-axis, and yAng, gives the camera angle for Y-axis. These two properties are encapsulated in the object. |