JavaScript
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Daily Study Routine"
},
axisY: {
minimum: (new Date(2019, 01, 04, 00, 00)).getTime(),
interval: (2 * 60 * 60 * 1000),
labelFormatter: function(e){
return CanvasJS.formatDate(e.value, "h:mm TT");
}
},
axisX: {
valueFormatString: "DDDD",
intervalType: "day",
interval: 1
},
toolTip:{
contentFormatter: function ( e ) {
return "<strong>" + CanvasJS.formatDate(e.entries[0].dataPoint.x, "DDDD") + "</strong></br>" + CanvasJS.formatDate(e.entries[0].dataPoint.y[0], "h:mm TT") + " - " + CanvasJS.formatDate(e.entries[0].dataPoint.y[1], "h:mm TT");
}},
data: [
{
type: "rangeColumn",
dataPoints: [
{ x: new Date(2019, 01, 04), y: [(new Date(2019, 01, 04, 05, 0)).getTime(), (new Date(2019, 01, 04, 13, 00)).getTime()] },
{ x: new Date(2019, 01, 05), y: [(new Date(2019, 01, 04, 06, 0)).getTime(), (new Date(2019, 01, 04, 14, 20)).getTime()] },
{ x: new Date(2019, 01, 06), y: [(new Date(2019, 01, 04, 07, 0)).getTime(), (new Date(2019, 01, 04, 12, 00)).getTime()] },
{ x: new Date(2019, 01, 07), y: [(new Date(2019, 01, 04, 03, 0)).getTime(), (new Date(2019, 01, 04, 9, 00)).getTime()] },
{ x: new Date(2019, 01, 08), y: [(new Date(2019, 01, 04, 02, 0)).getTime(), (new Date(2019, 01, 04, 7, 00)).getTime()] },
{ x: new Date(2019, 01, 09), y: [(new Date(2019, 01, 04, 10, 0)).getTime(), (new Date(2019, 01, 04, 18, 00)).getTime()] }
]
},
{
type: "rangeColumn",
dataPoints: [
{ x: new Date(2019, 01, 04), y: [(new Date(2019, 01, 04, 12, 0)).getTime(), (new Date(2019, 01, 04, 19, 00)).getTime()] },
{ x: new Date(2019, 01, 05), y: [(new Date(2019, 01, 04, 15, 0)).getTime(), (new Date(2019, 01, 04, 18, 20)).getTime()] },
{ x: new Date(2019, 01, 06), y: [(new Date(2019, 01, 04, 13, 0)).getTime(), (new Date(2019, 01,...