Using DateTime value on Y Axis - CanvasJS JavaScript Charts
Using DateTime value on Y Axis - CanvasJS JavaScript Charts (Time(X axis) and day(Y-axis))
by canvasjs
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Range Bar Time(X axis) and day(Y-axis)"
},
axisX: {
interval: 1,
intervalType: "day",
valueFormatString : "DD MMM",
},
axisY: {
minimum: (new Date(1970, 0, 3, 0, 0, 0)).getTime(),
interval: (1 * 60 * 60 * 1000),
labelFormatter: function(e){
return CanvasJS.formatDate(e.value, "hh:mm TT");
},
//suffix : " hour"
},
toolTip:{
contentFormatter: function ( e ) {
return "End : " + CanvasJS.formatDate(e.entries[0].dataPoint.y[1], "hh:mm TT")
+"</br> Start: " + CanvasJS.formatDate(e.entries[0].dataPoint.y[0], "hh:mm TT");
}},
data: [
{
type: "rangeBar",
dataPoints: [
{ x: new Date(2010, 0, 3),
y: [(new Date(1970, 0, 3, 1, 0)).getTime(), (new Date(1970, 0, 3, 2, 0)).getTime()] },
{ x: new Date(2010, 0, 4),
y: [(new Date(1970, 0, 3, 2, 0)).getTime(), (new Date(1970, 0, 3, 3, 0)).getTime()] },
{ x: new Date(2010, 0, 5),
y: [(new Date(1970, 0, 3, 1, 0)).getTime(), (new Date(1970, 0, 3, 2, 0)).getTime()] },
{ x: new Date(2010, 0, 6),
y: [(new Date(1970, 0, 3, 1, 30)).getTime(), (new Date(1970, 0, 3, 2, 45)).getTime()] }
]
}
]
});
chart.render();