Talk on Google Charts API at GDays Bangladesh

1,035 views

Published on

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.

Published in: Software, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,035
On SlideShare
0
From Embeds
0
Number of Embeds
68
Actions
Shares
0
Downloads
37
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Talk on Google Charts API at GDays Bangladesh

  1. 1. Data Visualization with Google Charts API by Syed RAKIB Al Hasan Data Cruncher G&R Ad Network
  2. 2. Google Charts APIhttps://developers.google.com/chart/
  3. 3. Google Charts APIhttps://developers.google.com/chart/
  4. 4. Google Charts APIhttps://developers.google.com/chart/
  5. 5. Google Charts APIhttps://developers.google.com/chart/ Declare chart packages: { packages : [ "corechart" , "geochart" , "table" ] }
  6. 6. Google Charts APIhttps://developers.google.com/chart/ Create Data Set:
  7. 7. Google Charts APIhttps://developers.google.com/chart/ Set chart options:
  8. 8. Google Charts APIhttps://developers.google.com/chart/ Draw the chart:
  9. 9. Google Charts APIhttps://developers.google.com/chart/ The chart:
  10. 10. Google Charts APIhttps://developers.google.com/chart/ Full code available at: https://gist.github.com/syedrakib/ea23781d91ff11556fe7
  11. 11. 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); }
  12. 12. Google Charts APIhttps://developers.google.com/chart/ Customized Branding:
  13. 13. Google Charts APIhttps://developers.google.com/chart/ Google Charts API @ G & R Ad Network
  14. 14. Google Charts APIhttps://developers.google.com/chart/ Not just charts and stats:
  15. 15. 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:
  16. 16. Google Charts APIhttps://developers.google.com/chart/ More types: Sankey Diagrams
  17. 17. Google Charts APIhttps://developers.google.com/chart/ More types: Diff Charts [pie]
  18. 18. Google Charts APIhttps://developers.google.com/chart/ More types: Calendar Charts
  19. 19. Google Charts APIhttps://developers.google.com/chart/ More types: Timeline Charts
  20. 20. 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.
  21. 21. 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/

×