igDoughnutChart AngularJS

Samples demonstrating the initialization of igDoughnutChart in AngularJS

by dkamburov

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <link href="http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/structure/infragistics.css" rel="stylesheet" />
    <link href="http://www.igniteui.com/css/bootstrap/bootstrap.min.css" rel="stylesheet" />

    <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>

    <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.lob.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.dv.js"></script>

    <script src="https://rawgit.com/IgniteUI/igniteui-angular/master/src/igniteui-angular.js"></script>

    <script src="http://www.igniteui.com/data-files/northwindProducts.js"></script>

    <script type="text/javascript">


        var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
        var angCells = [];
        sampleApp.controller('chartController', function ($scope, $compile, $interpolate) {
			$scope.dataChart = [
				{ "CountryName": "China", "Pop1990": 1141 },
				{ "CountryName": "India", "Pop1990": 849 },
				{ "CountryName": "United States", "Pop1990": 250 },
				{ "CountryName": "Indonesia", "Pop1990": 178 },
				{ "CountryName": "Brazil", "Pop1990": 150 }
			];
			
			$scope.opts = {
				width: "100%",
				height: "550px",
				series:
				[{
					name: "Pop1990",
					labelMemberPath: "CountryName",
					valueMemberPath: "Pop1990",
					dataSource: $scope.dataChart,
					labelsPosition: "bestFit",
					formatLabel: function...