Showing labels in secondary axis corresponding to values in primary axis - CanvasJS JavaScript Charts

Showing labels in secondary axis corresponding to values in primary axis - 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", {
  axisY2: {
    title: "Total Time (in minutes)",
  },
  data: [
    {
      type: "stepLine",
      xValueFormatString: "hh:mm TT",
      //showInLegend: true,
      toolTipContent: "{status} : {x}",
      indexLabel: "{x}",
      dataPoints: [
        { x: new Date(2017, 04, 2, 11, 10), status:"On duty" },
        { x: new Date(2017, 04, 2, 11, 15), status:"Driving" },
        { x: new Date(2017, 04, 2, 11, 20), status:"Sleeping" },
        { x: new Date(2017, 04, 2, 11, 25), status:"Off Duty" },
        { x: new Date(2017, 04, 2, 11, 50), status:"Off Duty" }
      ]
    },
    {
      axisYType: "secondary",
    }
  ]
});

chartCustomisation();
calculatingTotalTime();
chart.render();
chart.axisY2[0].set("minimum", chart.axisY[0].get("minimum"));
chart.axisY2[0].set("maximum", chart.axisY[0].get("maximum"));

function chartCustomisation(){
  var mappingArray = [];
  for(var i = 0; i < chart.options.data[0].dataPoints.length; i++)
  {
    var dataPoint = chart.options.data[0].dataPoints[i];
    if(mappingArray.indexOf(dataPoint.status) < 0)
      mappingArray.push(dataPoint.status);
    dataPoint.y = mappingArray.indexOf(dataPoint.status) + 1;
  }

  chart.options.axisY = chart.options.axisY || { };
  chart.options.axisY.labelFormatter = function(e){
    return mappingArray[e.value-1] || "";
  };
}

function calculatingTotalTime(){
  var totalTimeOnDuty = 0;
  var totalTimeDriving = 0;
  var totalTimeSleeping = 0;
  var totalTimeOffDuty = 0;
  var mappingArray = [];

  for(var i = 0; i < chart.options.data[0].dataPoints.length - 1; i++)
  {
    if(chart.options.data[0].dataPoints[i].status === "On duty"){
      var timeInMinute = calculateDiff_minute(chart.options.data[0].dataPoints[i].x, chart.options.data[0].dataPoints[i+1].x);
      totalTimeOnDuty += timeInMinute;
    }

    else if(chart.options.data[0].dataPoints[i].status === "Driving"){
      var timeInMinute =...