Getting chart reference

Once a chart is rendered, you might want to do a lot of things with it. You might wish to update the data, get data from it, print it, export it to image/pdf, add event listener to it, change its setting or resize it. You may even want to clone it, remove it or obtain information like - chart type, id, width, height, version signature etc. You might be interested to know whether the chart has rendered or not, whether the chart is visible or see if it is active. To achieve all these, first, you must get the reference to the chart object i.e., handler of the chart. Next, you do the desired operation on it.

Here, in this page, we will learn how to get the reference to a chart object.

Code examples discussed in this section are present in Download Package > Code > JavaScript > Basics folder.

Get reference to the chart object

There are numerous ways of getting the reference to a chart object. On a broader level, you can get two types of references:

  1. the reference to the JavaScript Object that acts as a wrapper of the chart (i.e., JavaScript variable), and
  2. the reference to chart HTML Object which is embedded in the web page (i.e., chart SWF Object)

Get JavaScript Object reference

To get the reference to the JavaScript object you can do one of the following:

1. Using JavaScript global variable name

If you have declared the JavaScript object in global-scope when instantiating the chart, you can use the the JavaScript object's name as the reference.

Click here to see full code and view it live » 
<html>
  <head>
    <title>Get chart reference from variable in JS Global Scope</title>
    <script type="text/javascript" src="FusionCharts/FusionCharts.js">
    </script>
  </head>
  <body>
    <div id="chartContainer">FusionCharts will load here!</div>
    <script type="text/javascript"><!--

      var myChart = new FusionCharts( "FusionCharts/Column3D.swf", 
      "myChartId", "400", "300", "0", "1" );
      myChart.setXMLUrl("Data.xml");
      myChart.render("chartContainer");

    // -->
    </script>
    <input type="button" onclick="myChart.print();" value="Print">

  </body>
</html>

See it live!


2. Using FusionCharts.items[] static Array

FusionCharts.items[] is an associative array that stores all the charts rendered in a page. The DOMId is represented by the key and the JavaScript chart object is the respective value. If you pass the DOMId of the chart to this array, you will get the reference to the JavaScript Object of the related chart.

var chart = FusionCharts.items["myChartId"];

3. Using FusionCharts() function

You can also pass the chart's DOMId to FusionCharts(). Like FusionCharts.items[], FusionCharts() also returns the JavaScript Object of the chart.

var chart = FusionCharts("myChartId");

It is recommenced to use one of the above mentioned methods to get JavaScript Object reference of the charts.

The other methods, as explained below, of getting the reference of the chart HTML Object are not recommended as HTML Object provides limited interactive features.


4. Using legacy function: getChartFromId(DOMId)

The legacy function getChartFromId() still works. It is a global function (i.e. it can be accessed from global/window scope) that returns the chart's Object (reference to chart SWF object). 

var chart = getChartFromId( DOMId );

getChartFromId() has been deprecated

Get HTML Object reference

To get the reference to the chart HTML object you can use the following function:

1. FusionCharts.getObjectReference(DOMId)

getObjectReference() is static function of FusionCharts class. Like getChartFromId() it also returns the chart's HTML Object when chart's DOMId is passed to it as parameter. 

var chart = FusionCharts.getObjectReference( DOMId );
Complete Reference to all the properties, functions and events of FusionCharts classes is provided in API Reference section.