Range Bar Chart with Date Time over axisY - CanvasJS JavaScript Charts

Range Bar Chart with Date Time over axisY - 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 -->
<span style="position:absolute; z-index: 1; right: 10px">☐Only First Errors</span>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<div id="customLegends">
  <span style="color:green">◼</span>Machine Running
  <br/>
  <span style="color:red">◼</span>Machine Down
</div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Machine Operating Time"
  },
  zoomEnabled: true,
  zoomType: "y",
  axisX:{
    lineThickness:0
  },
  axisY: {
    minimum: (new Date(2016, 0, 25, 17, 30)).getTime(),
    maximum: (new Date(2016, 0, 27, 17, 30)).getTime(),
    interval: (12 * 60 * 60 * 1000),
    labelFormatter: function(e){
      return CanvasJS.formatDate(e.value, "DD-MMM h:mm TT");
    },
    stripLines:[
      {
        value: new Date(2016, 0, 26, 18, 30).getTime(),
        color:"black",
        lineDashType: "dash",
        label:"40258"
      }
    ]
  },
  toolTip:{
    contentFormatter: function ( e ) {
      return "Machine" + e.entries[0].dataPoint.label + "</br> Start Time: " + CanvasJS.formatDate(e.entries[0].dataPoint.y[0], "DD-MMM h:mm TT") + "</br> Stop Time: " + CanvasJS.formatDate(e.entries[0].dataPoint.y[1], "DD-MMM h:mm TT");
    }},
  data: [{
    type: "rangeBar",
    indexLabelPlacement:"inside",    
    indexLabel: "{name}",
    indexLabelFontColor: "white",
    indexLabelFormatter: function (e) {
      if(e.index === 1)
        return " ";
      else
        return e.dataPoint.name;
    },
    dataPoints: [
      { x: 1, label: "A", y: [new Date(2016, 0, 25, 17, 30).getTime(), new Date(2016, 0, 26, 18, 30).getTime()], name:"Machine Running", color:"green"},
      { x: 1, label: "A", y: [new Date(2016, 0, 26, 18, 30).getTime(), new Date(2016, 0, 27, 5, 30).getTime()], name:"Machine Down",color:"red" },
      { x: 1, label: "A", y: [new Date(2016, 0, 27, 5, 30).getTime(), new Date(2016, 0, 27, 15, 30).getTime()], name:"Machine Running",color:"green" }  
    ]
  }]                      
});
chart.render();