Real Time Binding on Chart Using DataView

[Matrix Sensors]

Hello SyncFusion Team, 

I am working on software to read in a .csv with timeseries data. Upon reading a the file, it's contents are populated to a DataTable and its columns are added to a ComboBox. The user is able to select different columns from the ComboBox and press a button to add a plot of the selected column to a StackPanel. 

I would like to bind these Add/Removeable SfCharts to a DataView of the DataTable. I am planning on adding a feature where the user is able to highlight selections on the plot and update these selections. Using a DataView would be the more optimal choice due to the need of data structure that can hold all of the potential columns the user wants to plot, and for its RowFilter feature for updating the highlighted segments as the user changes their selection. Is this possible to do? I have not had success in binding a DataView to the FastLineBitmapSeries's ItemSource.

Thank you.

[Dhanaraj Rajendran]

Hi Matrix Sensors,

Thank you for reaching out!

We’ve looked into your query, and we’d like to clarify a few points. Currently, the ItemsSource of the chart series in Syncfusion charts supports binding with collections such as ObservableCollection, List, Array, and DataTable. Unfortunately, binding directly to a DataView is not supported, so we recommend using a DataTable instead for your data binding needs.

Here’s a helpful KB link that provides detailed guidance on binding a DataTable in WPF SfChart.

KB Link: How to bind data table in WPF chart?

Regarding handling multiple selections on the FastLineBitmapSeries, this can indeed be managed through interactive features within the chart, allowing users to highlight and update selected segments on the plot.

Please feel free to reach out if you have further questions!

Regards,

Dhanaraj Rajendran.

[Matrix Sensors]

Hello,

Thank you for your response! I previously tried using the interactions natively provided by SyncFusion, but using the selection feature only seemed to select points one by one. Is there a specific setting I missed? 

The requirements I have for my plot interactions are:

• Rectangular Zoom (I haven't had issues with this native feature, it is very clean)
• Rectangular Selection - Select regions of my FastLineBitmapSeries in the same fashion as the Rectangular Zoom, but rather than zoom, highlight those points instead
• Time Constrained Selection - Place a point and select a region around it under some time/index constraint, drag point around to update selection (maybe I could use the trackball to implement this?)

To achieve this I have placed a canvas over the chart where all of these interactions can be performed, and are changed using a ComboBox. 

Additionally, I would also like the user to be able to have different 'selection profiles'. For instance, the user selects some regions under "Profile 1", and then can create another "Profile 2" and store a different set of selected segments. 

Please let me know if this is achievable using the interactive chart features. 

Thank you for your assistance!

[Arul Jenith Berkmans]

Hi Matrix Sensors,

We have reviewed your query and are glad to provide insights on achieving these selection functionalities.

Query 1: Rectangular Selection - Select regions of my FastLineBitmapSeries in the same fashion as Rectangular Zoom but highlight those points instead of zooming.

In WPF, you can implement a rectangular selection that highlights the points in the selected region instead of zooming.

Please refer to the MAUI KB article - How to highlight selected data points in .NET MAUI Cartesian Charts?  which provides guidance on customizing this feature. If you'd like further details or a sample, feel free to let us know, and we’ll be happy to assist.

Query 2: Time-Constrained Selection - Place a point and select a region around it under a specific time/index constraint, dragging the point to update the selection (possibly using the trackball).

For this, we recommend utilizing the DateTimeRangeSelector, which allows you to define a specific range on a time or index constraint and provides functionality to drag and update the selected range dynamically.

To learn more about DateTimeRangeselector, please visit the document:  Getting Started with WPF Range Selector control | Syncfusion

Thank you for your patience and understanding.

Best regards,

Arul Jenith B.

[Matrix Sensors]

Thank you for your reply this looks exactly like what I need! Although, I am running into an issue in this step:

bitmapSeries.SelectionBehavior.SelectedIndexes = selectedIndexes;



SelectionBehavior does not seem to be a property of the FastLineBitmapSeries in WPF. Is this feature only supported in .NET Maui? Could you please provide a sample of Query1 in WPF?


Thank you!

[Arul Jenith Berkmans]

Hi Matrix Sensors,

We have prepared the sample for to select regions of my line series in the same fashion as Rectangular Zoom but highlight those points instead of zooming.

In this sample, we used the canvas with mouse interaction events and implement the mouse interaction events to select the desired data points using the mouse drag and create the new series with selected data points.

Here is a simple code example in c#:

public partial class MainWindow : Window

{

    private Point startPoint;

    private Rectangle currentRectangle;

    private Rect currentRect;

 

    public MainWindow()

    {

        InitializeComponent();

    }

 

    private void OnMouseMove(object sender, MouseEventArgs e)

    {

        if (e.LeftButton == MouseButtonState.Pressed && currentRectangle != null)

        {

            // Update the size of the rectangle as the mouse is dragged

            double width = e.GetPosition(drawingCanvas).X - startPoint.X;

            double height = e.GetPosition(drawingCanvas).Y - startPoint.Y;

            if (width > 0 && height > 0)

            {

                currentRect = new Rect(startPoint.X, startPoint.Y, width, height);

                currentRectangle.Width = width;

                currentRectangle.Height = height;

            }

        }

    }

 

    private void OnMouseDown(object sender, MouseButtonEventArgs e)

    {

        startPoint = e.GetPosition(drawingCanvas);

 

        // Create a new rectangle

        currentRectangle = new Rectangle

        {

            Stroke = Brushes.Black,

            StrokeThickness = 1,

            Fill = Brushes.Transparent

        };

 

        // Add the rectangle to the canvas

        drawingCanvas.Children.Add(currentRectangle);

 

        // Set the initial position of the rectangle

        Canvas.SetLeft(currentRectangle, startPoint.X);

        Canvas.SetTop(currentRectangle, startPoint.Y);

    }

 

    private void OnMouseUp(object sender, MouseButtonEventArgs e)

    {

        viewModel.SelectedDataPoints = series.GetDataPoints(currentRect);

        currentRectangle = null;

        currentRect = Rect.Empty;

        drawingCanvas.Children.Clear();

    }

 

}

XAML:

<Grid>

    <chart:SfChart x:Name="chart"  >

       

     .     .     .      .

 

        <chart:LineSeries ItemsSource="{Binding Data}" 

                          XBindingPath="XValue"

                          YBindingPath="Height" x:Name="series">

 

 

        </chart:LineSeries>

        <chart:LineSeries ItemsSource="{Binding SelectedDataPoints}"  

                          XBindingPath="XValue"

                          YBindingPath="Height" x:Name="additionalSeries">

        </chart:LineSeries>

 

 

    </chart:SfChart>

 

    <Canvas Name="drawingCanvas" Background="Transparent" Grid.Column="0"

   MouseDown="OnMouseDown" MouseUp="OnMouseUp" Mouse.MouseMove="OnMouseMove"/>

 

</Grid>

The sample is attached for your reference, and you can review it to see the implementation.

For more details, please refer to the How to select multiple scatter data points with mouse drag in WPF Chart?

If you need any further assistance, please feel free to ask. Thank you for your patience and understanding.

Best regards,

Arul Jenith B.

Attachment: SelectRegionSample_1b7c4b38.zip

[Matrix Sensors]

This works great! Thank you for all your help, I appreciate it!

[Preethi Rajakandham]

Hi Matrix,

You're welcome. 

We are glad that the provided response meets your requirement. We will mark this thread as solved. Please let us know if you need further assistance. As always, we are happy to help you out. 

Regards,

Preethi R