This article provides a detailed walkthrough on how to add multiple trackballs in an WPF Chart , allowing you to hover over the trackball with your mouse and move them independently to view the information of different data points simultaneously. Learn step-by-step instructions and gain insights to add multiple trackballs in a WPF SfChart. Step 1: Initialize the SfChart with primary and secondary axes. For more detailed steps, refer to the WPF Charts documentation. XAML <Grid> <chart:SfChart x:Name="chart"> <chart:SfChart.PrimaryAxis> <chart:CategoryAxis/> </chart:SfChart.PrimaryAxis> <chart:SfChart.SecondaryAxis> <chart:NumericalAxis/> </chart:SfChart.SecondaryAxis> <chart:LineSeries ItemsSource="{Binding Data}" XBindingPath="Day" YBindingPath="CPULoad" > </chart:LineSeries> </chart:SfChart> </Grid> Step 2: Create a custom ChartTrackBallBehaviorExt class, which is inherited from ChartTrackballBehavior. C# public class ChartTrackBallBehaviorExt : ChartTrackBallBehavior { } Step 3: Create instances of ChartTrackBallBehaviorExt, and add them to the Behaviors collection, assigning specific names to each. XAML <chart:SfChart.Behaviors> <local:ChartTrackBallBehaviorExt x:Name="trackball1"/> <local:ChartTrackBallBehaviorExt x:Name="trackball2"/> </chart:SfChart.Behaviors> Step 4: Implement the ChartTrackBallBehaviorExt class and its functionalities. Include the Display method, which is responsible for displaying the trackball at specified coordinates by setting the IsActivated protected property of the ChartTrackBallBehavior class. Manage multiple trackballs by overriding mouse event handlers in ChartTrackBallBehavior, using the FindNearestTrackball method in OnMouseEnter to locate the closest trackball. The isTrackballActive variable ensures only the active trackball responds to the events. public class ChartTrackBallBehaviorExt : ChartTrackBallBehavior { private bool isTrackballActive = false; public SfChart? SfChart { get; set; } public double X { get; set; } public double Y { get; set; } protected override void OnMouseEnter(MouseEventArgs e) { // Get the position of the mouse pointer var touchPoint = e.GetPosition(null); // Find the nearest trackball to the mouse pointer var trackball = FindNearestTrackball(touchPoint); // Activate the trackball if it is the nearest one if (trackball == this) { isTrackballActive = true; base.OnMouseEnter(e); } } protected override void OnMouseMove(MouseEventArgs e) { // Check if the trackball is activated if (isTrackballActive) { // Get the position of the mouse pointer var touchPoint = e.GetPosition(null); // Display the trackball at the current mouse position Display((float)touchPoint.X, (float)touchPoint.Y); base.OnMouseMove(e); } } protected override void OnMouseLeave(MouseEventArgs e) { // Deactivate the trackball isTrackballActive = false; } private ChartTrackBallBehavior FindNearestTrackball(Point touchPoint) { ChartTrackBallBehavior nearestTrackball = new ChartTrackBallBehaviorExt(); double minDistance = double.MaxValue; // Iterate through all trackball behaviors to find the nearest one if (SfChart != null) { foreach (var trackballBehaviour in SfChart.Behaviors) { if (trackballBehaviour is ChartTrackBallBehaviorExt trackball) { // Calculate the distance between the trackball and the touch point double distance = Math.Sqrt(Math.Pow(trackball.X - touchPoint.X, 2) + Math.Pow(trackball.Y - touchPoint.Y, 2)); // Update the nearest trackball if the current one is closer if (distance < minDistance) { minDistance = distance; nearestTrackball = trackball; } } } } return nearestTrackball; } public void Display(float x, float y) { X = x; Y = y; IsActivated = true; var point = new Point(x, y); // Set the internal property for the current point SetInternalProperty(typeof(ChartTrackBallBehavior), this, point, "CurrentPoint"); // Trigger the pointer position changed event base.OnPointerPositionChanged(); // Activate the trackball InvokeInternalMethod(typeof(ChartTrackBallBehavior), this, "Activate", IsActivated); } // Sets an internal property of an object using reflection. internal static void SetInternalProperty(Type type, object obj, object value, string propertyName) { var properties = type.GetRuntimeProperties(); foreach (var item in properties) { if (item.Name == propertyName) { item.SetValue(obj, value); break; } } } // Invokes an internal method of an object using reflection. internal static object? InvokeInternalMethod(Type type, object obj, string methodName, params object[] args) { var method = type.GetTypeInfo().GetDeclaredMethod(methodName); return method?.Invoke(obj, args); } } Step 5: Assign the chart instance to the SfChart property in the ChartTrackBallBehaviorExt class, and override the OnContentRendered method to run an asynchronous task that calls ShowTrackball method. The ShowTrackball method calculates the positions and displays the trackballs on the chart. C# public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); trackball1.SfChart = this.chart; trackball2.SfChart = this.chart; } protected override void OnContentRendered(EventArgs e) { base.OnContentRendered(e); // Run the ShowTrackball method asynchronously Task.Run(async () => { await ShowTrackball(); }); } async Task ShowTrackball() { // Wait for 1 second before executing the rest of the method await Task.Delay(1000); Application.Current.Dispatcher.Invoke(() => { // Calculated positions for the first trackball float xPosition = (float)chart.ValueToPoint(chart.PrimaryAxis, 1); float yPosition = (float)chart.ValueToPoint(chart.SecondaryAxis, 169); // Calculated positions for the second trackball float xPosition1 = (float)chart.ValueToPoint(chart.PrimaryAxis, 6); float yPosition1 = (float)chart.ValueToPoint(chart.SecondaryAxis, 170); // Display the first trackball trackball1.Display(xPosition, yPosition); // Display the second trackball trackball2.Display(xPosition1, yPosition1); }); } } Step 6: To control the trackballs, simply hover over them with your mouse. As you move the mouse within the chart area, the trackball will follow the cursor, allowing you to inspect different data points interactively. Output: Explore the runnable demo from this GitHub location. Conclusion: I hope you enjoyed learning about how to add and customize multiple trackballs in WPF Chart. You can refer to our WPF Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI Cartesian Chart can animate seamlessly in two ways: when you first load the chart or when you redraw it after changing the data collection. This section provides insights into both methods of animating the chart control. Steps for Animating a Chart Upon Loading To smoothly animate the chart upon loading, set the EnableAnimation property to True. XAML: <chart:SfCartesianChart> . . . <chart:ColumnSeries x:Name="series" ItemsSource="{Binding Data1}" XBindingPath="Month" YBindingPath="Value" EnableAnimation="True"> </chart:ColumnSeries> </chart:SfCartesianChart> Output: Steps for Dynamically Animating the Chart The SfCartesianChart provides seamless animation when dynamically changing data points. Follow these steps to achieve dynamic animation in the .NET MAUI Cartesian Chart: Step 1: Initialize and arrange the grid layout according to the desired view. XAML: <Grid> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> </Grid> Step 2: Configure the Syncfusion® .NET MAUI Cartesian Chart control using this documentation and enable series animation. Step 3: Add the button to the layout. XAML: <Grid> <Button Grid.Row="0" Text="Add Data Point" Clicked="Animation_Clicked"/> <chart:SfCartesianChart Grid.Row="1"> . . . <chart:ColumnSeries x:Name="series" ItemsSource="{Binding Data1}" XBindingPath="Month" YBindingPath="Value" EnableAnimation="True"/> </chart:SfCartesianChart> </Grid> Step 4: Change the ItemsSource collection in the button-clicked event. C# private void Animation_Clicked(object sender, EventArgs e) { series.ItemsSource = viewModel.Data2; } Output: Download the complete sample from GitHub. Conclusion I hope you enjoyed learning how to create an animated chart using .NET MAUI Cartesian Chart. Refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Chart documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The WPF Chart allows you to select multiple scatter data points using the canvas and mouse drag. Here are the steps to follow: Step 1: Create a scatter chart within a grid layout using this documentation XAML <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="8*"/> <ColumnDefinition Width="1.7*"/> </Grid.ColumnDefinitions> <chart:SfChart Grid.Column="0"> <chart:SfChart.Header> <TextBlock TextAlignment="Center" Text="Global Stock Trend" FontSize="17" Margin="0,10,0,10"/> </chart:SfChart.Header> <chart:SfChart.PrimaryAxis> <chart:DateTimeAxis Interval="1" IntervalType="Months" LabelFormat="MMM" PlotOffset="30" HeaderTemplate="{StaticResource headerTemplate1}" ShowGridLines="False"> <chart:DateTimeAxis.LabelStyle> <chart:LabelStyle FontSize="13"/> </chart:DateTimeAxis.LabelStyle> </chart:DateTimeAxis> </chart:SfChart.PrimaryAxis> <chart:SfChart.SecondaryAxis> <chart:NumericalAxis Interval="10" Minimum="10" LabelFormat="$0" Maximum="80" HeaderTemplate="{StaticResource headerTemplate2}"> <chart:NumericalAxis.LabelStyle> <chart:LabelStyle FontSize="12.5"/> </chart:NumericalAxis.LabelStyle> </chart:NumericalAxis> </chart:SfChart.SecondaryAxis> <chart:ScatterSeries x:Name="series" ItemsSource="{Binding Data}" XBindingPath="Year" YBindingPath="Count" ScatterHeight="50" ScatterWidth="50" CustomTemplate="{StaticResource seriesTemplate}"> <chart:ScatterSeries.AdornmentsInfo> <chart:ChartAdornmentInfo ShowLabel="True" SegmentLabelContent="LabelContentPath" LabelTemplate="{StaticResource adornmentTemplate}"/> </chart:ScatterSeries.AdornmentsInfo> </chart:ScatterSeries> </chart:SfChart> </Grid> Step 2: Initialize the canvas with mouse interaction events. XAML <Grid> . . . <Canvas Name="drawingCanvas" Background="Transparent" Grid.Column="0" MouseDown="OnMouseDown" MouseUp="OnMouseUp" Mouse.MouseMove="OnMouseMove"/> </Grid> Step 3: Implement the mouse interaction events to select the desired data points using the mouse drag. C# public partial class MainWindow : Window { #region Fields private Point startPoint; private Rectangle? currentRectangle; private Rect currentRect; #endregion #region Constructor public MainWindow() { InitializeComponent(); } #endregion #region Methods 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(); } #endregion } Output: For more details, please refer to the project on GitHub Conclusion I hope you enjoyed learning how to select multiple scatter data points with mouse drag in WPF Chart. You can find more groundbreaking feature representations of our WPF Chart on our feature tour page. Additionally, you can explore our WPF Chart documentation to understand how to create and manipulate data. If you are a current customer, you can check out our components from the License and Downloads page. For new customers, we offer a 30-day free trial to try out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
This article shows how to perform lazy loading using PanChanged events. Here, the data points are added dynamically in the desired count or format while scrolling to the end of the chart. To perform lazy loading in WPF Chart , follow these steps: Step 1: Initialize the SfChart with Primary and Secondary axes. Step 2: Hook the PanChanged event in SfChart and set the required ZoomFactor on the primary axis. XAML <syncfusion:SfChart PanChanged="chart_PanChanged"> <syncfusion:SfChart .PrimaryAxis> <syncfusion:NumericalAxis x:name="xAxis" zoomfactor="0.5"/> </syncfusion:SfChart .PrimaryAxis> <syncfusion:SfChart .SecondaryAxis> <syncfusion:NumericalAxis/> </syncfusion:SfChart .SecondaryAxis> .... Add your series here .... </syncfusion:SfChart> C# SfChart chart = new SfChart(); chart.PanChanged += chart_PanChanged; NumericalAxis xAxis = new NumericalAxis(); xAxis.ZoomFactor = 0.5; chart.PrimaryAxis = xAxis; NumericalAxis yAxis = new NumericalAxis(); chart.SecondaryAxis = yAxis; this.Content = chart; Step 3 : Initialize the ChartZoomPanBehavior and enable panning by setting EnablePanning to “True”. XAML <syncfusion:SfChart.Behaviors> <syncfusion:ChartZoomPanBehavior EnablePanning="True"/> </syncfusion:SfChart.Behaviors> C# ChartZoomPanBehavior zoomPanBehavior = new ChartZoomPanBehavior(); zoomPanBehavior.EnablePanning = true; chart.Behaviors.Add(zoomPanBehavior); Step 4 : Implement the chart_PanChanged method to calculate the end range of the chart. As horizontal scrolling or panning reaches the end of the chart, additional data points are added, then adjust the position of the xAxis range using ZoomPosition . **// startValue = You can set the last value of the data source in viewModel.** private void chart_PanChanged(object sender, PanChangedEventArgs e) { var position = xAxis.ZoomPosition - xAxis.ZoomFactor; if (e.Axis.Equals(xAxis) && position>=0) { // Update the data based on your requirement. for (int i = 0; i < 4; i++) { viewModel.Data.Add(new Model(startValue, new Random().Next(10, 40))); startValue++; } xAxis.ZoomPosition = 1; } } Output: For better understanding, please refer to the GitHub sample. Conclusion I hope you enjoyed learning about how to perform lazy loading in WPF Chart (SfChart). You can refer to our WPF Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Chart documentation to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
