The angular gauge chart 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(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.

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 an Angular gauge is updated with data:

<html>
	<head>
		<title>FusionWidgets XT 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 = FusionCharts(DOMId);
					//Get the current value
					var dialValue = chartRef.getData(1);
					//You can also use getDataForId method as commented below, to get the dial value.
					//var dialValue = chartRef.getDataForId("CS");
					//Update display
					var divToUpdate = document.getElementById("contentDiv");
					divToUpdate.innerHTML = "<span class='text'>Your satisfaction index: <B>" + Math.round(dialValue) + "%</B></span>";
				}
			}
		</script>
	</head>
	<body>
		<div id="chartContainer">FusionWidgets XT will load here</div>
		<div id="contentDiv">Drag and move the dial to indicate your satisfaction index. The new value will be updated here.</div> 						
		<script type="text/javascript"><!--
			// Define data for the gauge
			var editModeXML ='<chart lowerLimit="0" upperLimit="100" lowerLimitDisplay="Bad" upperLimitDisplay="Good" ' +
			'	gaugeStartAngle="180" gaugeEndAngle="0" palette="1" numberSuffix="%" ' +
			'	tickValueDistance="20" showValue="1" decimals="0" editMode="1">' +
			'<colorRange>' +
			'	<color minValue="0" maxValue="75" code="FF654F"/>' +
			'	<color minValue="75" maxValue="90" code="F6BD0F"/>' +
			'	<color minValue="90" maxValue="100" code="8BBA00"/>' +
			'</colorRange>' +
			'<dials>' +
			'	<dial id="CS" value="92" rearExtension="10"/>' +
			'</dials>' +
			'</chart>';
			// Render chart
			var chart1 = new FusionCharts("../../Charts/AngularGauge.swf", "ChId1", "400", "200", "0", "1");
			chart1.setXMLData(editModeXML);
			chart1.render("chartContainer");
		// -->
		</script>
	</body>
</html>

See it live!

Making use of the new real-time update event

FusionWidgets XT 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( "Your satisfaction index: " + event.sender.getData(1) + "%" );
        }  
      );

See it live!

Existing JavaScript implementations using the 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 the 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.