Download - Talk on Google Charts API at GDays Bangladesh

Data Visualizationwith

Google Charts APIby

Syed RAKIB Al HasanData Cruncher

G&R Ad Network

GoogleCharts

APIhttps://developers.google.com/chart/

GoogleCharts


Declare chart packages:{

packages : ["corechart" ,"geochart" ,"table"

]}

GoogleCharts


Create Data Set:

GoogleCharts


Set chart options:

GoogleCharts


Draw the chart:

GoogleCharts


The chart:

GoogleCharts


Full code available at:

https://gist.github.com/syedrakib/ea23781d91ff11556fe7



GoogleCharts


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


Customized Branding:

GoogleCharts


Google Charts API

@

G & R Ad Network

GoogleCharts


Not just charts and stats:

GoogleCharts


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:

https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=650x300&chl=Hello

https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=650x300&chl=Hello

GoogleCharts


More types:

Sankey Diagrams

GoogleCharts


More types:

Diff Charts [pie]

GoogleCharts


More types:

Calendar Charts

GoogleCharts


More types:

Timeline Charts

GoogleCharts


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


Thanks

Syed Rakib Al HasanData Cruncher G & R Ad Network

syedrakib

@syedrakib

/in/syedrakib

+SyedRakibAlHasan

http://syedrakib.me/

Download - Talk on Google Charts API at GDays Bangladesh

Top Related