Fusincharts events can be subscribed by attaching scope functions to event attributes.
All the events attributes start with fcevent-
followed by the event name in lowercase

Usage in template :

`xml
width="400"
height="400"
type="column2d"
datasource="{{myDataSource}}"
fcevent-dataplotrollover="rollover(event, args)">

`

In the given above template, rollover is the scope function that needs to be defined in the controller's code.

For more on this read here

`js
var app = angular.module('myApp', ['ng-fusioncharts']);

app.controller('MyController', function($scope) {
$scope.myDataSource = {
chart: {
caption: 'Countries With Most Oil Reserves [2017-18]',
subCaption: 'In MMbbl = One Million barrels',
xAxisName: 'Country',
yAxisName: 'Reserves (MMbbl)',
numberSuffix: 'K',
theme: 'fusion'
},
data: [
{ label: 'Venezuela', value: '290' },
{ label: 'Saudi', value: '260' },
{ label: 'Canada', value: '180' },
{ label: 'Iran', value: '140' },
{ label: 'Russia', value: '115' },
{ label: 'UAE', value: '100' },
{ label: 'US', value: '30' },
{ label: 'China', value: '30' }
]
};

$scope.rollover = function(event, data) {
console.log(event, data);
};
});
`

Get the list of fusioncharts' events

Working with APIs

FusionCharts chart instance is made available from the initialized event. It provides the chart instance as a parameter which can be used to call FusionCharts methods.

In template, we add initialized event

`xml
width="400"
height="400"
type="column2d"
datasource="{{myDataSource}}"
initialized="onInitialized(chart)">

Change Chart Caption
`

In order to use the chart instance, we need to store it.

`js
var app = angular.module('myApp', ['ng-fusioncharts']);

app.controller('MyController', function($scope){
var chart;
$scope.datasource = {
...// same data as above
};

$scope.onInitialized = function(chartObj){
chart = chartObj;
}

$scope.changeCaption = function(){
chart.setChartAttribute('caption', 'Caption changed');
}
});
`

In the given above example, clicking the button changes the caption text to Caption changed

Get the list of fusioncharts' methods

Usage and integration of FusionTime

From fusioncharts@3.13.3-sr.1 and angularjs-fusioncharts@5.0.0, You can visualize timeseries data easily with angular.

Learn more about FusionTime here.

$3

If you've included angular-fusioncharts.js and fusioncharts in your html
then add the following script tag:

In your index.html

`xml
...

...
`

In your script.js

`js
// If you haven't imported angulajs, angularjs-fusioncharts and fusioncharts in your html file and used require() syntax instead then add the following code from START to END:

// START
var angular = require('angular');
var FusionCharts = require('fusioncharts');
require('angularjs-fusioncharts');

// Require TimeSeries module
var TimeSeries = require('fusioncharts/fusioncharts.timeseries');

// Initialize Charts with FusionCharts instance
TimeSeries(FusionCharts);
var app = angular.module('myApp', ['ng-fusioncharts']);
// END

var jsonify = res => res.json();
var dataFetch = fetch(
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json'
).then(jsonify);
var schemaFetch = fetch(
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json'
).then(jsonify);

var app = angular.module('myApp', ['ng-fusioncharts']);

app.controller('MyController', function($scope) {
$scope.dataSource = {
data: null,
caption: {
text: 'Sales Analysis'
},
subcaption: {
text: 'Grocery'
},
yAxis: [
{
plot: {
value: 'Grocery Sales Value',
type: 'line'
},
format: {
prefix: '$'
},
title: 'Sale Value'
}
]
};

Promise.all([dataFetch, schemaFetch]).then(res => {
const data = res[0];
const schema = res[1];
const fusionTable = new FusionCharts.DataStore().createDataTable(
data,
schema
);
$scope.$apply(function() {
$scope.dataSource.data = fusionTable;
});
});
});
`

Use a bundler like browserify to bundle the script
See the installation docs here

`bash
$ browserify script.js -o bundle.js
`

Again in your index.html

`xml