Pre loader

How to get x and y axis values from user selected area

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0
0

Scenario: user selects an area of a heatmap chart using a box annotation via a mouse drag.

I have created a custom modifier to draw the box annotation. I’ve used this as the basis: SimpleDataPointSelectionModifier.ts

My question is: how to I get the X axis start + end values and the Y axis start + end values based on the area of the annotation/mouse coordinates.

Thanks

Version
1.4.1575
  • You must to post comments
0
0

Hi Henrique,

That should be pretty easy, and we do something similar to that already in SimpleDataPointSelectionModifier.ts.

const { xCalc, yCalc } = this.getDefaultCoordCalculators();
if (!xCalc) {
    return;
}
this.selectionAnnotation.x2 = xCalc.getDataValue(translatedPoint.x); // Convert point.x to X Data Value
this.selectionAnnotation.y2 = yCalc.getDataValue(translatedPoint.y); // Convert point.y to Y Data Value

function getDefaultCoordCalculators() {
    const xAxis = this.parentSurface.xAxes.get(0);
    const yAxis = this.parentSurface.yAxes.get(0);
    if (!xAxis || !yAxis) {
      return { xCalc: undefined, yCalc: undefined };
    }

    const xCalc = xAxis.getCurrentCoordinateCalculator();
    const yCalc = yAxis.getCurrentCoordinateCalculator();

    return { xCalc, yCalc };
}

Read more about converting pixel coordinates to data-values here.

Note it gets a little more complex in multi-axis scenarios. The coordinate calculator instance is for the current axis and current draw phase only.

Best regards,
Andrew

  • Henrique Rodrigues
    Thanks for your response Andrew, using this example code on our heatmap results in the annotation displayed in the wrong location. I’ve attached a video to show this.
  • You must to post comments
0
0

Thanks for your response Andrew, using this example code on our heatmap results in the annotation displayed in the wrong location. I’ve attached a video to show this.

  • You must to post comments
0
0

Hi Henrique, can’t see the video but it’s possible that you need to translate mouse-coordinates (which are relative to the parent SciChartSurface) to the inner seriesViewRect.

More info in the documentation page here: Converting Pixel Coordinates to data Values

Scroll down to this part:

Transforming Pixels to the ViewRect

Functions exist to translate a point from the parent canvas of the chart to the viewRect. This is useful if you want to transform a mouse-coordinate on the parent canvas into a data-value on the chart….

enter image description here

If you are still stuck share a short code sample with the current behaviour and expected behaviour and we can find you a solution.

Best regards,
Andrew

  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies