How we can use the Google Charts API to visualize data. With this API, it is possible to produce various kinds of charts, widgets, gauges, geo maps along with customized look&feel and customized branding. This API is publicly available for free. It is the same javascript technology with which google visualizes data in its popular Google Analytics dashboards.

1. Data Visualization
with
Google Charts API
by
Syed RAKIB Al Hasan
Data Cruncher
G&R Ad Network

5. Google
Charts
APIhttps://developers.google.com/chart/

6. Google
Charts
APIhttps://developers.google.com/chart/

7. Google
Charts
APIhttps://developers.google.com/chart/

8. Google
Charts
APIhttps://developers.google.com/chart/
Declare chart packages:
{
packages : [
"corechart" ,
"geochart" ,
"table"
]
}

9. Google
Charts
APIhttps://developers.google.com/chart/
Create Data Set:

10. Google
Charts
APIhttps://developers.google.com/chart/
Set chart options:

11. Google
Charts
APIhttps://developers.google.com/chart/
Draw the chart:

12. Google
Charts
APIhttps://developers.google.com/chart/
The chart:

13. Google
Charts
APIhttps://developers.google.com/chart/
Full code available at:
https://gist.github.com/syedrakib/ea23781d91ff11556fe7

14. Google
Charts
APIhttps://developers.google.com/chart/
Gauge Example:
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
new google.visualization.Gauge(
document.getElementById('visualization')
).draw(data);
}

15. Google
Charts
APIhttps://developers.google.com/chart/
Customized Branding:

16. Google
Charts
APIhttps://developers.google.com/chart/
Google Charts API
@
G & R Ad Network

21. Google
Charts
APIhttps://developers.google.com/chart/
Not just charts and stats:

22. Google
Charts
APIhttps://developers.google.com/chart/
https://chart.googleapis.com/chart?
cht=p3&
chd=t:60,40&
chs=650x300&
chl=Hello|World
https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=650x300&chl=Hello|World
Also static images:

23. Google
Charts
APIhttps://developers.google.com/chart/
More types:
Sankey Diagrams

24. Google
Charts
APIhttps://developers.google.com/chart/
More types:
Diff Charts [pie]

25. Google
Charts
APIhttps://developers.google.com/chart/
More types:
Calendar Charts

26. Google
Charts
APIhttps://developers.google.com/chart/
More types:
Timeline Charts

27. Google
Charts
APIhttps://developers.google.com/chart/
Finishing Note:
To use the API, you should have:
● a little JavaScript experience;
● a little patience to read the documentation;
and
● a little persistence to keep trying if your first charts
don't look as you expect them to.

28. Google
Charts
APIhttps://developers.google.com/chart/
Thanks
Syed Rakib Al Hasan
Data Cruncher
G & R Ad Network
syedrakib
@syedrakib
/in/syedrakib
+SyedRakibAlHasan
http://syedrakib.me/