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. This function will not work if the current view is already in 2D mode.
view3D()	None	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.
view100Percent() Since v 3.2.2	None	Sets the chart view to 100% mode.
resetView()	None	Sets the chart back to the initial mode at which it was rendered.
fitToStage()	None	Sets 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 will 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 or 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);

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.

<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()
            {
               //Get chart from its ID
                var chartToView2D = getChartFromId("chart1Id");
         chartToView2D.view2D();
      }
      </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>

In the above code, we have first created a True 3D chart with DOMId as chart1Id. Thereafter, we have created an 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.

See it live!

<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()
            {
               //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 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='3D View' onClick='view3D();'>
    </BODY>
</HTML>

In the above code, we have first created a True 3D chart with DOMId as chart1Id. Thereafter, we have created an 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.

See it live!

<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()
              {
                 //Get chart from its ID
                 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>

In the above code, we've created a True 3D chart with DOM Id as chart1Id. Thereafter, we've created an HTML button to call View100 JavaScript function. This function invokes view100Percent() function and sets the chart to 100 percent view.

See it live!

<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()
              {
                 //Get chart from its ID
                 var chartToReset3DView = getChartFromId("chart1Id");
                 chartToReset3DView.resetView();
              }
      </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>

In the above code, we have first created a True 3D chart with DOM Id as chart1Id. Thereafter, we have created an 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.

See it live!

<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)
      {
         //Get chart from its ID
         var chartToRotate = getChartFromId("chart1Id");
         chartToRotate.rotateView(xAngle,yAngle);
      }
    </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>

In the above code, we have first created a True 3D chart with DOM Id as chart1Id. Thereafter, we have created an 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.

See it live!

<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()
            {
               //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 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>

In the above code, we have first created a True 3D chart with DOM Id as chart1Id. Thereafter, we have created an 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.

See it live!