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