AngularJS Live Example
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=838"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<html ng-app="HelloApp">
<body>
<div ng-controller="ChartController">
<fusioncharts id="chartcontainer" chartid="chart1" width="100%" height="400" type="column2d" dataFormat='json' dataSource="{{MonthelyEligibilityDataSource}}">Awesome chart on its way!</fusioncharts>
</div>
</body>
</html>
JavaScript
var app = angular.module('HelloApp', ["ng-fusioncharts"])
app.controller('ChartController', function($scope) {
$scope.MonthelyEligibilityDataSource = {
chart: {
caption: "Average Eligibility",
subcaption: "",
xAxisName: "Month (Click to drill down)",
yAxisName: "Number of Employee",
numberPrefix: "",
theme: "fint",
plotSpacePercent: ""
},
data: [{
label: "Aug 2016",
value: "0",
link: "newchart-json-82016"
}, {
label: "Sep 2016",
value: "0",
link: "newchart-json-92016"
}, {
label: "Oct 2016",
value: "0",
link: "newchart-json-102016"
}, {
label: "Nov 2016",
value: "0",
link: "newchart-json-112016"
}, {
label: "Dec 2016",
value: "0",
link: "newchart-json-122016"
}, {
label: "Jan 2017",
value: "0",
link: "newchart-json-12017"
}, {
label: "Feb 2017",
value: "0",
link: "newchart-json-22017"
}, {
label: "Mar 2017",
value: "0",
link: "newchart-json-32017"
}, {
label: "Apr 2017",
value: "0",
link: "newchart-json-42017"
}, {
label: "May 2017",
value: "0",
link: "newchart-json-52017"
}, {
label: "Jun 2017",
value: "0",
link: "newchart-json-62017"
}, {
label: "Jul 2017",
value: "24",
link: "newchart-json-72017"
}, {
label: "Aug 2017",
value: "168",
link: "newchart-json-82017"
}],
linkeddata: [{
Id: "82016",
linkedchart: {
chart: {
caption: "Eligibility Monthly Revenue - Aug 2016",
subcaption: "",
xAxisName: "Company",
yAxisName: "Number of Employee",
numberPrefix: "",
theme: "fint",
plotSpacePercent: ""
},
data: []
}
}, {
Id: "92016",
linkedchart: {
chart: {
caption: "Eligibility Monthly...