AngularJS 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="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<body ng-app="myApp">
    <div ng-controller="MyController">
        <fusioncharts id="chartContainer1" width="450" height="400" type="doughnut2d" dataSource={{myData_chart1()}}></fusioncharts>
    </div>
</body>

JavaScript

var app = angular.module('myApp', ["ng-fusioncharts"])
app.controller('MyController', function($scope) {

  $scope.myData_chart1 =function(){
        myData.chart.palettecolors ="#FF5627,#FF6F69";
        randomData(1,99);
        return myData;
    };
});
var myData = {
        chart: {
            animationDuration:"1.5",
            decimals: "0",
            bgcolor:"#F3F5F6",
            gradient:"",
            pieRadius:"80",
            showLabels:"0",
           showLegend:"1",
            showValues:"0",
            enableSmartLabels:"0",
            showTooltip:"0",
            doughnutRadius:"55",
            centerLabelFontSize:"20",
            centerLabelColor:"#8F9E1C",
            useDataPlotColorForLabels: "1",
            showBorder:"0",
            use3DLighting:"0",
            showShadow:"0"
        },
    };
  var randomData=function(max,min){
        var value1 = Math.floor(Math.random()*(max-min+1)+min);
        var value2 = 100-value1;
        var myObjs =[{label: "Food", value:value1.toString()},{label: "Household", alpha:"100",                                                       value:value2.toString()}];
        var centerLabel=value1.toString()
        myData.chart.defaultCenterLabel = centerLabel;
        myData.data = (myObjs);
   }