| JavaScript API | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
The angular gauge chart exposes the following JavaScript APIs: |
||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
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! |
|
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:
|