Atmos
Search…
Build System
forms
Starter Template
Google Charts
Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.
Charts | Google Developers
Google Developers
Step 1
Add google chart hosted library to the page
1
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
Copied!
Step 2
Add markup
1
<div id="gchart-01></div>
Copied!
Step 3
Initialize the chart
Please make sure you init the chart function google chart library is loaded
1
google.charts.load('current', {packages: ['corechart', 'bar', 'calendar']});
2
google.charts.setOnLoadCallback(initGoogleCharts);
3
4
5
function initGoogleCharts() {
6
if ($("#gchart-01").length) {
7
8
var data = new google.visualization.DataTable();
9
data.addColumn('timeofday', 'Time of Day');
10
data.addColumn('number', 'Motivation Level');
11
12
data.addRows([
13
[{v: [8, 0, 0], f: '8 am'}, 1],
14
[{v: [9, 0, 0], f: '9 am'}, 2],
15
[{v: [10, 0, 0], f: '10 am'}, 3],
16
[{v: [11, 0, 0], f: '11 am'}, 4],
17
[{v: [12, 0, 0], f: '12 pm'}, 5],
18
[{v: [13, 0, 0], f: '1 pm'}, 6],
19
[{v: [14, 0, 0], f: '2 pm'}, 7],
20
[{v: [15, 0, 0], f: '3 pm'}, 8],
21
[{v: [16, 0, 0], f: '4 pm'}, 9],
22
[{v: [17, 0, 0], f: '5 pm'}, 10],
23
]);
24
25
var options = {
26
title: 'Motivation Level Throughout the Day',
27
hAxis: {
28
title: 'Time of Day',
29
format: 'h:mm a',
30
viewWindow: {
31
min: [7, 30, 0],
32
max: [17, 30, 0]
33
}
34
},
35
vAxis: {
36
title: 'Rating (scale of 1-10)'
37
},
38
height: 400
39
};
40
41
var chart = new google.visualization.ColumnChart(
42
document.getElementById('gchart-01'));
43
44
chart.draw(data, options);
45
}
46
}
Copied!
Last modified 2yr ago
Copy link