JavaScript
var config = getConfig();
var context = document.getElementById("canvas").getContext("2d");
var combined = new Chart(context, config);
function getConfig() {
var labelMeasure = "Measure";
var labelInsulin = "Insulin";
var config = {
type: "bar",
data: {
labels: [ "08:00", "09:00", "10:00", "11:00", "12:00" ],
datasets:[{
type: "line",
label: labelMeasure,
lineTension: 0,
backgroundColor: "#4078A7",
borderCapStyle: "butt",
borderJoinStyle: "miter",
borderColor: "#4078A7",
pointRadius: 5,
pointBorderColor: "#4078A7",
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 3,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#FFFFFF",
pointHoverBorderWidth: 3,
pointHitRadius: 5,
data: [{
x: "08:00",
y: "110"
}, {
x: "09:00",
y: "120"
}, {
x: "10:00",
y: "130"
}, {
x: "11:00",
y: "140"
}, {
x: "12:00",
y: "150"
}],
yAxisID : "y-axis-0",
fill: false
}, {
type: "bar",
label: labelInsulin,
backgroundColor: "#239471",
borderCapStyle: "butt",
borderJoinStyle: "miter",
borderColor: "#239471",
data: [
"30", "35", "40", "45", "50"
],
yAxisID : "y-axis-1"
}]
},
options: {
responsive: true,
title: {
display: false
},
legend: {
position: "bottom"
},
scales: {
xAxes: [{
position: "bottom",
type: "time",
time: {
unit: "hour",
format: "HH:mm",
tooltipFormat: "HH:mm",
displayFormats: {
hour: "HH:mm",
day: "HH:mm",
week: "HH:mm",
month: "HH:mm",
quarter: "HH:mm",
year: "HH:mm"
}
},
gridLines : {
display : false
}
}],
...