Date-Time support in Y-axis - CanvasJS JavaScript Charts
Date-Time support in Y-axis workaround - 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: 360px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer",
{
axisY: {
includeZero: false,
interval: 60 *1000, //Here interval is set to minute
labelFormatter: function (e) {
return CanvasJS.formatDate( e.value, "hh:mm:ss"); //For showing dateTime format in Y axis
}
},
toolTip:{
contentFormatter: function (e) {
return CanvasJS.formatDate(e.entries[0].dataPoint.y,"hh:mm:ss TT"); //Formatting dateTime in ToolTip
}
},
data: [
{
type: "column",
dataPoints: [
{ x: 10, y: new Date(2016, 1, 15, 8, 16, 15)},
{ x: 20, y: new Date(2016, 1, 15, 8, 16, 35)},
{ x: 30, y: new Date(2016, 1, 15, 8, 16, 05)},
{ x: 40, y: new Date(2016, 1, 15, 8, 15, 15)},
{ x: 50, y: new Date(2016, 1, 15, 8, 17, 15)},
{ x: 60, y: new Date(2016, 1, 15, 8, 16, 50)},
{ x: 70, y: new Date(2016, 1, 15, 8, 18, 15)},
{ x: 80, y: new Date(2016, 1, 15, 8, 16, 15)},
{ x: 90, y: new Date(2016, 1, 15, 8, 14, 15)}
]
}
]
});
changeDateTimeToTimestamp(chart.options.data);
chart.render();
//-------Function for changing dateTime of all dataSeries to corresponding timestamp
function changeDateTimeToTimestamp (data){
for(var i = 0; i < data.length; i++){
var dataSeries = data[i];
for(var j = 0; j < dataSeries.dataPoints.length; j++){
if(dataSeries.dataPoints[j].y.getTime)
dataSeries.dataPoints[j].y = dataSeries.dataPoints[j].y.getTime();
}
}
}