Using Chart API

Most charts in FusionWidgets pack exposes methods that can be utilized in your Flash code, when loading those charts. For example, the angular gauge exposes methods to set and retrieve data for each dial, show/hide message loggers etc.

You can find the list of APIs of each chart in their respective "Flash API" or "JavaScript API" sections. Most of the JavaScript methods exposed can be used in Flash too.

Here, we'll see a simple example where we'll update the value of an angular gauge using its API, based on user input.

An example

We'll start this example from MyFirstChart.fla where we had built an angular gauge. We create a copy and save it as UpdateValue.fla in the same folder.

We'll now extend that example to include an input text field and a button in the movie. The users will be able to enter new value for the gauge in this textfield. And, when the button is pressed, we'll update the chart's value using its API.

Shown below is how the application will finally look:

As you can see above, we've an input text field (with variable name as chartValue). And we've a button with instance name as btnGo.

The code in Actions layer is still the same. In this movie, we add another layer named as "Button Actions" and add the following code to its first frame: 

var objListener:Object = new Object();
	objListener.click = function(){
	//Click handler for button. Here, we need to update chart value.
	//We've our reference of chart instance stored in myFirstChart.
	//Now, we can directly call myFirstChart.setValue(dialIndex, value)
	//Here, we set dialIndex as 1 as we've only 1 dial
	myFirstChart.setData(1, parseInt(chartValue));
}
btnGo.addEventListener("click",objListener);

Here, we've defined the click event handler for the button. In the handler method, we simply call the setData(index, value) method of the angular gauge and update its value.

Each chart exposes its own list of methods. For complete method list for each chart, see the "Flash API" or "JavaScript API" section of each chart.

When you now run the movie and update the value, you'll see that the chart behaves accordingly.