Google Charts
Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.
Add google chart hosted library to the page
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
Add markup
<div id="gchart-01></div>
Initialize the chart
Please make sure you init the chart function google chart library is loaded
google.charts.load('current', {packages: ['corechart', 'bar', 'calendar']});
google.charts.setOnLoadCallback(initGoogleCharts);
function initGoogleCharts() {
if ($("#gchart-01").length) {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Motivation Level');
data.addRows([
[{v: [8, 0, 0], f: '8 am'}, 1],
[{v: [9, 0, 0], f: '9 am'}, 2],
[{v: [10, 0, 0], f: '10 am'}, 3],
[{v: [11, 0, 0], f: '11 am'}, 4],
[{v: [12, 0, 0], f: '12 pm'}, 5],
[{v: [13, 0, 0], f: '1 pm'}, 6],
[{v: [14, 0, 0], f: '2 pm'}, 7],
[{v: [15, 0, 0], f: '3 pm'}, 8],
[{v: [16, 0, 0], f: '4 pm'}, 9],
[{v: [17, 0, 0], f: '5 pm'}, 10],
]);
var options = {
title: 'Motivation Level Throughout the Day',
hAxis: {
title: 'Time of Day',
format: 'h:mm a',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
},
vAxis: {
title: 'Rating (scale of 1-10)'
},
height: 400
};
var chart = new google.visualization.ColumnChart(
document.getElementById('gchart-01'));
chart.draw(data, options);
}
}
Last modified 5yr ago