Updated sample

Author: KompelliSravanSyncfusion

.vs/How-to-Create-a-Live-Chart-Using-.NET-MAUI-Toolkit/FileContentIndex/58e54760-1b1b-4486-8302-cd7f86c6e625.vsidx

@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}

.vs/ProjectSettings.json

@@ -0,0 +1,14 @@
+<?xml version = "1.0" encoding = "UTF-8" ?>
+<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:local="clr-namespace:RealTimeChart"
+             x:Class="RealTimeChart.App">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
+                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>

.vs/slnx.sqlite

@@ -0,0 +1,15 @@
+namespace RealTimeChart
+{
+    public partial class App : Application
+    {
+        public App()
+        {
+            InitializeComponent();
+        }
+
+        protected override Window CreateWindow(IActivationState? activationState)
+        {
+            return new Window(new MainPage());
+        }
+    }
+}

App.xaml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Shell
+    x:Class="RealTimeChart.AppShell"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:RealTimeChart"
+    Shell.FlyoutBehavior="Flyout"
+    Title="RealTimeChart">
+
+    <ShellContent
+        Title="Home"
+        ContentTemplate="{DataTemplate local:MainPage}"
+        Route="MainPage" />
+
+</Shell>

App.xaml.cs

@@ -0,0 +1,10 @@
+namespace RealTimeChart
+{
+    public partial class AppShell : Shell
+    {
+        public AppShell()
+        {
+            InitializeComponent();
+        }
+    }
+}

AppShell.xaml

@@ -0,0 +1,14 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace RealTimeChart
+{
+    public class ChartDataModel
+    {
+        public double Value { get; set; }
+        public double Size { get; set; }
+    }
+}

AppShell.xaml.cs

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:chart="clr-namespace:Syncfusion.Maui.Toolkit.Charts;assembly=Syncfusion.Maui.Toolkit"
+             xmlns:local="clr-namespace:RealTimeChart"
+             x:Class="RealTimeChart.MainPage">
+
+    <ContentPage.BindingContext>
+        <local:RealTimeChartViewModel x:Name="realTimeChartViewModel"/>
+    </ContentPage.BindingContext>
+
+    <Grid>
+        <chart:SfCartesianChart x:Name="realTimeChart" 
+                               HorizontalOptions="Fill" 
+                               VerticalOptions="Fill">
+
+            <chart:SfCartesianChart.Title>
+                <Label Text="Live ECG Monitor (100Hz)" 
+                       Margin="0,0,0,5" 
+                       Padding="0,20,0,0"
+                       HorizontalOptions="Fill" 
+                       HorizontalTextAlignment="Center" 
+                       VerticalOptions="Center" 
+                       FontSize="16"/>
+            </chart:SfCartesianChart.Title>
+
+            <chart:SfCartesianChart.XAxes>
+                <chart:NumericalAxis ShowMajorGridLines="false" 
+                                    EdgeLabelsDrawingMode="Center">
+                    <chart:NumericalAxis.Title>
+                        <chart:ChartAxisTitle Text="Samples"/>
+                    </chart:NumericalAxis.Title>
+                    <chart:NumericalAxis.LabelStyle>
+                        <chart:ChartAxisLabelStyle/>
+                    </chart:NumericalAxis.LabelStyle>
+                </chart:NumericalAxis>
+            </chart:SfCartesianChart.XAxes>
+
+            <chart:SfCartesianChart.YAxes>
+                <chart:NumericalAxis ShowMajorGridLines="false" 
+                                    Minimum="500" 
+                                    Maximum="1100">
+                    <chart:NumericalAxis.Title>
+                        <chart:ChartAxisTitle Text="Amplitude"/>
+                    </chart:NumericalAxis.Title>
+                </chart:NumericalAxis>
+            </chart:SfCartesianChart.YAxes>
+
+            <chart:SfCartesianChart.Series>
+                <chart:FastLineSeries ItemsSource="{Binding LiveData}" 
+                                     EnableAntiAliasing="True"
+                                     XBindingPath="Value" 
+                                     YBindingPath="Size">
+                </chart:FastLineSeries>
+            </chart:SfCartesianChart.Series>
+
+        </chart:SfCartesianChart>
+    </Grid>
+
+</ContentPage>

ChartDataModel.cs

@@ -0,0 +1,39 @@
+using Microsoft.Maui.Controls;
+
+namespace RealTimeChart
+{
+    public partial class MainPage : ContentPage
+    {
+        public MainPage()
+        {
+            InitializeComponent();
+        }
+
+        protected override void OnAppearing()
+        {
+            base.OnAppearing();
+            
+            // Stop any existing timer first
+            realTimeChartViewModel.StopTimer();
+            
+            // Start the timer to update the chart
+            realTimeChartViewModel.StartTimer();
+        }
+
+        protected override void OnDisappearing()
+        {
+            base.OnDisappearing();
+            
+            // Make sure to stop the timer when leaving the page
+            if (realTimeChartViewModel != null)
+            {
+                realTimeChartViewModel.StopTimer();
+            }
+            
+            // Properly disconnect the chart handler to avoid memory leaks
+            realTimeChart.Handler?.DisconnectHandler();
+        }
+    }
+}
+
+