{"id":10681,"date":"2013-09-05T16:16:27","date_gmt":"2013-09-05T10:46:27","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=10681"},"modified":"2017-08-03T14:01:44","modified_gmt":"2017-08-03T08:31:44","slug":"creating-doughnut-pie-chart-with-google-chart-api-using-it-with-angular-js-directive","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/creating-doughnut-pie-chart-with-google-chart-api-using-it-with-angular-js-directive\/","title":{"rendered":"Creating DOUGHNUT Pie Chart with Google Chart API & using it with Angular.js Directive"},"content":{"rendered":"

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.<\/span><\/p>\n

Cases where Pictorial data representation (Charts or Graphs) can be more user friendly:<\/span><\/p>\n

1. If you want to show the number of hits on your website using a BAR or LINE CHART representation.<\/span><\/p>\n

2. If you have personalized pages for users to show how active they have been.<\/span><\/p>\n

and last but not the least, the scenario which intrigued me most to write this blog is:<\/span><\/p>\n

3. To represent a user profile completeness in the form of Doughnut Chart\u00a0(a category of pie chart) using real time data.<\/span><\/p>\n

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.<\/span><\/p>\n

To accomplish this task, Google has provided developers with an API known as Google Chart API<\/strong> which gives developer an option to make charts in either of the two very simple ways:<\/span><\/p>\n

1. Using\u00a0JS\u00a0<\/strong>: Copy the JS provided by Google API, make changes as per your requirement, supply data and its ready to use.(\u00a0<\/span>https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery<\/a>\u00a0)<\/span><\/p>\n

2. Using URL<\/strong>: Generate an URL fro Google API, \u00a0pass it in the image tag <img>\u00a0and you will get the chart image supplied directly from Google.<\/span>(\u00a0https:\/\/developers.google.com\/chart\/image\/docs\/making_charts<\/a>\u00a0)<\/span><\/p>\n

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.<\/span>
\nNow lets turn our focus towards the ‘URL way’ of getting the chart image from Google API:<\/span><\/p>\n

Basic URL format which is to be used:<\/span><\/p>\n

;chart_type<\/em>>&chd=<chart_data<\/em>>&chs=<\/span><chart_size>&<\/span> ...additional_parameters<\/em>...<\/span><\/pre>\n
For my project, I have used:<\/span><\/p>\n
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<\/span><\/a><\/span><\/pre>\n
 <\/p>\n
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.<\/span><\/p>\n