Google Charts Display live data on your site 1 Using Google Charts - PowerPoint PPT Presentation

Google Charts Display live data on your site 1

Using Google Charts https://developers.google.com/chart 2

3

we want to represent this data 4

Step 1 create a container div inside an html page 5

Step 2 create a .js fi le with the following content we’re going to de fi ne this function! 6

other packages annotationchart • bar • calendar • gauge • geochart • line • map • orgchart • sankey • table • timeline • treemap • wordtree • 7

Step 3 create the drawChart() function 8

Step 4 de fi ne the data my data 9

…set the options 10

…continue this will draw a pie chart end of the drawChart() function 11

complete code 12

Step 5 import google’s api and our script inside the html 13

result 1 14

Customizing the Chart https://developers.google.com/chart/interactive/docs/gallery/ piechart#Con fi guration_Options 15

result 2 16

How about a bar chart? just replace PieChart with BarChart 17

result 3 18

more charts on https://developers.google.com/chart/interactive/docs/gallery 19

Both pie and bar charts are included in the corechart package However, if you want a treemap or geo chart on your page, you must additionally load the 'treemap' or 'geomap' packages.