Home › Forums › Chart Support › xValue

xValue

Viewing 4 posts - 1 through 4 (of 4 total)
  • September 24, 2019 at 11:16 pm #26890

    jasonpdavid

    I want to get the charted xValue as the label for the striplines but I cannot get a value with e.dataPoint.y as the relY variable in the mousemove function.

    <!DOCTYPE HTML>
<html>
<head>  

<script type="text/javascript"> 
window.onload = function () {  

var chart = new CanvasJS.Chart("chartContainer", {

	theme: "light2",
	title:{
		text: "Simple Line Chart"
	},
	axisX: [{
        stripLines: [{
          	value: 2,
          	color: "#d8d8d8",
            label: "Start",
            labelFontColor: "#a8a8a8",
            showOnTop: 'true'
        }, {
          	value: 7,
          	color: "#d8d8d8",
            label: "Stop",
            labelFontColor: "#a8a8a8",
            showOnTop: 'true'
        }]
          }],
	axisY: [{
        stripLines: [{
          	startValue: 400,
			endValue: 550,
            color: "yellow"
        }]
    }],
	data: [{        
		type: "line",   
		dataPoints: [
			{ y: 450 },
			{ y: 414},
			{ y: 520,},
			{ y: 460 },
			{ y: 450 },
			{ y: 500 },
			{ y: 480 },
			{ y: 480 },
			{ y: 410 },
			{ y: 500 },
			{ y: 480 },
			{ y: 510 }
		]
	}]
});

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.axisX[0].stripLines.length; i++) {
    	if(relY > chart.axisX[0].stripLines[i].get("bounds").y1 && relY < chart.axisX[0].stripLines[i].get("bounds").y2 && relX > chart.axisX[0].stripLines[i].get("bounds").x1 - snapDistance && relX < chart.axisX[0].stripLines[i].get("bounds").x2 + 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 relX = e.pageX - parentOffset.top;
        var relY = chart.options.data[0].dataPoints[0].y;
        chart.options.axisX[0].stripLines[selected].value = chart.axisX[0].convertPixelToValue(relX);
      	if(selected == 0) {
        	chart.options.axisX[0].stripLines[selected].label = "Start: " + relY;}
        if(selected == 1) {
        	chart.options.axisX[0].stripLines[selected].label = "Stop: " + relY;
          }
    	chart.render();
    }
});

  
$(".canvasjs-chart-canvas").last().on("mouseup", function(e) {
		// Clear Selection and change the cursor

  	selected = -1;
    $(this).css("cursor","default");

}); 

}

</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>

</body>
</html>
    September 25, 2019 at 8:52 pm #26903

    Shashi Ranjan

    @jasonpdavid,

    In the code sample shared above relY gives the pixel coordinates of the chart with respect to axisY. Instead, you can use relX to get the pixel co-ordinate with respect to axisX and use convertPixelToValue to convert it to corresponding value co-ordinate and update the stripLine’s label accordingly as shown in this updated JSFiddle.

    If you are still facing the issue, kindly create JSFiddle reproducing the issue you are facing so that we can look into the code, understand the scenario better and help you resolve the same?

    From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact requirements or the solution that we provide may not work properly due to the variation in chart-options being used by you and us.

    Having a JSFiddle helps us in figuring out the issue and many a time we can just edit your code on JSFiddle to fix the issue right away.

    —
    Shashi Ranjan
    Team CanvasJS

    September 26, 2019 at 1:23 am #26909

    jasonpdavid

    Thank you for the response. Capturing the pixel value seems to provide me the position of my cursor and not the value of the datapoint where the stripline intersects the charted line. I would like to get the yValue where the stripline intersects and display the value.
    Non-Functioning Fiddle
    When I place e.dataPoint.y as the variable for relY, it prevents the striplines from moving.
    Basically, would like the crosshair function but on each of two striplines.

    September 26, 2019 at 8:43 pm #26922

    Shashi Ranjan

    @jasonpdavid,

    It’s not possible to get the value of intersection between the stripLine and the dataSeries line as of now.

    —
    Shashi Ranjan
    Team CanvasJS

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

You must be logged in to reply to this topic.