Range selection

[Ondrej Svoboda]

I need to allow user to select a range of X-axis values in SfChart with ScatterSeries. There should be two vertical lines (showing min and max values) which user can drag (or use click) to move them to desired position. Program code will then listen and process range change events. Would be nice to have the option to visually distinguish the selected part of the series - different color or gray out the not selected part.

Is something like that possible to implement in SfChart?

[Baranibharathi Pandian]

Hi Ondrej Svoboda,

 

We have validated your query and would like to inform you that it is possible to achieve the requirement of dragging an annotation along the axis direction and updating the axis range based on the dragged value. This can be implemented using the draggable annotation feature along with the available annotation events.

 

For your reference, we have shared the relevant documentation and a sample demonstrating this approach:

 

• Annotation interaction: Annotations in WPF Charts control | Syncfusion
• Annotation events: Annotations in WPF Charts control | Syncfusion

 

Please review the sample and demo. Kindly note that the provided implementation is only an example representation of the requirement. You can further customize the behavior and appearance according to your specific needs.

 

If you require any additional assistance or have further questions, please feel free to contact us.

 

Regards,

Baranibharathi P.

Attachment: F198477_92cc7937.zip

[Ondrej Svoboda]

Thanks, I've implemented that using two VerticalLineAnnotations. It works perfectly.

Since I also have there ChartTrackBallBehavior it would be nice to hide the trackball when mouse is over one of these annotation lines. Is that possible?

[Dhanaraj Rajendran]

Hi Ondrej Svoboda,

 

Yes, this can be achieved. You can customize the ChartTrackBallBehavior and control when the trackball is shown or hidden. Using the chart's MouseMove event, you can check whether the mouse pointer is currently over a VerticalLineAnnotation.

When the mouse is positioned over an annotation line, you can hide the trackball. Otherwise, you can display it at the current mouse position.

Please refer to the following code example:

<chart:SfChart MouseMove="SfChart_MouseMove"/>

private void SfChart_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)

{

    if (sender is SfChart chart)

    {

        if (e.OriginalSource is Line line && line.Tag is VerticalLineAnnotation)

        {

            trackball.Hide(); ////Hide trackball if pointer is positioned at annotation line

        }

        else

        {

            var touchPoint = e.GetPosition(chart);

            trackball.Show((float)touchPoint.X, (float)touchPoint.Y);

        }

    }

}

 

For additional information, we have provided a related KB article.

KB Article: Enable or disable the trackball in WPF Chart | Syncfusion

Also, we have attached a sample application for your reference.

 

Thank you.

 

Regards,

Dhanaraj Rajendran.

Attachment: F198477_2c51eb43.zip

[Ondrej Svoboda]

Thanks, but in you sample the trackball is somehow shifted to the right from the mouse position. What is wrong there?

[Dhanaraj Rajendran]

Hi Ondrej Svoboda,

 

Thank you for pointing this out.

We validated the issue where the trackball appears slightly shifted to the right of the mouse pointer. This happens because the position obtained from the mouse event is not in the chart series area's coordinate system. As a result, the trackball is displayed at an offset position.

To resolve this, we need to convert the mouse position to the chart series area's coordinates before calling the trackball's Show method. For more information on coordinate conversion, please refer to the User Guide documentation on converting chart points and axis values.

UG Documentation: Transform axis value to pixel value in WPF Chart Control | Syncfusion

private void SfChart_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)

{

    if (sender is SfChart chart)

    {

        var touchPoint = e.GetPosition(chart);

 

        touchPoint.X = touchPoint.X - chart.SeriesClipRect.Left - chart.Margin.Left;

        touchPoint.Y = touchPoint.Y - chart.SeriesClipRect.Top - chart.Margin.Top;

 

        if (e.OriginalSource is Line line && line.Tag is VerticalLineAnnotation)

        {

           trackball.Hide(); ////Hide trackball if pointer is positioned at annotation line

        }

        else if (chart.DataContext is ViewModel viewModel)

        {

            var rangeMin = chart.ValueToPoint(chart.PrimaryAxis, viewModel.MinDate.ToOADate());

            var rangeMax = chart.ValueToPoint(chart.PrimaryAxis, viewModel.MaxDate.ToOADate());

 

            if (touchPoint.X >= rangeMin && touchPoint.X <= rangeMax)

            {

                trackball.Hide();

            }

            else

            {

                trackball.Show((float)touchPoint.X, (float)touchPoint.Y);

            }

        }

        else

        {

            trackball.Show((float)touchPoint.X, (float)touchPoint.Y);

        }

    }

}

 

We have also attached an updated sample demonstrating this approach for your reference.

Thank you.

 

Regards,

Dhanaraj Rajendran.

Attachment: F198477_9c248ae4.zip