The angular gauge in FusionWidgets XT suite can also act as an input control, allowing users to visually drag & change the value of dial. Once the value is updated, it can be retrieved from the chart using client-side JavaScript.

Here, we'll see how to do the same.

Setting editMode to 1

We need to tell the chart to switch the edit mode on. This can be done either at the global level using:

<chart ... editMode='1' ...>
{
"chart": { ...
"editmode": "1"
...
},

This makes all the dials present on the chart editable.

Or, you can make individual dials editable using:

<dial ... editMode='1' ...>
"dial": [ { ...  "editmode": "1" ...   } ]

This makes the particular dial on the chart editable. The user can now drag and rotate the dial to change its value.

JavaScript Event & Retrieving value

Once the user has changed the value of the gauge, the chart automatically calls FC_ChartUpdated(DOMId) JavaScript function.

You'll have to define this method in your HTML page and then write JavaScript code to retrieve the data using getData(index) or getDataForId(id) method. Let's quickly see an example.

An Example

We'll build a simple example to let the user choose his satisfaction % using an angular gauge chart. Once he has selected the value, we'll simply display it within the HTML page.

In your real-life application, you could use the return value to assign to a hidden form field and then submit the form to server-side scripts for processing.

The chart will use the following XML:

<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>
<styles>
<definition>
<style type="font" name="myValueFont" bgColor="F1f1f1" borderColor="999999"/>
</definition>
<application>
<apply toObject="Value" styles="myValueFont"/>
</application>
</styles>
</chart>
{
  "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"
      },
      {
        "minvalue": "75",
        "maxvalue": "90",
        "code": "F6BD0F"
      },
      {
        "minvalue": "90",
        "maxvalue": "100",
        "code": "8BBA00"
      }
    ]
  },
  "dials": {
    "dial": [
      {
        "id": "CS",
        "value": "92",
        "rearextension": "10"
      }
    ]
  },
  "styles": {
    "definition": [
      {
        "type": "font",
        "name": "myValueFont",
        "bgcolor": "F1f1f1",
        "bordercolor": "999999"
      }
    ],
    "application": [
      {
        "toobject": "Value",
        "styles": "myValueFont"
      }
    ]
  }
}
 
Here, we've defined 1 editable dial (with ID as CS). When you run this chart, it will look as under:
 

Let's now look at the HTML + JavaScript code required to retrieve data from this dial when user changes the value. We create an HTML page with the following code.

This page is present in Download Package > Code > AngularGauge > EditMode.html

<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 changed value
					var dialValue = chartRef.getData(1);
					//Update our display
					var divToUpdate = document.getElementById("contentDiv");
					divToUpdate.innerHTML = "<span class='text'>Your satisfaction index: <b>" + Math.floor(dialValue) + "%</b></span>";
				}
			}
		</script>
	</head>
	<body>
	<center>
		<div id="chart1div">
			This text is replaced by the chart.
		</div>
		<script type="text/javascript">
			var chart1 = new FusionCharts("../Charts/AngularGauge.swf", "ChId1", "350", "190", "0", "1");
			chart1.setXMLUrl("Data.xml");
			chart1.render("chart1div");
		</script>
		<div id="contentDiv">
			<span class='text'>Please drag the dial above to indicate your satisfaction index.
		</div>
	</center>
	</body>
</html>

Here, we've done the following:

  1. Initialized an angular gauge with data provided by Data.xml (containing the data listed above). The XML contains editMode='1'.
  2. Defined the FC_ChartUpdated(DOMId) JavaScript function and added code to retrieve chart's updated value and display the value in an HTML element.

FC_ChartUpdated is called whenever a dial's value is updated. In this function we have done the following:

  1. Check if the event was raised by our chart. This is done by matching the DOM Id of the chart.
  2. Retrieve the new data of the chart using getData(dialIndex) method. This method returns the numeric value of a particular dial based on its dial index. The first dial on the chart bears an index of 1, second 2 and so on.
  3. Change the content of the contentDiv to show this value (for demo purpose).

When the above code is executed, the chart renders in edit mode and the dial can be dragged to any value. Whenever the dial value is changed, the chart calls FC_ChartUpdated(DOMId) JavaScript function, which retrieves the new data using the getData(dialIndex) method and displays this value in a DIV, as shown in the following image:

Instead of the getData(index) method, you can also use the getDataForId(dialId) method to retrieve dial's value as under:

var dialValue = chartRef.getDataForId("CS");

Here, CS was the dial ID we had specified in XML.

Making use of 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 gauges 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 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 );
	}
);

So, you just saw how easy it is to create editable angular gauges using FusionWidgets XT.