FusionWidgets v3 Documentation

Gauges > JavaScript API

The LED/Cylinder/Thermometer/Bulb gauge 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()		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.

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("HLED.swf", "ChId1", "350", "100", "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 - 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 = getChartFromId(DOMId);
            //Get the changed value
            var chartValue = chartRef.getData();
           ... 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/HLED.swf", "ChId1", "350", "100", "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.