AngularJS Live Example

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/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="500" 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 = "gantt";
  $scope.width= 750;
  $scope.dataSource = {
        "chart": {
          "theme": "fusion",
          "caption": "New Store Opening - Project Plan",
          "subcaption": "Planned vs Actual",
          "dateformat": "dd/mm/yyyy",
          "outputdateformat": "ddds mns yy",
          "ganttwidthpercent": "60",
          "ganttPaneDuration": "40",
          "ganttPaneDurationUnit": "d",
          "plottooltext": "$processName{br}$label starting date $start{br}$label ending date $end",
          "legendBorderAlpha": "0",
          "legendShadow": "0",
          "usePlotGradientColor": "0",
          "showCanvasBorder": "0",
          "flatScrollBars": "1",
          "gridbordercolor": "#333333",
          "gridborderalpha": "20",
          "slackFillColor": "#e44a00",
          "taskBarFillMix": "light+0",
          "exportEnabled": "1"
        },
        "categories": [{
          "bgcolor": "#999999",
          "category": [{
            "start": "1/4/2014",
            "end": "30/6/2014",
            "label": "Months",
            "align": "middle",
            "fontcolor": "#ffffff",
            "fontsize": "12"
          }]
        }, {
          "bgcolor": "#999999",
          "align": "middle",
          "fontcolor": "#ffffff",
          "fontsize": "12",
          "category": [{
            "start": "1/4/2014",
            "end": "30/4/2014",
            "label": "April"
          }, {
            "start": "1/5/2014",
            "end": "31/5/2014",
            "label": "May"
          }, {
            "start": "1/6/2014",
            "end": "30/6/2014",
            "label": "June"
          }]
        }, {
          "bgcolor": "#ffffff",
          "fontcolor": "#333333",
          "fontsize": "11",
          "align": "center",
          "category": [{
            "start": "1/4/2014",
            "end": "5/4/2014",
        ...