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="https://fusioncharts.github.io/angularjs-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<html ng-app="HelloApp">
<body ng-controller="MyController">
<fusioncharts id="mychartcontainer" chartid="mychart" width="{{width}}" height="400" type="{{type}}" dataSource="{{dataSource}}"></fusioncharts>
<br>
<input type="submit" id="export" value="Export Chart">
</body>
</html>
JavaScript
var app = angular.module('HelloApp', ["ng-fusioncharts"])
app.controller('MyController', function($scope) {
$scope.type = "scrollColumn2d";
$scope.width = 600;
$scope.dataSource = {
"chart": {
"caption": "Sales Trends",
"subcaption": "FY 2012 - FY 2013",
"xaxisname": "Month",
"yaxisname": "Revenue",
"showvalues": "1",
"placeValuesInside": "1",
"rotateValues": "1",
"valueFontColor": "#ffffff",
"numberprefix": "$",
"exportEnabled": "1",
// Hide export menu item
"exportShowMenuItem": "0",
"theme": "fint"
},
"categories": [{
"category": [{
"label": "Jan 2012"
},
{
"label": "Feb 2012"
},
{
"label": "Mar 2012"
},
{
"label": "Apr 2012"
},
{
"label": "May 2012"
},
{
"label": "Jun 2012"
},
{
"label": "Jul 2012"
},
{
"label": "Aug 2012"
},
{
"label": "Sep 2012"
},
{
"label": "Oct 2012"
},
{
"label": "Nov 2012"
},
{
"label": "Dec 2012"
},
{
"label": "Jan 2013"
},
{
"label": "Feb 2013"
},
{
"label": "Mar 2013"
},
{
"label": "Apr 2013"
},
{
"label": "May 2013"
},
{
"label": "Jun 2013"
},
{
"label": "Jul 2013"
},
{
"label": "Aug 2013"
},
{
"label": "Sep 2013"
},
{
"label": "Oct 2013"
},
{
"label": "Nov 2013"
},
{
"label": "Dec 2013"
}
]
}],
"dataset": [{
"data": [{
"value": "27400"
},
{
"value": "29800"
},
...