Home › Forums › Chart Support › set the multiple horizontal line by user input › Reply To: set the multiple horizontal line by user input
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>