Moving AnnotationXY box to select data points

A forum dedicated to WinForms version of LightningChart Ultimate.

Moderator: Arction_LasseP

Kenselting
Posts: 7
Joined: Mon Apr 24, 2017 3:24 pm

Moving AnnotationXY box to select data points

Post by Kenselting » Mon Apr 24, 2017 3:55 pm

I have been trying to use an AnnotationXY item to provide a functionality to select data point in a rectangle on an XY chart.

Following the basic details here: viewtopic.php?f=16&t=207 I am able to create the box and size it properly when using the screen coordinate system. However, I want to keep the box visible to allow the user to resize and move it at will, while zooming in/out on the chart, much as I can do with Bands bound to the X or Y axis. The problem is that, when using the screen coordinate system, the box does not resize when zooming in/out - that makes total sense and I understand I would need to override a bunch of events (ranged changed, chart resize, zoom changed, etc.). I started implementing some of this successfully, however I stopped myself: I keep thinking there out to be a simpler way - even if using an AnnotationXY as a selection box is obviously a hack around something that wasn't quite meant to be used this way.

So I tried working with the LocationCoordinateSystem / AxisValues and Sizing/AxisValuesBoundaries. When setting static values and playing with the zoom, everything works as expected, with the box resizing properly. The problem happens when I try to interact with the mouse with the box, to move or resize it: it appears there is a conflict between the coordinate system thinking the X/Y location of the box is in the center of the box (rather than the top-left corner), but maybe not consistently so. Bottom line: the box jumps around, resizes in odd ways and is ultimately useless.

I am hoping I'm just missing something silly on the meaning/usage of those AxisValuesBoundaries.

Here is some sample code to reproduce what I'm seeing:

Code: Select all

// Create the annotation
var xySelector = new AnnotationXY
{
    Style = AnnotationStyle.Rectangle,
    Anchor =
    {
        X = 0,
        Y = 0
    },
    AnchorAdjustByMouse = false,
    Sizing = AnnotationXYSizing.AxisValuesBoundaries, // We'll be using Axis information rather than screen
    LocationCoordinateSystem = CoordinateSystem.AxisValues, // Same
    BorderLineStyle =
    {
        Color = Color.DimGray,
        Width = 1,
        Pattern = LinePattern.Solid
    },
    Fill = new Fill
    {
        Color = Color.FromArgb(150, 224, 224, 224),
        Style = RectFillStyle.ColorOnly,
        GradientFill = GradientFill.Solid
    },
    NibStyle = new AnnotationNibStyle {Alpha = 0},
    Text = string.Empty,
    TextStyle = new AnnotationTextStyle {Visible = false},
    RotateByMouse = false,
    Shadow = {Visible = false},
    Visible = true,
    MouseInteraction = true,
    MoveByMouse = true,
    ResizeByMouse = true,
    MouseHighlight = MouseOverHighlight.None
};

// Grab the two axes
var xAxis = _chart.ViewXY.XAxes[0];
var yAxis = _chart.ViewXY.YAxes[0];

// That's me trying to initialize the box to cover the entire chart area... What happens instead is that the box is created with the proper size, the the top-left corner in the middle of the chart
xySelector.AxisValuesBoundaries.SetValues(xAxis.Minimum, xAxis.Maximum, yAxis.Minimum, yAxis.Maximum);
xySelector.LocationAxisValues.SetValues(xAxis.Minimum, yAxis.Maximum);

// Add the annotation to the chart
_chart.ViewXY.Annotations.Add(xySelector);

// Now trying moving or resizing the box. Everytime you click on the top left corner of the box, it jumps to the bottom right, likely because the screen coordinate is recalculated from the center coordinates of the box...
Clearly I'm doing something wrong, but can't figure out why.

Thanks in advance for the help!

User avatar
ArctionPasi
Posts: 1366
Joined: Tue Mar 26, 2013 10:57 pm
Location: Finland

Re: Moving AnnotationXY box to select data points

Post by ArctionPasi » Mon Apr 24, 2017 6:18 pm

Hi,

we have example with rectangle selecting. Please check if this fulfills your requirement:
Rectangle selecting
Rectangle selecting
rectangle-selecting.jpg (341.25 KiB) Viewed 5294 times
LightningChart Support Team, PT

Kenselting
Posts: 7
Joined: Mon Apr 24, 2017 3:24 pm

Re: Moving AnnotationXY box to select data points

Post by Kenselting » Tue Apr 25, 2017 10:29 am

Pasi,

Thank you - that indeed worked. It took me a while however to figure out why, as I could see little difference between that code and mine.

For anyone who might run into the same problem, I finally narrowed this down to me setting the Anchor to 0,0 - As soon as I removed that form the initialization, everything worked as expected.

Thanks again Pasi!