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 ng-controller="MyController">

    <fusioncharts id="mychartcontainer" chartid="mychart" width="{{width}}" height="400" type="{{type}}" dataSource="{{dataSource}}"></fusioncharts>

   
  </body>

</html>

JavaScript

var app = angular.module('HelloApp', ["ng-fusioncharts"])
app.controller('MyController', function($scope) {
  $scope.type = "scrollline2d";
  $scope.width = 600;
  $scope.dataSource =  {
            "chart": {
                "caption": "Sales Trends",
                "subCaption": "(FY 2012 to FY 2013)",
                "xAxisName": "Month",
                "yAxisName": "Revenue",
                "showValues": "0",
                "numberPrefix": "$",
                "showBorder": "0",
                "showShadow": "0",
                "bgColor": "#ffffff",
                "paletteColors": "#008ee4",
                "showCanvasBorder": "0",
                "showAxisLines": "0",
                "showAlternateHGridColor": "0",
                "divlineAlpha": "100",
                "divlineThickness": "1",
                "divLineIsDashed": "1",
                "divLineDashLen": "1",
                "divLineGapLen": "1",
                "lineThickness": "3",  
                "flatScrollBars": "1",
                "scrollheight": "10",
                "numVisiblePlot": "12",
                "showHoverEffect":"1"
            },
            "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":...