SLIDE 1
Google Charts
Display live data on your site
1
Using Google Charts
https://developers.google.com/chart
2
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 - - 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
SLIDE 2
SLIDE 3
3
SLIDE 4
we want to represent this data
4
SLIDE 5
Step 1
5
create a container div inside an html page
SLIDE 6
Step 2
6
create a .js file with the following content
we’re going to define this function!
SLIDE 7
7
- ther packages
- annotationchart
- bar
- calendar
- gauge
- geochart
- line
- map
- rgchart
- sankey
- table
- timeline
- treemap
- wordtree
SLIDE 8
Step 3
create the drawChart() function
8
SLIDE 9
Step 4
define the data
9
my data
SLIDE 10
…set the options
10
SLIDE 11
…continue
11
end of the drawChart() function this will draw a pie chart
SLIDE 12
12
complete code
SLIDE 13
Step 5
import google’s api and our script inside the html
13
SLIDE 14
result 1
14
SLIDE 15
Customizing the Chart
https://developers.google.com/chart/interactive/docs/gallery/ piechart#Configuration_Options
15
SLIDE 16
result 2
16
SLIDE 17
How about a bar chart?
17
just replace PieChart with BarChart
SLIDE 18
result 3
18
SLIDE 19
more charts on
https://developers.google.com/chart/interactive/docs/gallery
19
SLIDE 20
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.