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):
Function Name Parameter Description
view2D() None Sets the chart to 2D-View mode.
view3D() None Sets the chart to the last 3D state before it has been set to 2D mode. This function is only apt calling when the current view mode is 2D.
resetView() None Sets the chart back to that very 3D mode at which it was rendered initially.
fitToStage() None Set the chart's zoom level for best possible view on the stage.
rotateView(x,y) x,y This function lets you rotate the camera view angle. Relatively, we would see the chart to rotate. When animate3D is set to 1, the chart animates to reach the x and y angle position of the camera. In case of animate3D=0, the view angles are set instantly without animation.
getViewAngles() None This function returns the current view/camera angles of the chart. The function returns an object with 2 properties, xAng and yAng. xAng stores the value of x angle while yAng stores the value of y angle.

Example:

  var a=getViewAngles();
  alert(a.xAng);
  alert(a.yAng);
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>
    <HEAD>
      <TITLE>FusionCharts &amp; JavaScript - Combi3D chart - View 2D Example</TITLE> 
      <SCRIPT LANGUAGE="Javascript" SRC="../../Charts/FusionCharts.js"></SCRIPT>
      <SCRIPT LANGUAGE="JavaScript">
            function viewAs2D()
            {
               //Get chart from its ID
                var chartToView2D = getChartFromId("chart1Id");
         chartToView2D.view2D();
      }
      </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='2D View' onClick='view2D();'>
    </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 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>
    <HEAD>
       <TITLE>FusionCharts &amp; JavaScript - Combi3D chart -  View 3D Example</TITLE> 
       <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
       <SCRIPT LANGUAGE="JavaScript">
            function viewAs3D()
            {
               //Get chart from its ID
               var chartToView3D = getChartFromId("chart1Id");
               chartToView3D.view3D();
            }
       </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</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='3D View' onClick='view3D();'>
    </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.

View3D() 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 rotateView() 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.

Now, when the button is clicked the local viewAs3D() function is invoked. This function just gets the reference to the chart using getChartFromId() function and finally invokes the view3D() method on the chart and resets the chart to the last 3D view.

resetView()

 
<HTML>
    <HEAD>
      <TITLE>FusionCharts &amp; JavaScript - Combi3D chart -  Reset 3D View Example</TITLE> 
      <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
      <SCRIPT LANGUAGE="JavaScript">
              function reset3DView()
              {
                 //Get chart from its ID
                 var chartToReset3DView = getChartFromId("chart1Id");
                 chartToReset3DView.resetView();
              }
      </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='Reset 3D View' onClick='reset3DView();'>
    </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 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 &amp; JavaScript - Combi3D chart -  Rotate Chart Example</TITLE> 
    <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/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.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>

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 &amp; JavaScript - Combi3D chart - Get Angles Example</TITLE> 
         <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/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.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>

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.