Simple Pie and Bar Chart Using Google charts with Angularjs

Google charts is a very popular charting library. Angularjs is the leading front-end framework by google. This angularjs tutorial help to create beautiful Pie chart and Bar chart using Angular Google chart.

You can download and view google angular chart docs from Here. You can use google in an angular application using bower, npm and cdn.

Checkout Other Angular tutorials,

Install Google chart Using Bower

$ bower install angular-google-chart#1.0.0-beta.1 --save

Install Google chart Using NPM

$ npm install --save [email protected]

Google chart Using CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/1.0.0-beta.1/ng-google-chart.min.js" type="text/javascript"></script>

How to inject Google chart into Angular

After successfully installing or including CDN path of google chart, You need to inject the google chart service into the angular app.

angular.module('TestApp', ['googlechart']);

Pie Chart Using AngularJs and Google Chart

We will create pie chart using google chart pie directive. We will pass data to the Pie Chart object. I am creating task status Pie char that will show how many tasks are pending, cancelled and completed.

Step 1: We will create HTML div element, that will have Pie chart.I will add google chart Pie directive into this div.

<div google-chart="" chart="pieChartObject" style="height:300px; width:100%;"></div>

Where:

google-chart : This is the main google chart directive.
chart : This contains source data.
pieChartObject : It’s a JSON object and contains information like data, title and chart type.

Step 2: We will create empty json object for Pie chart.

//empty object
$scope.pieChartObject = {};

Step 3: We will add Chart type and set title.

//set chart type
$scope.pieChartObject.type = "PieChart";

//set title
$scope.pieChartObject.options = {
	'title': 'Tasks Status'
};

Step 4: We will add some data for Pie chart slices.

//set data
$scope.pieChartObject.data = {"cols": [
	{id: "t", label: "Status", type: "string"},
	{id: "s", label: "Value", type: "number"}
	], "rows": [
		{c: [
			{v: "Pending"},
			{v: 29},
		]},
		{c: [
			{v: "Cancelled"},
			{v: 12},
		]},
		{c: [
			{v: "InProgress"},
			{v: 31}
		]},
		{c: [
			{v: "OnHold"},
			{v: 20},
		]},
		{c: [
			{v: "Complete"},
			{v: 20},
		]}
]};

Above code will show, Pie chart using google chart with Angular

How to create Bar chart using google chart directive

We will generate bar chart using above task status data, its very simple and easy, I will make changes above object for type and data like below:

$scope.barChartObject = {};
$scope.barChartObject.type = "BarChart";
$scope.barChartObject.data = {"cols": [
{id: "t", label: "Status", type: "string"},
{id: "s", label: "Value", type: "number"}
], "rows": [
	{c: [
		{v: "Pending"},
		{v: 29},
	]},
	{c: [
		{v: "Cancelled"},
		{v: 12},
	]},
	{c: [
		{v: "InProgress"},
		{v: 31}
	]},
	{c: [
		{v: "OnHold"},
		{v: 20},
	]},
	{c: [
		{v: "Complete"},
		{v: 20},
	]
]};

$scope.barChartObject.options = {
	'title': 'Tasks Status'
};

I have created new barChartObject json object add added title, type and data.

You can download source code and Demo from below link

Live Demo

Download Source Code

Conclusion:

We have created Pie and bar chart using google chart with angularJS. You cal also create Annotation Chart, Column Chart, Gauge, Hide A Series and Multi-Chart.