AngularJS Pie Chart Example

Posted By : Puneet Sharma | 28-Nov-2017

angularjs

AngularJS is a popular client-side framework for web applications. It offers enhanced HTML functionality, data binding, MVC pattern structure, routing support and much more. In this article, we will go to some charges which can be used with high-tech engineers.

The example below can also be extended using the glass clock functionality. With its data binding, it can allow changes in the underlying data to automatically update the chart.

The below code is not optimal, because it does not detach the presentation code from logic and data. It also does not take advantage of additional functionality provided by angular, such as data binding for example. An approach to optimizing the high chapters will allow us to follow the angular pattern for code separation and reuse.

1) Include the following dependencies in your HTML file

		Placeholder for pie chart

2) You must have the following files in javascript directory:-

              <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
	      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>

3) Now create the controller to handle the data :-

		 angular.module('myModule', []).directive('hcPieChart', function () {
                    return {
                    restrict: 'E',
                    template: '', 
                   scope: { title: '@', data: '=' }, 
                   link: function (scope, element) { Highcharts.chart(element[0], 
                         { chart: { type: 'pie' }, title: { text: scope.title }, 
                         plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', 
                         dataLabels: { enabled: true, format: '{point.name}: {point.percentage:.1f} %' } } }, 
                         series: [{ data: scope.data }] }); } }; }) .controller('myController', function ($scope) { 
                         // Sample data for pie chart 
                         $scope.pieData = [{ name: "Microsoft Internet Explorer", y: 56.33 }, 
                                           { name: "Chrome", y: 24.03, sliced: true, selected: true }, 
                                           { name: "Firefox", y: 10.38 }, { name: "Safari", y: 4.77 }, 
                                           { name: "Opera", y: 0.91 }, 
                                           { name: "Proprietary or Undetectable", y: 0.2 }] });