JavaScript
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
//data.addColumn('datetime', 'Time of Day');
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'line');
data.addColumn('number', 'Value');
data.addRows([
[[10,35,0], 12, 12],
[[10,45,0], 2, 2],
[[11,1,0], 16, 16],
[[12,00,0], 16, null],
[[12,00,0], null, null],
[[12,00,0], 3, 3],
[[12,30,0], 3, 3],
[[12,50,0], 12, 12],
[[13,45,0], 7, 7],
[[14,45,0], 7, null],
[[14,45,0], 1, 1],
[[15,45,0], 1, 1]
]);
var ticks = [];
for(var index=0;index<=24;++index) {
ticks.push([index,0,0]);
}
var options = {
//title: '',
chartArea:{left:50,top:20,width:'90%',height:'70%'},
width: 900,
height: 200,
legend: 'none',
//backgroundColor: 'transparent',
dataOpacity: 1,
pointSize: 2,
lineWidth: 2,
hAxis: {
format: 'HH:mm',
//format: 'HH',
viewWindow: {
min: [0,0,0],
max: [24,0,0]
},
ticks: ticks
//ticks: [[0,0,0],[12,0,0],[24,0,0]] // display labels every 25
},
vAxis: {
maxValue: 20,
minValue: 0,
ticks: [{v:20, f:'on(20)'}, {v:1, f:'off'}]
},
series: {
0: {
pointSize: 0,
visible: true,
tooltip : false,
dataOpacity: 0,
pointShape: { type: 'star', sides: 0.1, dent: 0 }
},
1: {
pointSize: 5,
color: '#3366cc',
}
}
/*vAxis: {
title: 'Popularity'
}*/
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
//chart.draw(data, options);
chart.draw(data, options);
}