Home Forums Chart Support Find max peak on spline chart

Find max peak on spline chart

Viewing 3 posts - 1 through 3 (of 3 total)
  • #34464

    From the chart object, is there a way to get the max x and y values from a spline chart? Alternatively, is there a way to get a formula on how the line was drawn?

    Here is a jsfiddle for an example of the chart. https://jsfiddle.net/26c9a5yq/1/

    The max is somewhere around where y ~ 102.5 and x ~ 15ish.

    #34501

    @dunhamcd,

    CanvasJS uses Bézier curve interpolation to represent the curve passing through the given dataPoints. We don’t have any property to find the coordinates of the highest / lowest peak as of now. However, you can achieve the same by getting the image from the rendered chart & processing it to find the colored pixel-coordinate from top to bottom. Later you can use convertPixelToValue to get the value corresponding to the pixel-coordinate as shown in the code-snippet below,

    var imageData = chart1.ctx.getImageData(chart1.plotArea.x1, chart1.plotArea.y1, chart1.plotArea.width, chart1.plotArea.height).data;
    
    coloredRegionData = [];
    for (var i = 0; i < imageData.length; i += 4) {
        if (i % (4 * chart1.plotArea.width) === 0) {
          coloredRegionData.push([]);
          temp = i;
        }
        if (imageData[i] === 255 && imageData[i+1] === 0) {
          coloredRegionData[coloredRegionData.length - 1].push((i - temp) / 4);
        }
    } 
    
    splinePixelCordinates = [];
    for (var i = 0; i < coloredRegionData.length; i++) {
        for (j = 0; j < coloredRegionData[i].length; j++) {
          splinePixelCordinates.push({
            x: chart1.plotArea.x1 + coloredRegionData[i][j],
            y: chart1.plotArea.y1 + i
          })
        }
    } 

    Please take a look at this JSFiddle for an example on finding the coordinates of the highest / lowest peak.

    spline chart with peak values


    Adithya Menon
    Team CanvasJS

    #34504

    This is perfect! Thanks for sending this over.

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

You must be logged in to reply to this topic.