![Page 1: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/1.jpg)
Data Visualizationwith
Google Charts APIby
Syed RAKIB Al HasanData Cruncher
G&R Ad Network
![Page 2: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/2.jpg)
![Page 3: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/3.jpg)
![Page 4: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/4.jpg)
![Page 5: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/5.jpg)
GoogleCharts
APIhttps://developers.google.com/chart/
![Page 6: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/6.jpg)
GoogleCharts
APIhttps://developers.google.com/chart/
![Page 7: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/7.jpg)
GoogleCharts
APIhttps://developers.google.com/chart/
![Page 8: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/8.jpg)
GoogleCharts
APIhttps://developers.google.com/chart/
Declare chart packages:{
packages : ["corechart" ,"geochart" ,"table"
]}
![Page 9: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/9.jpg)
GoogleCharts
APIhttps://developers.google.com/chart/
Create Data Set:
![Page 10: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/10.jpg)
GoogleCharts
APIhttps://developers.google.com/chart/
Set chart options:
![Page 11: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/11.jpg)
GoogleCharts
APIhttps://developers.google.com/chart/
Draw the chart:
![Page 12: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/12.jpg)
GoogleCharts
APIhttps://developers.google.com/chart/
The chart:
![Page 13: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/13.jpg)
GoogleCharts
APIhttps://developers.google.com/chart/
Full code available at:
https://gist.github.com/syedrakib/ea23781d91ff11556fe7
![Page 14: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/14.jpg)
GoogleCharts
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);}
![Page 15: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/15.jpg)
GoogleCharts
APIhttps://developers.google.com/chart/
Customized Branding:
![Page 16: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/16.jpg)
GoogleCharts
APIhttps://developers.google.com/chart/
Google Charts API
@
G & R Ad Network
![Page 17: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/17.jpg)
![Page 18: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/18.jpg)
![Page 19: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/19.jpg)
![Page 20: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/20.jpg)
![Page 21: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/21.jpg)
GoogleCharts
APIhttps://developers.google.com/chart/
Not just charts and stats:
![Page 22: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/22.jpg)
GoogleCharts
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:
![Page 23: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/23.jpg)
GoogleCharts
APIhttps://developers.google.com/chart/
More types:
Sankey Diagrams
![Page 24: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/24.jpg)
GoogleCharts
APIhttps://developers.google.com/chart/
More types:
Diff Charts [pie]
![Page 25: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/25.jpg)
GoogleCharts
APIhttps://developers.google.com/chart/
More types:
Calendar Charts
![Page 26: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/26.jpg)
GoogleCharts
APIhttps://developers.google.com/chart/
More types:
Timeline Charts
![Page 27: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/27.jpg)
GoogleCharts
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.
![Page 28: Talk on Google Charts API at GDays Bangladesh](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6b0244a795959128b4574/html5/thumbnails/28.jpg)
GoogleCharts
APIhttps://developers.google.com/chart/
Thanks
Syed Rakib Al HasanData Cruncher G & R Ad Network
syedrakib
@syedrakib
/in/syedrakib
+SyedRakibAlHasan
http://syedrakib.me/