Angularjs pie chart – Angularjs pie chart demo and example

Angularjs pie chart – Angularjs pie chart demo and example

In this post we will show you how to use Angularjs pie chart with demo and example, hear we will give you demo for Angularjs pie chart and gow to pass data in to Angularjs pie chart and how to implement it.

Angularjs pie chart is a widespread consumer aspect framework for net applications. It provides increased markup language practicality, knowledge binding, MVC pattern structure, routing support and far additional. during this article we’ll think again a number of the ways that pie chart may be used with Angularjs pie chart.

In its simplest type, pie chart may be loaded ANd initialized in pure JavaScript from at intervals an Angular controller or in plain JavaScript. The code below shows AN example of a webpage exploitation Angularjs pie chart.

View Demo Download

<!DOCTYPE html>
<html ng-app="onlinecodeModule">
<head>
    <meta charset="utf-8" />
	<title>Angularjs pie chart directive demo and example - onlinecode</title>
    <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>
</head>
<body ng-controller="onlinecodeController">

     <hc-chart options="chartOptions">Placeholder for Angularjs pie chart</hc-chart>
     <hc-pie-chart title="Browser usage chart - onlincode" data="pieData">Placeholder for pie chart - onlincode</hc-pie-chart>

    <script>
        angular.module('onlinecodeModule', [])
            //  add generic chart Directive for and pass in chart options
            .directive('hcChart', function () {
                return {
					// set restrict directive
                    restrict: 'E',
					// set template directive
                    template: '<div></div>',
					// set scope directive
                    scope: {
                        options: '='
                    },
					// set link directive
                    link: function (scope, element) {
						// line chart scope
                        Highcharts.chart(element[0], scope.options);
                    }
                };
            })
            // pie charts Directive and  pass in to title and data only    
            .directive('hcPieChart', function () {
                return {
					// set restrict directive
                    restrict: 'E',
					// set template directive
                    template: '<div></div>',
					// set scope directive
                    scope: {
                        title: '@',
                        data: '='
                    },
					// set link directive
                    link: function (scope, element) {
						// Angular pie chart chart scope
                        Highcharts.chart(element[0], {
							// set chart type
                            chart: {
                                type: 'pie'
                            },
							// set title
                            title: {
                                text: scope.title
                            },
							// set plot Options
                            plotOptions: {
                                pie: {
									// set other option
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    dataLabels: {
                                        enabled: true,
                                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                                    }
                                }
                            },
							// set series scope data
                            series: [{
                                data: scope.data
                            }]
                        });
                    }
                };
            })
            .controller('onlinecodeController', function ($scope) {
                
                // first chart Sample options 
                $scope.chartOptions = {
                    title: {
                        text: 'This is Temperature data'
                    },
                    xAxis: {
                        categories: ['Janaury', 'February', 'March', 'April', 'May', 'June', 
				            'July', 'August', 'September', 'October', 'November', 'December']
                    },
                    series: [{
                        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                    }]
                };

                // Angular pie chart Sample data 
                $scope.pieData = [{
                        name: "IE(Internet Explorer)",
                        y: 55.32
                    }, {
                        name: "Google Chrome",
                        y: 25.04,
                        sliced: true,
                        selected: true
                    }, {
                        name: "Missoula Firefox",
                        y: 11.37
                    }, {
                        name: "Uc",
                        y: 3.76
                    }, {
                        name: "Safari",
                        y: 0.90
                    }, {
                        name: "Others",
                        y: 0.5
                }]
            });
    </script>
</body>
</html>

The above given code could likewise be extended utilizing Angular’s watch usefulness. In mix with its information authoritative, this could enable changes in the basic information to naturally refresh the graph.

There are a few more perplexing open source Angular mandates for Angularjs pie chart.

Take in more about the most prevalent order for <b>Angularjs pie chart</b>. This mandate is not kept up or formally upheld by <b>Angular pie chart</b>, but rather stays famous among <b>Angularjs pie chart</b> designers and clients.

<!DOCTYPE html>
<html ng-app="onlinecodeModule">
<head>
	<title>Angularjs pie chart demo and example - onlinecode</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body ng-controller="onlinecodeController">
    <div id="container">Placeholder for Angularjs pie chart</div>
    <script>
    	angular.module('onlinecodeModule', [])
    		.controller('onlinecodeController', function ($scope) {
				Highcharts.chart('container', {
				    xAxis: {
				        categories: ['Janaury', 'February', 'March', 'April', 'May', 'June', 
				            'July', 'August', 'September', 'October', 'November', 'December']
				    },
				    series: [{
				        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
				    }]
				});
    		});
    </script>
</body>
</html>

The code above is not ideal, since it doesn’t separate introduction code from rationale and information. It additionally does not exploit the additional usefulness given by Angular, for example, information authoritative for instance. One way to deal with enhance the code is to compose a basic custom Angular mandate for pie chart. This would enable us to take after Angular’s examples for code partition and reuse. A bland order may take diagram choices as a contention. A moment approach is compose an order for each graph layout utilized, giving the information as a contention. Check the accompanying case to take in more about how to utilize a custom Angular mandate for pie chart.

You also like google recaptcha using javascript and google recaptcha using php

Leave a Comment

Your email address will not be published. Required fields are marked *

9  +    =  19

We accept paid advance and paid guest Posting on our Site : Contact US