Draggable Stripline with Labels in Candlestick Chart - CanvasJS JavaScript Charts

Draggable Stripline with Labels in Candlestick Chart - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
<label for="classlow" class="addLow"> Low price</label>
<input type="text" name="low" class="classLow forChange">

<label for="classNormal" class="addnormal"> Normal Price</label>
<input type="text" name="normal" class="classNormal forChange">

<label for="classHigh" class="addHigh">High price</label>
<input type="text" name="high" class="classHigh forChange">

<span class="doHere"></span>

JavaScript

var valueLow, valueNormal, valueHigh = 10;
forRun(valueLow, valueNormal, valueHigh);

$(document).on('keyup', '.forChange', function(){
		var valueLow = $(".classLow").val();
		var valueNormal = $(".classNormal").val();
		var valueHigh = $(".classHigh").val();
		forRun(valueLow, valueNormal, valueHigh);
	});
	
    /*function recordToFilename() {
    var input = document.getElementById('filename'),
        fileName = input.value;
    if (fileName) {
        Recorder.record('audio', fileName);
    } else {
        alert('Please enter a filename!');
        input.focus();
    }
}
*/
 
var selected = -1;  

function forRun(valueLow, valueNormal, valueHigh){
var chart = new CanvasJS.Chart("chartContainer", {        
  title: {
    text: "idea from canvasjs"
  },
  axisX: {
    interval:2,
    intervalType: "month",
    valueFormatString: "MMM-YY",
    labelAngle: -45
  },
  axisY: [{
    includeZero:false,
    title: "Prices",
    prefix: "$ ",
    stripLines: [{
      value: valueLow,
      label: "$ "+valueLow,
      labelPlacement: "outside"
    }, {
      value: valueNormal,
      label: valueNormal,
      labelPlacement: "outside"
    }, {
      value: valueHigh,
      label: valueHigh,
      labelPlacement: "outside"
    }]
  }],
  data: [{
    type: "candlestick",
    dataPoints: [
      { x: new Date(2012,01,01),y:[5198, 5629, 5159, 5385]},
      {x: new Date(2012,02,01),y:[5366, 5499, 5135, 5295]},
      {x: new Date(2012,03,01),y:[5296, 5378, 5154, 5248]},
      {x: new Date(2012,04,01),y:[5254, 5279, 4788, 4924]},
      {x: new Date(2012,05,01),y:[4910, 5286, 4770, 5278]},
      {x: new Date(2012,06,01),y:[5283, 5348, 5032, 5229]},
      {x: new Date(2012,07,01),y:[5220, 5448, 5164, 5258]},
      {x: new Date(2012,08,01),y:[5276, 5735, 5215, 5703]},
      {x: new Date(2012,09,01),y:[5704, 5815, 4888, 5619]},
      {x: new Date(2012,10,01),y:[5609, 5885, 5548, 5879]},
      {x: new Date(2012,11,01),y:[5878, 5965, 5823, 5905]},
      {x: new...