Creating DOUGHNUT Pie Chart with Google Chart API & using it with Angular.js Directive

Showing data in the form of Graphical/Pictorial Representation is always a better way to present data than simple text. Users find data represented in pictorial manner more interactive and easy to understand than data in complex tables or lists.

Cases where Pictorial data representation (Charts or Graphs) can be more user friendly:

1. If you want to show the number of hits on your website using a BAR or LINE CHART representation.

2. If you have personalized pages for users to show how active they have been.

and last but not the least, the scenario which intrigued me most to write this blog is:

3. To represent a user profile completeness in the form of Doughnut Chart (a category of pie chart) using real time data.

In this blog, we will be discussing the last point i.e., creating doughnut charts for real time data representation; though other two points are as important as well.

To accomplish this task, Google has provided developers with an API known as Google Chart API which gives developer an option to make charts in either of the two very simple ways:

1. Using JS : Copy the JS provided by Google API, make changes as per your requirement, supply data and its ready to use.( https://developers.google.com/chart/interactive/docs/gallery )

2. Using URL: Generate an URL fro Google API,  pass it in the image tag <img> and you will get the chart image supplied directly from Google.( https://developers.google.com/chart/image/docs/making_charts )

The main difference between them are: the chart provided by JS way gives you an interactive chart, displaying data associated with the chart on events like hover or click on the chart; whereas chart provided by “URL way” is in the form of images.
Now lets turn our focus towards the ‘URL way’ of getting the chart image from Google API:

Basic URL format which is to be used:

;chart_type>&chd=<chart_data>&chs=<chart_size>& ...additional_parameters...

For my project, I have used:

https://chart.googleapis.com/chart?cht=pc&chd=t:-1|-1|-1|-1|70,30&chco=FFFFFF,FFFFFF,FFFFFF,FFFFFF,74D3EF|EDEDED&chs=122x122&chp=4.7

In this case, we do not want a simple pie chart, instead a pie chart which is blank from center; forming a ‘Doughnut’ shape. To get the same, we will make a few changes in current URL.

• cht : specifies the chart type as PieChart
• chd : specifies that there will be 5 concentric circles in the pie chart. Here -1 tells that there is no data to be supplied so here first 4 circles starting from the center have no data. The last 70,30 shows the data we want to show, in my case the sum of the pair will always result in 100.
• chco : specifies the color of each field supplied in the chd field. Here I have given the color of 4 innermost concentric circles as white and the outermost as the pair of two colors representing 70,30 of the chd field.
• chs : specifies the dimensions of the image you want.
• chp : specifies the starting angle of the chart, by default it starts from 3 o’clock mark.

Here, I have modified the “chd” and “chco” parameters to give you a better understanding of “chd”. After making all the changes, our URL modifies to:

https://chart.googleapis.com/chart?cht=pc&chd=t:150,50|70,30|80,20|40,60|70,30&chco=FFFFFF,EEEEEE,DDDDDD,CCCCCC,74D3EF|EDEDED&chs=122x122&chp=4.7

As we have URL of pie chart now, lets get our focus on the directive part :

To include this URL in your project and use it to display charts on different pages, you can create a directive and add the same anywhere in html and you got it all working.

Lets have a look at the sample code:

[js].directive(‘userProfileRating’, function () {
return{
restrict: ‘A’,
replace: true,
template: ‘&lt;img style="margin:-12px" src="https://chart.googleapis.com/chart?cht=pc&amp;chco=FFFFFF,FFFFFF,FFFFFF,FFFFFF,74D3EF|EDEDED&amp;chd=t:-1|-1|-1|-1|70,30&amp;chs=122×122&amp;chp=4.7"/&gt;’
}
});[/js]

One more thing to notice is that the URL which we were using, uses ‘&’ but when we have to use that URL in <img> tag we will replace ‘&’ with ‘&amp;’ to make it work successfully.

Thanks for reading.

Building Intuitive Frontend Interfaces with AngularJS