Using DateTime value on Y Axis of Column Chart - CanvasJS JavaScript Charts
Using DateTime value on Y Axis of Column Chart - CanvasJS JavaScript Charts
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: 300px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "How long an event occurred for on a given day"
},
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 "Duration<br>" + CanvasJS.formatDate(e.entries[0].dataPoint.y, "hh:mm TT");
}},
data: [
{
type: "column",
dataPoints: [
{ x: new Date(2010, 0, 3), y: (new Date(1970, 0, 3, 1, 0)).getTime() },
{ x: new Date(2010, 0, 4), y: (new Date(1970, 0, 3, 2, 0)).getTime()},
{ x: new Date(2010, 0, 5), y: (new Date(1970, 0, 3, 3, 0)).getTime()},
{ x: new Date(2010, 0, 6), y: (new Date(1970, 0, 3, 4, 0)).getTime() },
]
}
]
});
chart.render();