Angularjs Simple Pie chart using JSON Example Step by Step

In this Post We Will Explain About is Angularjs Simple Pie chart using JSON Example Step by Step With Example and Demo.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Example of PIE Chart in AngularJS Using ChartJS

In this post we will show you Best way to implement AngularJS Simple Chart, hear for How to Step by Step Way to Use chart.js with AngularJS with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

READ : Angular Create a Countdown Timer Directive

AngularJS Simple Chart Examples

Phase 1: Included simple all dependency external libs files of angular charts.

<a href="/angular/angular.min.js">/angular/angular.min.js</a>
<a href="/Chart.js/Chart.min.js">/Chart.js/Chart.min.js</a>
<a href="/angular-chart.js/dist/angular-chart.min.js">/angular-chart.js/dist/angular-chart.min.js</a>

Phase 2: create simple include module in angularjs module.

angular.module("liveApp", ["chart.js"])

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

Phase 3: simple Include all the Data

 $scope.chartLabels = ['Products A', 'Products B', 'Products C'];
  $scope.chartData = [125, 325, 210];

Phase 4: Define Chart directory in HTML file and assigned model to it.

How To get value of clicked slice in PIE chart

$scope.onClickSlice = function (points, evt) {
          console.log(points);
};

Include Scripts

var pieData = [
		{
			value: 65,
			color:"#F7464A",
			highlight: "#FF5A5E",
			label: "Products A"
		},
		{
			value: 59,
			color: "#46BFBD",
			highlight: "#5AD3D1",
			label: "Products B"
		},
		{
			value: 20,
			color: "#FDB45C",
			highlight: "#FFC870",
			label: "Products C"
		}
	];
   window.onload = function(){
		var ctx = document.getElementById("chart-area").getContext("2d");
		window.myPie = new Chart(ctx).Pie(pieData);
	};

Example

READ : Angular Router Get current URL Query String parameters

I hope you have Got Simple charts in AngularJS apps with Chart.js And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.