Vertical Marker Crosshair with Label using Striplines - CanvasJS JavaScript Charts

Vertical Marker Crosshair with Label using Striplines - CanvasJS JavaScript Charts

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: 98%; margin: 2%;"></div>

JavaScript

var data = [
    {
        "DATE": "2016-01-01",
        "Semester": "1",
        "AVGEWS": "35.0000",
        "AVGAR": "8.0000",
        "AVGGPA": "3.0000"
    },
    {
        "DATE": "2016-06-01",
        "Semester": "2",
        "AVGEWS": "32.8750",
        "AVGAR": "13.2500",
        "AVGGPA": "1.0000"
    },
    {
        "DATE": "2015-09-03",
        "Semester": "3",
        "AVGEWS": "3.0000",
        "AVGAR": "15.0000",
        "AVGGPA": "0.0000"
    }
];

var chart = new CanvasJS.Chart("chartContainer",
    {	  
      title:{
        text: "Vertical Marker (crosshair) using Striplines",
				verticalAlign: "top",
				horizontalAlign: "center",
      },
	  	toolTip:{
        shared: "true",
        contentFormatter: function ( e ) {
          var content = " ";
          for (var i = 0; i < e.entries.length; i++) {
            content += e.entries[i].dataSeries.name +" "+"<strong>"+ e.entries[i].dataPoint.y +"</strong>";
            content += "<br/>";
          }
          content += "<p id='xData' style='display:none;'>"+ e.entries[0].dataPoint.x+ "</p>";
          return content;
        }
     },
     axisX:{
     },
      axisY :{
        gridThickness : 0,
				lineDashType: "dot",
				includeZero: true,
				stripLines:[
				{                
             
					color: "rgba(83, 223, 128, .4)"                     
				}
				]
      },
	  data: getData(),
      
   });
chart.render();
	
//-------------using striplines as vertical marker-------------
function stripLineHandler(position){
  if(!chart.options.axisX){
    chart.options.axisX ={};
  }
  if(!chart.options.axisX.stripLines){
    chart.options.axisX.stripLines = [];
  }
  chart.options.axisX.stripLines[0] = {
    value : position,
    thickness: 2,
    //color:"red",
    showOnTop: true,
    label: (new Date(position).getDate()+"-"+new Date(position).getHours()+":"+new Date(position).getMinutes()+":"+new Date(position).getSeconds()),
    labelPlacement: "outside"
  }
  chart.render();
 }

var...