AngularJS Pie Chart Using Highcharts Library With Example

watch_later Saturday, February 2, 2019
comment 2 Comments

Introduction

This article gives an explanation about how to create and use charts in angular using the highcharts library with a simple example and also show the use of angular directive for a pie chart or a circle chart. Here I'll also explain what is the pie chart and what is highcharts library and how to use in AngularJS web application.

What is Pie Chart?

Pie Chart is also known as circle chart it is a circular statistical graphic, that is split into slices parenthetically numerical proportion.it is used to show proportions and percentages between the different kind of categories, by dividing a circle into proportional segments.

What is Highcharts?

Highcharts is a software library for charting and it is written in pure JavaScript. It offers an easy way different kind of chats like a pie chart, bar chart, scatter chart, spline and many other charts to your web application.

Implementation

So, Let's Start with an example of the codingvila website where we will generate pie chat based on posted articles, blogs and etc using angularJs and Highcharts. To, Generate chart in Angular Application you need to link Angular Script and Highchart library with your web application for creating the pie chart as I shown below.

HTML Markup

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Highcharts Simple Bar Chart</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/highcharts-more.js"></script>
    <script type="text/javascript">
        function ChartControl($scope, limitToFilter) {
            $scope.Contribution = [
              ['Articles', 23],
              ['Blogs', 13],
              ['Other', 2]
            ];
 
            $scope.MyContribution = limitToFilter($scope.Contribution, 4);
        }
 
        angular.module('myApp', [])
          .directive('hcPie'function () {
              return {
                  restrict: 'C',
                  replace: true,
                  scope: {
                      items: '='
                  },
                  controller: function ($scope, $element, $attrs) {
                      console.log(3);
 
                  },
                  template: '<div id="container" style="margin: 0 auto">not working</div>',
                  link: function (scope, element, attrs) {
                      console.log(3);
                      var chart = new Highcharts.Chart({
                          chart: {
                              renderTo: 'container',
                              plotBackgroundColor: null,
                              plotBorderWidth: null,
                              plotShadow: false
                          },
                          title: {
                              text: 'Codingvila Web/Software Development Contribution, 2019'
                          },
                          tooltip: {
                              pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>',
                              percentageDecimals: 1
                          },
                          plotOptions: {
                              pie: {
                                  allowPointSelect: true,
                                  cursor: 'pointer',
                                  dataLabels: {
                                      enabled: true,
                                      color: '#000000',
                                      connectorColor: '#000000',
                                      formatter: function () {
                                          return '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + ' %';
                                      }
                                  }
                              }
                          },
                          series: [{
                              type: 'pie',
                              name: 'Total Contribution',
                              data: scope.items
                          }]
                      });
                      scope.$watch("items"function (newValue) {
                          chart.series[0].setData(newValue, true);
                      }, true);
 
                  }
              }
          });
    </script>
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="ChartControl">
            <div class="hc-pie" items="MyContribution"></div>
        </div>
    </div>
</body>
</html>

Output 


Summary

This article gives an explanation about how to create charts using angularJs in web applications as well as also show you how you can use the highchart library to creating a different kind of charts in your web application.

Codingvila provides articles and blogs on web and software development for beginners as well as free Academic projects for final year students in Asp.Net, MVC, C#, Vb.Net, SQL Server, Angular Js, Android, PHP, Java, Python, Desktop Software Application and etc.

avatar
IT

I like your post very much. It is very much useful for my research. I hope you to share more info about this. Keep posting angular training

delete October 28, 2019 at 11:18 PM



sentiment_satisfied Emoticon