set the multiple horizontal line by user input

This topic has 11 replies, 2 voices, and was last updated 6 years, 3 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.

FORUMS

set the multiple horizontal line by user input

Quick Links

Server Side Technologies

Front Side Technologies

Contact

FORUMS

Login to Ask a Question or Reply

set the multiple horizontal line by user input