Select a subset of a Line Series

[Ben]

I require the ability to select a subset of a line series and extract its data. Ideally I would do this with a click and drag, or two clicks, one on each endpoint. I've attached an image of the expected behavior.

Is this at all possible?

Attachment: expected_42051b6.zip

[Muneesh Kumar G]

Hi Ben, 

 

Thanks for using Syncfusion products.  

 

We have analyzed your requirement and we have achieved this by checking the segments within the selected region then updating the color to segments as per the below code snippet.  

 

Also, we would like to inform you that we have used annotation for region drawing for selection.  

 

Code snippet [XAML]: 

<chart:SfChart x:Name="chart"  Height="300" VerticalAlignment="Top" 

                       PointerPressed="chart_PointerPressed" PointerMoved="chart_PointerMoved" 

                       PointerReleased="chart_PointerReleased"> 

            <chart:SfChart.Annotations> 

                <chart:RectangleAnnotation HorizontalAlignment="Right" Fill="Transparent"   x:Name="rectangle" /> 

            </chart:SfChart.Annotations> 

            <chart:SfChart.PrimaryAxis> 

                <chart:DateTimeAxis x:Name="xAxis" LabelFormat="dd/MMM hh:mm"/> 

            </chart:SfChart.PrimaryAxis> 

            <chart:SfChart.SecondaryAxis> 

                <chart:NumericalAxis x:Name="yAxis"/> 

            </chart:SfChart.SecondaryAxis> 

            <local:LineSeriesExt XBindingPath="XValue" YBindingPath="YValue" Interior="Red" ItemsSource="{Binding Data}"/> 

        </chart:SfChart> 

 

 

Code snippet [C#]: 

private void chart_PointerReleased(object sender, PointerRoutedEventArgs e) 

        { 

            rectangle.Visibility = Visibility.Collapsed; 

 

            if (isDrag) 

            { 

                xRange = new DoubleRange((double)rectangle.X1, (double)rectangle.X2); 

                yRange = new DoubleRange((double)rectangle.Y1, (double)rectangle.Y2); 

 

 

                foreach (LineSeriesExt series in chart.Series) 

                { 

                    foreach (Syncfusion.UI.Xaml.Charts.LineSegment segment in series.ChartSegments) 

                    { 

                        var segmentXRange = segment.XRange; 

                        var segmentYRange = segment.YRange; 

 

                        if (series.ChartSelectedSegments.Count > 0 && series.ChartSelectedSegments.Contains(segment)) 

                        { 

                            (segment.GetRenderedVisual() as Line).Stroke = segment.Interior; 

                            series.ChartSelectedSegments.Remove(segment); 

                        } 

                        else if (xRange.Inside(segmentXRange) && yRange.Inside(segmentYRange)) 

                        { 

                            (segment.GetRenderedVisual() as Line).Stroke = new SolidColorBrush(Colors.Green); 

                            series.ChartSelectedSegments.Add(segment); 

                        } 

                    } 

                } 

            } 

            isDrag = false; 

        } 

 

 

We have prepared a sample based on this, please find the sample from the following location.  

 

Sample : http://www.syncfusion.com/downloads/support/forum/138979/ze/UWP_Sample-820354327 

 

Please let us know if you have any queries.  

 

Thanks, 

Muneesh Kumar G. 

[Ben]

This is excellent, thank you! Is there a simple way to extract the highlighted data and plot it on a second chart?

[Muneesh Kumar G]

Hi Ben,   

   

We have analyzed your requirement and we have achieved this by setting selected segments data to second chart series ItemsSource as per the below code snippet.  

  

Code snippet [XAML]:  

//First chart          

 <chart:SfChart x:Name="chart"   Grid.Row="1" 

                       PointerPressed="chart_PointerPressed" PointerMoved="chart_PointerMoved" 

                       PointerReleased="chart_PointerReleased"> 

.. 

            <local:LineSeriesExt XBindingPath="XValue" YBindingPath="YValue" Interior="Red" ItemsSource="{Binding Data}"/> 

        </chart:SfChart > 

 

//Second chart 

            <chart:SfChart x:Name="chart1"  Grid.Row="2" > 

 

                <chart:SfChart.PrimaryAxis> 

                    <chart:DateTimeAxis  LabelFormat="dd/MMM hh:mm"/> 

                </chart:SfChart.PrimaryAxis> 

                <chart:SfChart.SecondaryAxis> 

                    <chart:NumericalAxis /> 

                </chart:SfChart.SecondaryAxis> 

                <chart:LineSeries XBindingPath="XValue" YBindingPath="YValue" x:Name="series1"/> 

            </chart:SfChart> 

  

Code snippet [C#]:  

   ObservableCollection<Model> selectedData; 

        private void chart_PointerReleased(object sender, PointerRoutedEventArgs e) 

        { 

            rectangle.Visibility = Visibility.Collapsed; 

 

            if (isDrag) 

            { 

                .. 

                    } 

 

                    foreach (var selectedSegment in series.ChartSelectedSegments) 

                    { 

                        var segmentXRange = selectedSegment.XRange; 

                        var segmentYRange = selectedSegment.YRange; 

 

                        selectedData.Add(new Model(segmentXRange.Start.FromOADate(), segmentYRange.Start)); 

                    } 

 

                    double xEnd = series.ChartSelectedSegments[series.ChartSelectedSegments.Count - 1].XRange.End; 

                    double yEnd = series.ChartSelectedSegments[series.ChartSelectedSegments.Count - 1].YRange.End; 

                    selectedData.Add(new Model(xEnd.FromOADate(), yEnd)); 

 

                    series1.ItemsSource = selectedData; 

                } 

            } 

            isDrag = false; 

        } 

 

We have modified our sample based on this, please find the sample from the following location. 

 

Sample : http://www.syncfusion.com/downloads/support/forum/138979/ze/UWP_Sample-151324275 

 

Please let us know if you have any queries.   

   

Thanks,   

Muneesh Kumar G.