SyncfusionExamples · naveenkumar-sanjeevirayan · Jun 25, 2025 · Jun 25, 2025
diff --git a/ChartSample/ChartSample.sln b/ChartSample/ChartSample.sln
@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.14.36212.18 d17.14
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ChartSample", "ChartSample\ChartSample.csproj", "{3AC44380-7435-40D5-A2C7-621738BD7D71}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{3AC44380-7435-40D5-A2C7-621738BD7D71}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{3AC44380-7435-40D5-A2C7-621738BD7D71}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{3AC44380-7435-40D5-A2C7-621738BD7D71}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{3AC44380-7435-40D5-A2C7-621738BD7D71}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {BB271940-53D8-4167-B040-4503C0C40C88}
+	EndGlobalSection
+EndGlobal
diff --git a/ChartSample/ChartSample/App.xaml b/ChartSample/ChartSample/App.xaml
@@ -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:ChartSample"
+             x:Class="ChartSample.App">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
+                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>
diff --git a/ChartSample/ChartSample/App.xaml.cs b/ChartSample/ChartSample/App.xaml.cs
@@ -0,0 +1,15 @@
+namespace ChartSample
+{
+    public partial class App : Application
+    {
+        public App()
+        {
+            InitializeComponent();
+        }
+
+        protected override Window CreateWindow(IActivationState? activationState)
+        {
+            return new Window(new AppShell());
+        }
+    }
+}
diff --git a/ChartSample/ChartSample/AppShell.xaml b/ChartSample/ChartSample/AppShell.xaml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Shell
+    x:Class="ChartSample.AppShell"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:ChartSample"
+    Title="ChartSample">
+
+    <ShellContent
+        ContentTemplate="{DataTemplate local:MainPage}"
+        Route="MainPage" />
+
+</Shell>
diff --git a/ChartSample/ChartSample/AppShell.xaml.cs b/ChartSample/ChartSample/AppShell.xaml.cs
@@ -0,0 +1,10 @@
+namespace ChartSample
+{
+    public partial class AppShell : Shell
+    {
+        public AppShell()
+        {
+            InitializeComponent();
+        }
+    }
+}
diff --git a/ChartSample/ChartSample/AzureOpenAIService.cs b/ChartSample/ChartSample/AzureOpenAIService.cs
@@ -0,0 +1,119 @@
+using Azure;
+using Azure.AI.OpenAI;
+using Microsoft.Extensions.AI;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Globalization;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace ChartSample
+{
+    internal class AzureOpenAIService
+    {
+        const string endpoint = "";
+        const string deploymentName = "";
+        string key = "";
+        internal IChatClient? Client { get; set; }
+        internal string? ChatHistory {  get; set; }
+        public AzureOpenAIService()
+        {
+            GetAzureOpenAI();
+        }
+
+        private void GetAzureOpenAI()
+        {
+            try
+            {
+                var client = new AzureOpenAIClient(new Uri(endpoint), new AzureKeyCredential(key)).AsChatClient(modelId: deploymentName);
+                Client = client;
+            }
+            catch (Exception) 
+            { 
+            }
+        }
+
+        public async Task<ObservableCollection<Model>> GetCleanedData(ObservableCollection<Model> rawData)
+        {
+            ObservableCollection<Model> collection = new ObservableCollection<Model>();
+
+            var prompt = $"Clean the following e-commerce website traffic data, resolve outliers and fill missing values:\n{string.Join("\n", rawData.Select(d => $"{d.DateTime:yyyy-MM-dd-HH-m-ss}: {d.Visitors}"))} and the output cleaned data should be in the yyyy-MM-dd-HH-m-ss:Value, not required explanations";
+
+            try
+            {
+                if(Client != null)
+                {
+                    ChatHistory = prompt;
+                    var response = await Client.CompleteAsync(ChatHistory);
+                    return CleanedData(response.ToString(), collection);
+                }
+            }
+            catch (Exception)
+            {
+                return await Task.FromResult(GetDummyData(collection));
+            }
+
+            return collection;
+        }
+
+        private ObservableCollection<Model> CleanedData(string json, ObservableCollection<Model> collection)
+        {
+            if(string.IsNullOrEmpty(json))
+            {
+                return new ObservableCollection<Model>();
+            }
+
+            var lines = json.Split('\n');
+            foreach (var line in lines)
+            {
+                if(string.IsNullOrWhiteSpace(line))
+                {
+                    continue;
+                }
+
+                var parts = line.Split(':');
+                if(parts.Length == 2)
+                {
+                    var date = DateTime.ParseExact(parts[0].Trim(), "yyyy-MM-dd-HH-m-ss", CultureInfo.InvariantCulture);
+                    var high = double.Parse(parts[1].Trim());
+                    collection.Add(new Model { DateTime = date, Visitors = high });
+                }
+            }
+
+            return collection;
+        }
+
+        private ObservableCollection<Model> GetDummyData(ObservableCollection<Model> collection)
+        {
+            return new ObservableCollection<Model>()
+            {
+                new Model { DateTime = new DateTime(2024, 07, 01, 00, 00, 00), Visitors = 150 },
+                new Model { DateTime = new DateTime(2024, 07, 01, 01, 00, 00), Visitors = 160 },
+                new Model { DateTime = new DateTime(2024, 07, 01, 02, 00, 00), Visitors = 155 },
+                new Model { DateTime = new DateTime(2024, 07, 01, 03, 00, 00), Visitors = 162 }, 
+                new Model { DateTime = new DateTime(2024, 07, 01, 04, 00, 00), Visitors = 170 },
+                new Model { DateTime = new DateTime(2024, 07, 01, 05, 00, 00), Visitors = 175 },
+                new Model { DateTime = new DateTime(2024, 07, 01, 06, 00, 00), Visitors = 145 }, 
+                new Model { DateTime = new DateTime(2024, 07, 01, 07, 00, 00), Visitors = 180 },
+                new Model { DateTime = new DateTime(2024, 07, 01, 08, 00, 00), Visitors = 190 },
+                new Model { DateTime = new DateTime(2024, 07, 01, 09, 00, 00), Visitors = 185 },
+                new Model { DateTime = new DateTime(2024, 07, 01, 10, 00, 00), Visitors = 200 },
+                new Model { DateTime = new DateTime(2024, 07, 01, 11, 00, 00), Visitors = 207 }, // Missing data
+                new Model { DateTime = new DateTime(2024, 07, 01, 12, 00, 00), Visitors = 220 },
+                new Model { DateTime = new DateTime(2024, 07, 01, 13, 00, 00), Visitors = 230 },
+                new Model { DateTime = new DateTime(2024, 07, 01, 14, 00, 00), Visitors = 237 }, // Missing data
+                new Model { DateTime = new DateTime(2024, 07, 01, 15, 00, 00), Visitors = 250 },
+                new Model { DateTime = new DateTime(2024, 07, 01, 16, 00, 00), Visitors = 260 },
+                new Model { DateTime = new DateTime(2024, 07, 01, 17, 00, 00), Visitors = 270 },
+                new Model { DateTime = new DateTime(2024, 07, 01, 18, 00, 00), Visitors = 277 }, // Missing data
+                new Model { DateTime = new DateTime(2024, 07, 01, 19, 00, 00), Visitors = 280 },
+                new Model { DateTime = new DateTime(2024, 07, 01, 20, 00, 00), Visitors = 290 },
+                new Model { DateTime = new DateTime(2024, 07, 01, 21, 00, 00), Visitors = 300 },
+                new Model { DateTime = new DateTime(2024, 07, 01, 22, 00, 00), Visitors = 307 }, // Missing data
+                new Model { DateTime = new DateTime(2024, 07, 01, 23, 00, 00), Visitors = 320 },
+            };
+        }
+    }
+}
diff --git a/ChartSample/ChartSample/ChartSample.csproj b/ChartSample/ChartSample/ChartSample.csproj
@@ -0,0 +1,72 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+	<PropertyGroup>
+		<TargetFrameworks>net9.0-android;net9.0-ios;net9.0-maccatalyst</TargetFrameworks>
+		<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net9.0-windows10.0.19041.0</TargetFrameworks>
+		<!-- Uncomment to also build the tizen app. You will need to install tizen by following this: https://github.com/Samsung/Tizen.NET -->
+		<!-- <TargetFrameworks>$(TargetFrameworks);net9.0-tizen</TargetFrameworks> -->
+
+		<!-- Note for MacCatalyst:
+		The default runtime is maccatalyst-x64, except in Release config, in which case the default is maccatalyst-x64;maccatalyst-arm64.
+		When specifying both architectures, use the plural <RuntimeIdentifiers> instead of the singular <RuntimeIdentifier>.
+		The Mac App Store will NOT accept apps with ONLY maccatalyst-arm64 indicated;
+		either BOTH runtimes must be indicated or ONLY macatalyst-x64. -->
+		<!-- For example: <RuntimeIdentifiers>maccatalyst-x64;maccatalyst-arm64</RuntimeIdentifiers> -->
+
+		<OutputType>Exe</OutputType>
+		<RootNamespace>ChartSample</RootNamespace>
+		<UseMaui>true</UseMaui>
+		<SingleProject>true</SingleProject>
+		<ImplicitUsings>enable</ImplicitUsings>
+		<Nullable>enable</Nullable>
+
+		<!-- Display name -->
+		<ApplicationTitle>ChartSample</ApplicationTitle>
+
+		<!-- App Identifier -->
+		<ApplicationId>com.companyname.chartsample</ApplicationId>
+
+		<!-- Versions -->
+		<ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
+		<ApplicationVersion>1</ApplicationVersion>
+
+		<!-- To develop, package, and publish an app to the Microsoft Store, see: https://aka.ms/MauiTemplateUnpackaged -->
+		<WindowsPackageType>None</WindowsPackageType>
+
+		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">15.0</SupportedOSPlatformVersion>
+		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">15.0</SupportedOSPlatformVersion>
+		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">21.0</SupportedOSPlatformVersion>
+		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</SupportedOSPlatformVersion>
+		<TargetPlatformMinVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</TargetPlatformMinVersion>
+		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'tizen'">6.5</SupportedOSPlatformVersion>
+	</PropertyGroup>
+
+	<ItemGroup>
+		<!-- App Icon -->
+		<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#512BD4" />
+
+		<!-- Splash Screen -->
+		<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />
+
+		<!-- Images -->
+		<MauiImage Include="Resources\Images\*" />
+		<MauiImage Update="Resources\Images\dotnet_bot.png" Resize="True" BaseSize="300,185" />
+
+		<!-- Custom Fonts -->
+		<MauiFont Include="Resources\Fonts\*" />
+
+		<!-- Raw Assets (also remove the "Resources\Raw" prefix) -->
+		<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
+	</ItemGroup>
+
+	<ItemGroup>
+		<PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />
+		<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="9.0.0" />
+		<PackageReference Include="Syncfusion.Maui.Charts" Version="*" />
+		<PackageReference Include="Syncfusion.Maui.Core" Version="*" />
+		<PackageReference Include="Azure.AI.OpenAI" Version="2.0.0" />
+		<PackageReference Include="Azure.Identity" Version="1.13.1" />
+		<PackageReference Include="Microsoft.Extensions.AI.OpenAI" Version="9.0.1-preview.1.24570.5" />
+	</ItemGroup>
+
+</Project>
diff --git a/ChartSample/ChartSample/MainPage.xaml b/ChartSample/ChartSample/MainPage.xaml
@@ -0,0 +1,56 @@
+<?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.Charts;assembly=Syncfusion.Maui.Charts"
+             xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
+             xmlns:local="clr-namespace:ChartSample"
+             x:Class="ChartSample.MainPage">
+
+    <ContentPage.BindingContext>
+        <local:ViewModel x:Name="viewModel"/>
+    </ContentPage.BindingContext>
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="*"/>
+            <RowDefinition Height="Auto"/>
+        </Grid.RowDefinitions>
+
+        <chart:SfCartesianChart Grid.Row="0" x:Name="Chart" Margin="5" PaletteBrushes="{Binding PaletteBrushes}">
+
+            <chart:SfCartesianChart.Title>
+                <StackLayout Orientation="Vertical">
+                    <Label Text="E-Commerce Website Traffic Data" FontSize="18" FontAttributes="Bold" HorizontalTextAlignment="Center" />
+                    <Label Text="AI-powered data cleaning and preprocessing every hour, tracking hourly website visitors" LineBreakMode="WordWrap" HorizontalTextAlignment="Center" FontSize="14"/>
+                </StackLayout>
+            </chart:SfCartesianChart.Title>
+
+            <chart:SfCartesianChart.XAxes>
+                <chart:DateTimeAxis ShowMajorGridLines="False" EdgeLabelsDrawingMode="Shift">
+                    <chart:DateTimeAxis.LabelStyle>
+                        <chart:ChartAxisLabelStyle LabelFormat="hh tt"/>
+                    </chart:DateTimeAxis.LabelStyle>
+                </chart:DateTimeAxis>
+            </chart:SfCartesianChart.XAxes>
+
+            <chart:SfCartesianChart.YAxes>
+                <chart:NumericalAxis ShowMajorGridLines="False" Minimum="140" Interval="30" Maximum="320" EdgeLabelsDrawingMode="Center">
+                </chart:NumericalAxis>
+            </chart:SfCartesianChart.YAxes>
+
+            <chart:LineSeries x:Name="CleanedDataseries" ItemsSource="{Binding CleanedData}"
+                          XBindingPath="DateTime" YBindingPath="Visitors"
+                          StrokeWidth="2"/>
+
+            <chart:LineSeries x:Name="RawDataSeries" ItemsSource="{Binding RawData}" 
+                          XBindingPath="DateTime" YBindingPath="Visitors" 
+                          StrokeWidth="2"/>
+
+        </chart:SfCartesianChart>
+
+        <core:SfBusyIndicator Grid.Row="0" IsVisible="{Binding IsBusy}"
+                          IsRunning="{Binding IsBusy}" AnimationType="DoubleCircle"/>
+
+    </Grid>
+
+</ContentPage>