<!DOCTYPE html>
<html lang="en" ng-app="intranetapi">
<head>
<meta charset="UTF-8" />
<title>KendoUI Directive for AngularJS - Kendo Pie Chart</title>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="PaagController" class="container" style="background:center no-repeat url('http://demos.telerik.com/kendo-ui/content/shared/styles/world-map.png');height:300px;">
<div kendo-chart k-options="pie"></div>
</div>
</body>
</html>
angular.module('intranetapi', []);
angular.module('intranetapi').controller('PaagController', ['$scope', function($scope) {
$scope.pie = {
title: {
position: "bottom",
text: "Geocode Ratings of Psomas Projects"
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: #= value#"
}
},
series: [{
type: "pie",
startAngle: 150,
data: [
{"category":"NO_RESULT","value":0},
{"category":0,"value":162},
{"category":1,"value":717},
{"category":4,"value":1791},
{"category":2,"value":3069},
{"category":3,"value":4399},
{"category":"OK","value":10336}
]
}]
};
console.log($scope.pie);
}]);