set the multiple horizontal line by user input

This topic has 11 replies, 2 voices, and was last updated 5 years, 8 months ago by Priyanka M S.

Viewing 12 posts - 1 through 12 (of 12 total)

July 4, 2018 at 5:23 am #21364

Hello,
I want to make user drag and drop the horizontal line (Crosshair) and return value, and I want also let him using popup to input value to set multiple the horizontal line.

July 4, 2018 at 5:22 pm #21368

Priyanka M S

Mohamed,

Crosshair is used to show the x & y axis values at the current mouse co-ordinates or the nearest data points. It is not possible to drag and drop Crosshair. However, you can achieve drag and drop functionality with striplines. Please take a look at this jsfiddle.

You can accept input value from user and place a stripline at specified position. Please take a look at this jsfiddle.

__
Priyanka M S
Team CanvasJS

July 9, 2018 at 7:03 pm #21594

mohamed.k

Thanks Priyanka,
another question how can I use dragging striplines with candlestick at jsfiddle.

July 10, 2018 at 12:27 pm #21743

Priyanka M S

Mohamed,

You can achieve drag and drop functionality of stripLines with any chart with axes. Please take a look at this updated jsfiddle.

__
Priyanka M S
Team CanvasJS

July 12, 2018 at 12:11 pm #21783

mohamed.k

Excellent,
so now how can I retrieve the price when I drag the stripLines, for example I dragged the stripLines into $3600, so I want to retrieve this value, how could I retrieve this value inside a variable, thanks in advance

July 13, 2018 at 5:24 pm #21806

Priyanka M S

Mohamed,

Please take a look at this jsfiddle.

__
Priyanka M S
Team CanvasJS

July 13, 2018 at 5:35 pm #21807

mohamed.k

Priyanka,
I tried last jsfiddle but first i can’t drag the striplines it fixed plus I want when I move the line the value of the new place saved in a variable .

July 13, 2018 at 6:10 pm #21811

Priyanka M S

Mohamed,

Please take a look at this updated jsfiddle, which provides both the pixel and axis coordinates.

__
Priyanka M S

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>

July 13, 2018 at 6:27 pm #21815

Priyanka M S

Mohamed,

Kindly share a jsfiddle representing your issue.

__
Priyanka M S
Team CanvasJS

July 13, 2018 at 6:40 pm #21820

mohamed.k

Sorry I didn’t understand, what do you mean ?

July 16, 2018 at 5:25 pm #21846

Priyanka M S

Mohamed,

In the code you have provided above, the mousemove event is defined to perform the same functions as that of mousedown event. Also, the events have been duplicated. Please take a look at this jsfiddle.

__
Priyanka M S
Team CanvasJS

Viewing 12 posts - 1 through 12 (of 12 total)

Tagged: Crosshair, horizontal

You must be logged in to reply to this topic.

Front End Technology Samples

Server Side Technology Samples

FORUMS

Login to Ask a Question or Reply

set the multiple horizontal line by user input