Home forums Using CanvasJS xValue

This topic contains 3 replies, has 2 voices, and was last updated by  Shashi Ranjan 3 weeks, 5 days ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #26890

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

    @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

    #26909

    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.

    #26922

    @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.