Integrating ChartJS with AngularJS

First we need AngularJS and ChartJS library.

<!DOCTYPE html>
<html>
<head>
	<title>Pie Chart</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="http://jtblin.github.io/angular-chart.js/node_modules/angular/angular.min.js"></script>
	<script src="http://jtblin.github.io/angular-chart.js/node_modules/chart.js/dist/Chart.min.js"></script>
	<script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
	<script src="js/pie_chart.js"></script>
</head>
<body ng-app="app" ng-controller="PieCtrl">
	<canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels" chart-options="options">
</canvas>
</body>
</html>

This is for pie_chart.js

angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope) {
  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
  $scope.data = [300, 500, 100];
});

Result:

pie-chart-chartjs

Source:
http://jtblin.github.io/angular-chart.js/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s