FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › set the multiple horizontal line by user input › Reply To: set the multiple horizontal line by user input

July 13, 2018 at 6:19 pm #21813

mohamed.k

Priyanka,
I developed the below code to use in my idea but when I added your last updated code I got a bug, whenever I move the mouse on the chart the stripline moves, I don’t want that I want when I click on spcific stripline of the 3 and move it normally,

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>

<script>
	
	$(document).on('keyup', '.forChange', function(){
		var valueLow = $(".classLow").val();
		var valueNormal = $(".classNormal").val();
		var valueHigh = $(".classHigh").val();
		forRun(valueLow, valueNormal, valueHigh);
	});
	
	
window.onload = function () {
	var valueLow, valueNormal, valueHigh = 10;
	
	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();
    }
}
*/
   

function forRun(valueLow, valueNormal, valueHigh){
var selected = -1;
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 Date(2013,00,01),y:[5937, 6111, 5935, 6034]},
      {x: new Date(2013,01,01),y:[6040, 6052, 5671, 5693]}
    ]
  }]
});

chart.render();

$(".canvasjs-chart-canvas").last().on("mousedown", function(e) {
  // Get the selected stripLine & change the cursor
  var parentOffset = $(this).parent().offset();
  var relX = e.pageX - parentOffset.left;
  var relY = e.pageY - parentOffset.top;
  var snapDistance = 5;

  for(var i = 0; i < chart.options.axisY[0].stripLines.length; i++) {
    if(relX > chart.axisY[0].stripLines[i].get("bounds").x1 && relX < chart.axisY[0].stripLines[i].get("bounds").x2 && relY > chart.axisY[0].stripLines[i].get("bounds").y1 - snapDistance && relY < chart.axisY[0].stripLines[i].get("bounds").y2 + snapDistance) {
      selected = i;
      $(this).css("cursor","pointer");
    }
  }
});

$(".canvasjs-chart-canvas").last().on("mousemove", function(e) {
// Get the selected stripLine & change the cursor
  var parentOffset = $(this).parent().offset();
  var relX = e.pageX - parentOffset.left;
  var relY = e.pageY - parentOffset.top;
  var snapDistance = 5;

  for(var i = 0; i < chart.options.axisY[0].stripLines.length; i++) {
    if(relX > chart.axisY[0].stripLines[i].get("bounds").x1 && relX < chart.axisY[0].stripLines[i].get("bounds").x2 && relY > chart.axisY[0].stripLines[i].get("bounds").y1 - snapDistance && relY < chart.axisY[0].stripLines[i].get("bounds").y2 + snapDistance) {
      selected = i;
      $(this).css("cursor","pointer");
    }
  }
});

$(".canvasjs-chart-canvas").last().on("mousedown", function(e) {
  // Get the selected stripLine & change the cursor
  var parentOffset = $(this).parent().offset();
  var relX = e.pageX - parentOffset.left;
  var relY = e.pageY - parentOffset.top;
  var snapDistance = 5;

  for(var i = 0; i < chart.options.axisY[0].stripLines.length; i++) {
    if(relX > chart.axisY[0].stripLines[i].get("bounds").x1 && relX < chart.axisY[0].stripLines[i].get("bounds").x2 && relY > chart.axisY[0].stripLines[i].get("bounds").y1 - snapDistance && relY < chart.axisY[0].stripLines[i].get("bounds").y2 + snapDistance) {
      selected = i;
      $(this).css("cursor","pointer");
    }
  }
});

$(".canvasjs-chart-canvas").last().on("mousemove", function(e) {
  // Move the selected stripLine
  if(selected !== -1) {
    var parentOffset = $(this).parent().offset();
    var relY = e.pageY - parentOffset.top;
    var yValue = chart.axisY[0].convertPixelToValue(relY);
    chart.options.axisY[0].stripLines[selected].value = yValue;
    chart.options.axisY[0].stripLines[selected].label = yValue.toFixed(0);
    chart.render();
  }
});

$(".canvasjs-chart-canvas").last().on("mouseup", function(e) {
  var parentOffset = $(this).parent().offset();
  var relX = e.pageX - parentOffset.left;
  var relY = e.pageY - parentOffset.top
  var xValue = Math.round(chart.axisX[0].convertPixelToValue(relX));
  var yValue = Math.round(chart.axisY[0].convertPixelToValue(relY));
  document.getElementById("displayPixel").innerHTML = "Pixels Coordinates: { " + relX + ", " + relY + "} <br/>" + "Value on Axis Scale: { " + xValue + ", " + yValue + "}"; 
  selected = -1;
  $(this).css("cursor","default");
});
}

</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
<script src="js/canvasjs.min.js"></script>
<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>

</body>
</html>