Line Chart with dateTime axis - CanvasJS JavaScript Charts

Line Chart with dateTime axis - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="http://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: "Line Chart with dateTime axis and Label over Y axis"
  },
	axisX:{
		valueFormatString: " ",
    tickLength: 0
	},
  
  data: [
    {
      type: "line",
      xValueFormatString: "hh:mm TT",
      toolTipContent: "{student} : {x}",
      indexLabel: "{x}",
      dataPoints: [
        		{ x: new Date(2017, 04, 2, 11, 10), student:"Michael" },
        		{ x: new Date(2017, 04, 2, 11, 15), student:"John" },
       		 	{ x: new Date(2017, 04, 2, 11, 20), student:"Julie" },
            { x: new Date(2017, 04, 2, 11, 25), student:"John" },
            { x: new Date(2017, 04, 2, 11, 35), student:"John" }
      ]
    }
  ]
});

chartCustomisation();
chart.render();


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.student) < 0)
		  	mappingArray.push(dataPoint.student);
		  dataPoint.y = mappingArray.indexOf(dataPoint.student) + 1;
		}
    
		chart.options.axisY = chart.options.axisY || { };
		chart.options.axisY.labelFormatter = function(e){
		  return mappingArray[e.value-1] || "";
		 };
}