You are viewing documentation for an older version. For current documentation - click here.
JavaScript API

The Cylinder gauge exposes the following JavaScript APIs:

Function Name Parameter Description
 
FusionWidgets XT general JavaScript API
The common JavaScript API for all charts, along with the deprecated functions - setDataURL and setDataXML, are discussed in FusionWidgets XT and JavaScript section.
     
Chart related APIs
feedData(strData) strData This method feeds real-time data to chart using JavaScript. The data has to be in the same format as provided by real-time data provider page.
getData()   This method returns the data currently being shown by the gauge.
setData(value) value This method sets the data for the chart. The value should be within the limits of the gauge.
stopUpdate() None This method stops the chart from self-updating itself.
restartUpdate() None If you've stopped the update of the chart, you can resume the update using this method.
     
Message logger related APIs
showLog() None This method shows the message logger, if it was previously hidden.
hideLog() None This method hides the message logger, if it's visible.
clearLog() None This method clears the message log contents.

Additionally, you can control the annotations using JavaScript API, which has been discussed in the annotations sections.
Using these methods

To use any of these methods, you need to refer to the chart and then call any of these methods. To refer to a chart, you can use the DOMID of the chart and pass it using any of the following ways:

var chartRef = FusionCharts("myChartId");

or

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

The legacy function getChartFromId() still works as show below:

var chartRef =  getChartFromId("myChartId");

However, note that getChartFromId() has been deprecated.

You can call the JavaScript APIs of a chart only after it has rendered. You can use the FC_Rendered event tracker or the Rendered event listener to check if a chart has rendered. For more information, please see FusionWidgets XT and JavaScript section.

The example below shows how to call getData() when a Cylinder gauge is updated with data in real-time:

 
<html>
      <head>
         <title>FusionWidgets XT - JS API</title>
         <script type="text/javascript"   src="../Charts/FusionCharts.js"></script>
         <script language="javascript">
            //FC_ChartUpdated   method is called when chart has changed  value in real-time. 
            function FC_ChartUpdated(DOMId){
               //Check if DOMId is that of the chart we want
               if (DOMId=="ChId1"){
                  //Get reference to the chart
                  var chartRef = FusionCharts(DOMId);
                  //Get the changed   value
                  var chartValue = chartRef.getData(); 
                 //... Do what your application demands... 
               }
            } 
         </script>
      </head>
      <body>
            <div id="chart1div">This text is replaced by the cylinder gauge</div>
            <script type="text/javascript">
               var chart1 = new   FusionCharts("../Charts/Cylinder.swf", "ChId1", "150", "300", "0", "1");
               chart1.setXMLUrl("Data.xml");
               chart1.render("chart1div");
            </script>
      </body>
</html>
 
Making use of the new real-time update event

FusionWidgets XT (v3.2) introduces two new events to track real-time updates on charts and gauges. The names of the two events are: RealtimeUpdateComplete and RealtimeUpdateError.

RealtimeUpdateComplete event is raised when a real-time gauge or chart completes updating data.

Example implementation:

      FusionCharts("myChartId").addEventListener ("RealtimeUpdateComplete" , 
        function(event, parameter) 
        {
          alert( "Updated value : " + event.sender.getData() );
        }  
      );

Existing JavaScript implementations using FC_ChartUpdated event will continue to function without any problem.

RealtimeUpdateError event is raised when an error occurs while updating data in a real-time gauge or chart. This event passes the HTTP Status (as number) of the error occurred.

Example implementation:

      FusionCharts("myChartId").addEventListener ("RealtimeUpdateError" , 
        function(event, parameter) 
        {
          alert( "Problem occurred while updating real-time data. The error status code is" +  parameter.httpStatus );
        }  
      );
 
Troubleshooting

While accessing any of the JavaScript methods listed above, if you get an error like "... is not a function of ...", make sure of the following points:

  • Make sure that you're not calling the JavaScript method before the chart has loaded and rendered. You need to use FC_Rendered function or define event listener for Rendered event of chart to track the loading of chart as explained in the FusionWidgets XT and JavaScript section.
  • Make sure that you're NOT running the chart from local file system (C:\ , D:\). Instead, run the chart from behind a server (localhost - IIS, Apache etc.). This is because the Flash Player security settings do not allow chart to JavaScript interaction on local file system by default, unless otherwise specifically set.