Cancel zoom, retrieving start and end date from selection zoom

[Christophe Bienaime]

Hello,

I want to implement some functionnalities using chartview. Let me explain :
- i have a chartview with one horizontal axis as DateTimeContinousAxis and some vertical axis
- i want to implement the zoom, it's ok, following code that i'm using :

<telerik:RadCartesianChart x:Name="chartVariables" ... Zoom="{Binding Zoom, Mode=TwoWay}"
PanOffset="{Binding PanOffset, Mode=TwoWay}" >
<telerik:RadCartesianChart.Behaviors>
<telerik:ChartPanAndZoomBehavior ZoomMode="Both" PanMode="None" />
</telerik:RadCartesianChart.Behaviors>
</telerik:RadCartesianChart>

- Using a toggle button, on check, i want to make a selection like zoom on the chart, get start date and end date and cancel the zoom
 but some problems occurs:
- The end date that i'm retrieving is wrong but the start date is ok

To do that i implemented the PanOffsetChanged event and i wrote the following code :

private void chartVariables_PanOffsetChanged(object sender, ChartPanOffsetChangedEventArgs e)
{
     if ((bool)this.btnInvalidate.IsChecked)
     {
          DateTimeContinuousAxis axis = chartVariables.HorizontalAxis as DateTimeContinuousAxis;

          DateTime startDate = axis.ActualVisibleRange.Minimum; // value is ok
          DateTime endDate = axis.ActualVisibleRange.Maximum;   // wrong

          tbLog.Text = "From : " + startDate.ToString() + " - To : " + endDate.ToString();

          chartVariables.Zoom = oldZoom;                // cancel the zoom
      }
}

Anybody can help me?
Thanks in advance
Regards

[Petar Marchev]

Hi Christophe,

1. I see that you are binding the PanOffset and Zoom to your view models. Is there a reason to do this? If not, I suggest you remove these bindings. If you think you need them, please share with us your reasons, perhaps you can use the HorozontalZoomRangeStart and End properties instead, or we can make some other suggestion.

2. You are trying to change the Zoom during the PanOffsetChanged event. The Zoom and PanOffset are tightly coupled and I think that it is a bad idea to change the zoom while the zoom is changing. Problems, like layout cycles, may occur.

3. You mention that you are trying to make a selection, is that right? So you do not want to make a drag-to-zoom operation at all, correct? Well, I suggest you completely disable the panzoom behavior (may be even remove it). Then you can draw a rectangle to denote what the user is about to select. We have a demo showing similar functionality here.

4. So, what you are trying to get from the axis.ActualVisibleRange.Minimum and Maximum is where the user dragged. You only need to get these values, and not zoom, but what you are doing is that the chart recalculates everything and lays out its visuals to zoom in, and then recalculates everything and lays out its visuals to zoom out. You see, you are making the chart work really hard, this leads to performance loss in your application.

I hope you understand that your current approach has some flaws.

It is much easier to draw your own drag-to-select rect. You can get the start and end values by using the conversion api of the chart - ConvertPointToData method.

I have attached a modified version of the drag-to-select sdk sample that, I think, demonstrates one way to get the behavior you require. Do check it out and see if you can adopt the approach into your actual application, and make the necessary modifications to it.

Regards,
Petar Marchev
Telerik

 

 

[Christophe Bienaime]

Hi Petar,

Thanks for you response. Following your suggestion, I removed PanOffset and Zoom binding, no need in particular. I tried to draw a drag-to-select rect but i'm having other problems. 
- At the initialization, it works, following steps:
  1. I'm pressing a button,
  2. ChartDragMode is set to None and drag to select is set to true
  3. I'm making a selection, and i'm retrieving datapoints in the good selection range.
  4. Reinit : ChartDragMode is set to Zoom and drag to select is set to false

But after that when i'm making some zoom, and i'm repeting previous steps, datapoints are false (datetime are wrong).

For retrieving datapoints i'm using following code:

private static void UpdateDataPointsInSelectionRectangle(RadCartesianChart chart)
        {
            Point fromPosition = GetFromPosition(chart);
            fromPosition.X -= chart.PanOffset.X;
            fromPosition.Y -= chart.PanOffset.Y;
            Point toPosition = GetToPosition(chart);
            toPosition.X -= chart.PanOffset.X;
            toPosition.Y -= chart.PanOffset.Y;
            Rect rect = new Rect(fromPosition, toPosition);

            DataPointsInSelectionRectangle = new List<DataTuple>();

            foreach (CategoricalSeries series in chart.Series)
            {
                foreach (CategoricalDataPoint dp in series.DataPoints)
                {
                    RadPoint point = dp.LayoutSlot.Center;
                    dp.IsSelected = rect.Contains(new Point(point.X, point.Y));

                    if (dp.IsSelected)
                    {
                        var pt = chart.ConvertPointToData(new Point(point.X, point.Y), chart.HorizontalAxis, chart.VerticalAxis);
                        DataPointsInSelectionRectangle.Add(pt);
                    }
                }
            }
        }

Thanks in advance
Regards

[Petar Marchev]

Hi Christophe,

I don't fully understand the issue at hand. Can you reproduce what you described in the project I attached? If you made any modifications to it, that may be the reason for the glitch. If you need further assistance, I will ask that you provide us with the project that reproduces this, so that we can run it. You need to also include explanations/steps how to reproduce it (images are also helpful).

Regards,
Petar Marchev
Telerik

 

 

[Christophe Bienaime]

Hi Petar,

I reproduced the issue with your project that you attached. For reproduce, following steps:

private static List<DataTuple> DataPointsInSelectionRectangle = new List<DataTuple>();

private static void UpdateDataPointsInSelectionRectangle(RadCartesianChart chart)
        {
            Point fromPosition = GetFromPosition(chart);
            fromPosition.X -= chart.PanOffset.X;
            fromPosition.Y -= chart.PanOffset.Y;
            Point toPosition = GetToPosition(chart);
            toPosition.X -= chart.PanOffset.X;
            toPosition.Y -= chart.PanOffset.Y;
            Rect rect = new Rect(fromPosition, toPosition);

            foreach (CategoricalSeries series in chart.Series)
            {
                foreach (CategoricalDataPoint dp in series.DataPoints)
                {
                    RadPoint point = dp.LayoutSlot.Center;
                    dp.IsSelected = rect.Contains(new Point(point.X, point.Y));

                    // following code add by me
                    if (dp.IsSelected)
                    {
                        var t = chart.ConvertPointToData(new Point(point.X, point.Y), chart.HorizontalAxis, chart.VerticalAxis);
                        var t2 = chart.ConvertPointToData(new Point(point.X, point.Y));
                        DataPointsInSelectionRectangle.Add(t);
                    }
                }
            }
        }

Then :
- make a zoom on chart
- select "drag-to-select" option
- in the DataPointsInSelectionRange collection, the datetime value is false

Regards

[Petar Marchev]

Hi Christophe,

This is the result of using the conversion api with incorrect input. The ConvertPointToData method expects the absolute coordinates in respect to the chart, so you need to adjust the PanOffset like this:

if (dp.IsSelected)
{
 point.X += chart.PanOffset.X;
 point.Y += chart.PanOffset.Y;
 var t = chart.ConvertPointToData(new Point(point.X, point.Y), chart.HorizontalAxis, chart.VerticalAxis);

Regards,
Petar Marchev
Telerik

 

 

[Christophe Bienaime]

Hi Petar,

It works, thanks for your help.

Regards