| JavaScript API | ||||||||||||||||||||||||||||||||||||||||||||||||||||
The linear gauge 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 a Linear 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 = getChartFromId(DOMId);
//Get the current value
var pointerValue = 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(pointerValue) + "%</B></span>";
}
}
</script>
</head>
<body>
<div id="chartContainer">FusionWidgets XT will load here</div>
<div id="contentDiv">Drag and move the pointer 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" ' +
' numberSuffix="%" 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>' +
'<pointers>' +
' <pointer id="CS" value="92""/>' +
'</pointers>' +
'</chart>';
// Render chart
var chart1 = new FusionCharts("../../Charts/HLinearGauge.swf", "ChId1", "400", "100", "0", "1");
chart1.setXMLData(editModeXML);
chart1.render("chartContainer");
// -->
</script>
</body>
</html>
See it live! |
||||||||||||||||||||||||||||||||||||||||||||||||||||
|
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( "Your satisfaction index: " + event.sender.getData(1) + "%" );
}
);
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:
|
||||||||||||||||||||||||||||||||||||||||||||||||||||