Home forums Using CanvasJS set the multiple horizontal line by user input

This topic contains 11 replies, has 2 voices, and was last updated by  Priyanka M S 2 months, 1 week ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #21364

    mohamed.k
    Member

    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.

    #21368

    Priyanka M S
    Member

    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

    #21594

    mohamed.k
    Member

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

    #21743

    Priyanka M S
    Member

    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

    #21783

    mohamed.k
    Member

    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

    #21806

    Priyanka M S
    Member

    Mohamed,

    Please take a look at this jsfiddle.

    __
    Priyanka M S
    Team CanvasJS

    #21807

    mohamed.k
    Member

    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 .

    #21811

    Priyanka M S
    Member

    Mohamed,

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

    __
    Priyanka M S

    #21813

    mohamed.k
    Member

    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>
    #21815

    Priyanka M S
    Member

    Mohamed,

    Kindly share a jsfiddle representing your issue.

    __
    Priyanka M S
    Team CanvasJS

    #21820

    mohamed.k
    Member

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

    #21846

    Priyanka M S
    Member

    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)

You must be logged in to reply to this topic.