Google Charts

Display live data on your site

1

Using Google Charts

https://developers.google.com/chart2

3

we want to represent this data

4

Step 1

5

create a container div inside an html page

Step 2

6

create a .js file with the following content

we’re going to define this function!

7

other packages

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

Step 3create the drawChart() function

8

Step 4define the data

9

my data

…set the options

10

…continue

11

end of the drawChart() function

this will draw a pie chart

12

complete code

Step 5import 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#Configuration_Options 15

result 2

16

How about a bar chart?

17

just replace PieChart

with BarChart

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.