Data Visualization with Google Charts API by Syed RAKIB Al Hasan Data Cruncher G&R Ad Network
Jan 15, 2015
Data Visualizationwith
Google Charts APIby
Syed RAKIB Al HasanData Cruncher
G&R Ad Network
GoogleCharts
APIhttps://developers.google.com/chart/
GoogleCharts
APIhttps://developers.google.com/chart/
GoogleCharts
APIhttps://developers.google.com/chart/
GoogleCharts
APIhttps://developers.google.com/chart/
Declare chart packages:{
packages : ["corechart" ,"geochart" ,"table"
]}
GoogleCharts
APIhttps://developers.google.com/chart/
Create Data Set:
GoogleCharts
APIhttps://developers.google.com/chart/
Set chart options:
GoogleCharts
APIhttps://developers.google.com/chart/
Draw the chart:
GoogleCharts
APIhttps://developers.google.com/chart/
The chart:
GoogleCharts
APIhttps://developers.google.com/chart/
Full code available at:
https://gist.github.com/syedrakib/ea23781d91ff11556fe7
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);}
GoogleCharts
APIhttps://developers.google.com/chart/
Customized Branding:
GoogleCharts
APIhttps://developers.google.com/chart/
Google Charts API
@
G & R Ad Network
GoogleCharts
APIhttps://developers.google.com/chart/
Not just charts and stats:
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:
GoogleCharts
APIhttps://developers.google.com/chart/
More types:
Sankey Diagrams
GoogleCharts
APIhttps://developers.google.com/chart/
More types:
Diff Charts [pie]
GoogleCharts
APIhttps://developers.google.com/chart/
More types:
Calendar Charts
GoogleCharts
APIhttps://developers.google.com/chart/
More types:
Timeline Charts
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.
GoogleCharts
APIhttps://developers.google.com/chart/
Thanks
Syed Rakib Al HasanData Cruncher G & R Ad Network
syedrakib
@syedrakib
/in/syedrakib
+SyedRakibAlHasan
http://syedrakib.me/