Angularjs Simple Pie chart using JSON Example Step by Step

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!.

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"])

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

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.