Placing StripLines based on the values passed by the user - CanvasJS JavaScript Charts

Placing StripLines based on the values passed by the user - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
Stripline value:<input id="value" type="number" style="width: 85px;" placeholder="Enter Value"/>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{
     axisX: {  
	      valueFormatString: "MMM/DD",   
      },
      axisY: {
        includeZero: false,
        stripLines:[
					{                
						color:"#FF0000",
            showOnTop: true
					}
        ]
      },
      data: [
    	{        
        type: "splineArea",
        dataPoints: [
        { x: new Date(2012, 01, 1), y: 107.60},
        { x: new Date(2012, 02, 3), y: 112.39},
        { x: new Date(2012, 03, 5), y: 116.50},
        { x: new Date(2012, 04, 7), y: 110.11},
        { x: new Date(2012, 05, 11), y: 121.21},
        { x: new Date(2012, 06, 13), y: 119.56},
        { x: new Date(2012, 07, 20), y: 118.74},
        { x: new Date(2012, 08, 21), y: 109.12},
        { x: new Date(2012, 09, 25), y: 115.77},
        { x: new Date(2012, 10, 27), y: 117.98}

        ]
      }
      ]
    });

 chart.render();

//---------------------- Handling the stripLines ------------------------
  function stripLineHandler(yPosition) {
  		currentValue = yPosition;
      chart.options.axisY.stripLines[0].label = currentValue;
      chart.options.axisY.stripLines[0].value = currentValue;
      chart.render();
  }

 	var inputValue = document.getElementById("value");
    inputValue.addEventListener("change", function(){
    stripLineHandler(inputValue.value);
    });