FusionWidgets v3 Documentation

Angular Gauge > JavaScript API

The angular gauge chart exposes the following JavaScript APIs:

Function Name	Parameter	Description
FusionWidgets general JavaScript API
setDataURL(strURL)	strURL	Sets the chart to update its data from the specified URL
setDataXML(strXML)	strXML	Sets the chart to update its data from the given string containing XML data

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(dialIndex)	dialIndex	This method returns the data for the given dial index on the chart. The first dial is represented by index 1, second by 2 and so on.
getDataForId(dialId)	dialId	This method returns the data for the given dial using its defined ID. The ID of the dial is defined in XML using: <dial ... id='XYZ' ...>
setData(dialIndex, value)	dialIndex, value	This method sets the data for the given dial index on the chart. The first dial is represented by index 1, second by 2 and so on.
setDataForId(dialId, value)	dialId, value	This method returns the data for the given dial using its defined ID. The ID of the dial is defined in XML using: <dial ... id='XYZ' ...>
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.

To use any of the methods above, you'll first need to register the chart with JavaScript by setting registerWithJS flag to 1, as under.

(Note the last parameter set as 1)

var chart1 = new FusionCharts("AngularGauge.swf", "ChId1", "350", "190", "0", "1");

Thereafter, you can refer to the chart using its DOM Id and call any of these methods as shown below:

<HTML>
<HEAD>
   <TITLE>FusionWidgets v3 - Edit Mode</TITLE>
   <script type="text/javascript" src="../Charts/FusionCharts.js"></script>
   <script language="javascript">
      //FC_ChartUpdated method is called when user has changed dial value.
      function FC_ChartUpdated(DOMId){
         //Check if DOMId is that of the chart we want
         if (DOMId=="ChId1"){
            //Get reference to the chart
            var chartRef = getChartFromId(DOMId);
            //Get the changed value
            var dialValue = chartRef.getData(1);
           ... Do what your application demands...
         }
      }
   </script>
</HEAD>
<BODY>
   <CENTER>
      <div id="chart1div">
         This text is replaced by the Flash movie.
      </div>
      <script type="text/javascript">
         var chart1 = new FusionCharts("../Charts/AngularGauge.swf", "ChId1", "350", "190", "0", "1");
         chart1.setDataURL("Data.xml");
         chart1.render("chart1div");
      </script>
</BODY>
</HTML>

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

You've set registerWithJS flag as 1 in the chart's constructor method.
You've not placed the chart inside a FORM element. When the chart is inside a FORM element, the browser cannot access the chart using DOM.
Make sure that you're not calling the JavaScript method before the chart has loaded and rendered. You need to use FC_Rendered function of chart to track the loading of chart as explained in the section "FusionWidgets and JavaScript"
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.