diff --git a/MAUI/AIAssistView/items.md b/MAUI/AIAssistView/items.md index d5b1b165d9..5ae5dfde54 100644 --- a/MAUI/AIAssistView/items.md +++ b/MAUI/AIAssistView/items.md @@ -430,7 +430,7 @@ The `SfAIAssistView` control includes a built-in event called [CardTapped](https ## Show error response -The `SfAIAssistView` allows to display error responses by setting the error text to the `AssistItem.ErrorMessage` property, ensuring clear notification when an error occurs during AI interactions. +The `SfAIAssistView` allows to display error responses by setting the error text to the [AssistItem.ErrorMessage](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.AIAssistView.IAssistItem.html#Syncfusion_Maui_AIAssistView_IAssistItem_ErrorMessage) property, ensuring clear notification when an error occurs during AI interactions. {% tabs %} {% highlight c# tabtitle="ViewModel.cs" hl_lines="36" %} diff --git a/MAUI/Backdrop/header-configuration.md b/MAUI/Backdrop/header-configuration.md index 16fb86693e..ea24a2d662 100644 --- a/MAUI/Backdrop/header-configuration.md +++ b/MAUI/Backdrop/header-configuration.md @@ -1,7 +1,7 @@ --- layout: post -title: Header Configuration with Syncfusion® Backdrop Page | Syncfusion® -description: Learn how to configure and customize the header in the Syncfusion® backdrop page control in the .NET MAUI platform. +title: Header Configuration with Syncfusion® Backdrop Page | Syncfusion +description: Learn how to configure and customize the header in the Syncfusion backdrop page control in the .NET MAUI platform. platform: MAUI control: SfBackdropPage documentation: ug diff --git a/MAUI/Backdrop/migration.md b/MAUI/Backdrop/migration.md index f7c5d7e16a..51f9380eeb 100644 --- a/MAUI/Backdrop/migration.md +++ b/MAUI/Backdrop/migration.md @@ -1,7 +1,7 @@ --- layout: post -title: Migrate from Xamarin to .NET MAUI Backdrop page | Syncfusion® -description: Learn about Migrating from the Syncfusion® Xamarin backdrop page to Syncfusion® .NET MAUI backdrop page control and more. +title: Migrate from Xamarin to .NET MAUI Backdrop page | Syncfusion +description: Learn about Migrating from the Syncfusion Xamarin backdrop page to Syncfusion® .NET MAUI backdrop page control and more. platform: MAUI control: SfBackdropPage documentation: ug diff --git a/MAUI/Badge-View/Badge-customization.md b/MAUI/Badge-View/Badge-customization.md index 14c267eb12..399852c730 100644 --- a/MAUI/Badge-View/Badge-customization.md +++ b/MAUI/Badge-View/Badge-customization.md @@ -345,6 +345,227 @@ Content = sfBadgeView; ![Alignment](badge-customization_images/badge_alignment.png) +## Badge Alignment and Sizing + +The [BadgeAlignment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_BadgeAlignment) property positions the badge text relative to the [SfBadgeView's](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) content. You can set this to Start, Center, or End. However, the final visual position of the badge is also dependent on how the [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) and its Content are sized. The following scenarios explain how alignment behaves based on different size configurations. + +### 1. Alignment with a Fixed Size on SfBadgeView + +When an explicit WidthRequest and HeightRequest are set directly on the [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1), the badge is aligned relative to these fixed dimensions. The size of the inner Content does not influence the badge's position. This approach is useful when you need the badge to appear at the edge of a specific, defined area, regardless of the content inside. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + {% endhighlight %} + +{% highlight c# %} + +SfBadgeView sfBadgeView = new SfBadgeView(); +sfBadgeView.HorizontalOptions = LayoutOptions.Center; +sfBadgeView.VerticalOptions = LayoutOptions.Center; +sfBadgeView.WidthRequest = 100; +sfBadgeView.HeightRequest = 100; +sfBadgeView.BadgeText = "20"; +Label label = new Label(); +label.Text = "Start"; +label.BackgroundColor = Colors.LightGray; +label.HorizontalTextAlignment = TextAlignment.Center; +label.VerticalTextAlignment = TextAlignment.Center; +label.TextColor = Colors.Black; +sfBadgeView.Content = label; +BadgeSettings badgeSetting = new BadgeSettings(); +badgeSetting.BadgeAlignment = BadgeAlignment.Start; +sfBadgeView.BadgeSettings = badgeSetting; +Content = sfBadgeView; + +{% endhighlight %} + +{% endtabs %} + +![BadgeAlignment](badge-customization_images\WidthForBadgeView.png) + +### 2. Alignment with a Fixed Size on the Content + +When the [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) has no explicit size, but its Content does, the [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) wraps itself around the content. In this case, the badge is aligned relative to the bounds of the Content. This is a common scenario when you want to place a badge on a specific control like a Button or a larger Label. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + {% endhighlight %} + +{% highlight c# %} + +SfBadgeView sfBadgeView = new SfBadgeView(); +sfBadgeView.BadgeText = "20"; +Label label = new Label(); +label.Text = "Start"; +label.BackgroundColor = Colors.LightGray; +label.HorizontalTextAlignment = TextAlignment.Center; +label.VerticalTextAlignment = TextAlignment.Center; +label.TextColor = Colors.Black; +label.WidthRequest = 100; +label.HeightRequest = 100; +sfBadgeView.Content = label; +BadgeSettings badgeSetting = new BadgeSettings(); +badgeSetting.BadgeAlignment = BadgeAlignment.Start; +sfBadgeView.BadgeSettings = badgeSetting; +Content = sfBadgeView; + +{% endhighlight %} + +{% endtabs %} + +![BadgeAlignment](badge-customization_images\WidthForContent.png) + +### 3. Alignment with Automatic Sizing + +When neither the [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) nor its Content has an explicit size, both controls size themselves automatically based on their content. The [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) wraps its Content, and the badge is then aligned relative to the final calculated bounds of that Content. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + {% endhighlight %} + +{% highlight c# %} + +SfBadgeView sfBadgeView = new SfBadgeView(); +sfBadgeView.BadgeText = "20"; +Label label = new Label(); +label.Text = "Start"; +label.BackgroundColor = Colors.LightGray; +label.HorizontalTextAlignment = TextAlignment.Center; +label.VerticalTextAlignment = TextAlignment.Center; +label.TextColor = Colors.Black; +sfBadgeView.Content = label; +BadgeSettings badgeSetting = new BadgeSettings(); +badgeSetting.BadgeAlignment = BadgeAlignment.Start; +sfBadgeView.BadgeSettings = badgeSetting; +Content = sfBadgeView; + +{% endhighlight %} + +{% endtabs %} + +![BadgeAlignment](badge-customization_images\WithoutWidth.png) + +## Keeping multiple badges aligned uniformly + +When placing several [SfBadgeView's](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) in the same row or grid, you can keep the visual alignment consistent across items whether a badge is present or not by using AutoHide. When [BadgeText](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html#Syncfusion_Maui_Core_SfBadgeView_BadgeText) is 0 and AutoHide=True, the badge is not rendered. The content area remains uniformly aligned, so layouts stay consistent for items with and without badges. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + + + + + + + + + + + + + ... + + +{% endhighlight %} + +{% highlight c# %} + + +HorizontalStackLayout horizontalStack = new HorizontalStackLayout(); +horizontalStack.Spacing = 20; +horizontalStack.HorizontalOptions = LayoutOptions.Center; +horizontalStack.VerticalOptions = LayoutOptions.Center; + +SfAvatarView avatar1 = new SfAvatarView(); +avatar1.ContentType = ContentType.AvatarCharacter; +avatar1.AvatarCharacter = AvatarCharacter.Avatar1; +avatar1.CornerRadius = 25; +avatar1.WidthRequest = 50; +avatar1.HeightRequest = 50; + +BadgeSettings badgeSettings1 = new BadgeSettings(); +badgeSettings1.BadgeAlignment = BadgeAlignment.Center; +badgeSettings1.AutoHide = true; +badgeSettings1.Type = BadgeType.None; +badgeSettings1.Background = Colors.Red; + +SfBadgeView badgeView1 = new SfBadgeView(); +badgeView1.BadgeText = "0"; +badgeView1.Content = avatar1; +badgeView1.BadgeSettings = badgeSettings1; + +SfAvatarView avatar2 = new SfAvatarView(); +avatar2.ContentType = ContentType.AvatarCharacter; +avatar2.AvatarCharacter = AvatarCharacter.Avatar2; +avatar2.CornerRadius = 25; +avatar2.WidthRequest = 50; +avatar2.HeightRequest = 50; + +BadgeSettings badgeSettings2 = new BadgeSettings(); +badgeSettings2.BadgeAlignment = BadgeAlignment.Center; +badgeSettings2.AutoHide = true; +badgeSettings2.Type = BadgeType.None; +badgeSettings2.Background = Colors.Red; + +SfBadgeView badgeView2 = new SfBadgeView(); +badgeView2.BadgeText = "10"; +badgeView2.Content = avatar2; +badgeView2.BadgeSettings = badgeSettings2; + +horizontalStack.Children.Add(badgeView1); +horizontalStack.Children.Add(badgeView2); + +Content = horizontalStack; + +{% endhighlight %} + +{% endtabs %} + +![BadgeAlignment](badge-customization_images\badgeview_alignment.png) + ## FontAutoScalingEnabled The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_FontAutoScalingEnabled) property automatically scales the badge text's font size based on the operating system's text size. The default value is `false`. diff --git a/MAUI/Badge-View/badge-customization_images/WidthForBadgeView.png b/MAUI/Badge-View/badge-customization_images/WidthForBadgeView.png new file mode 100644 index 0000000000..eef907b0e6 Binary files /dev/null and b/MAUI/Badge-View/badge-customization_images/WidthForBadgeView.png differ diff --git a/MAUI/Badge-View/badge-customization_images/WidthForContent.png b/MAUI/Badge-View/badge-customization_images/WidthForContent.png new file mode 100644 index 0000000000..ee04f2c678 Binary files /dev/null and b/MAUI/Badge-View/badge-customization_images/WidthForContent.png differ diff --git a/MAUI/Badge-View/badge-customization_images/WithoutWidth.png b/MAUI/Badge-View/badge-customization_images/WithoutWidth.png new file mode 100644 index 0000000000..d2d97b94fc Binary files /dev/null and b/MAUI/Badge-View/badge-customization_images/WithoutWidth.png differ diff --git a/MAUI/Badge-View/badge-customization_images/badgeview_alignment.png b/MAUI/Badge-View/badge-customization_images/badgeview_alignment.png new file mode 100644 index 0000000000..93f9276de6 Binary files /dev/null and b/MAUI/Badge-View/badge-customization_images/badgeview_alignment.png differ diff --git a/MAUI/Barcode-Generator/overview.md b/MAUI/Barcode-Generator/overview.md index abd4df5fc4..584aa42ea8 100644 --- a/MAUI/Barcode-Generator/overview.md +++ b/MAUI/Barcode-Generator/overview.md @@ -1,7 +1,7 @@ --- layout: post -title: About .NET MAUI Barcode Generator control | Syncfusion® -description: Learn here all about introduction of Syncfusion® .NET MAUI Barcodes(SfBarcodeGenerator) control with key features and more. +title: About .NET MAUI Barcode Generator control | Syncfusion +description: Learn here all about introduction of Syncfusion .NET MAUI Barcodes(SfBarcodeGenerator) control with key features and more. platform: maui control: SfBarcodeGenerator documentation: ug diff --git a/MAUI/Calendar/date-restrictions.md b/MAUI/Calendar/date-restrictions.md index fbd20f7c7f..fa7ad8c99e 100644 --- a/MAUI/Calendar/date-restrictions.md +++ b/MAUI/Calendar/date-restrictions.md @@ -1,7 +1,7 @@ --- layout: post -title: Date Restrictions in .NET MAUI Calendar control | Syncfusion® -description: Learn here all about Date restrictions feature of Syncfusion® .NET MAUI Calendar (SfCalendar) control and more. +title: Date Restrictions in .NET MAUI Calendar control | Syncfusion +description: Learn here all about Date restrictions feature of Syncfusion .NET MAUI Calendar (SfCalendar) control and more. platform: maui control: SfCalendar documentation: ug diff --git a/MAUI/Calendar/overview.md b/MAUI/Calendar/overview.md index ffcf6ac025..7cb8ea6791 100644 --- a/MAUI/Calendar/overview.md +++ b/MAUI/Calendar/overview.md @@ -1,7 +1,7 @@ --- layout: post -title: About .NET MAUI Calendar control | Syncfusion® -description: Learn here about the overview of Syncfusion® .NET MAUI Calendar (SfCalendar) control, its basic features, and calendar functionalities. +title: About .NET MAUI Calendar control | Syncfusion +description: Learn here about the overview of Syncfusion .NET MAUI Calendar (SfCalendar) control, its basic features, and calendar functionalities. platform: maui control: SfCalendar documentation: ug diff --git a/MAUI/Cards/getting-started.md b/MAUI/Cards/getting-started.md index 476afab8f3..c6f8bf614f 100644 --- a/MAUI/Cards/getting-started.md +++ b/MAUI/Cards/getting-started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with MAUI Card Control | Syncfusion® -description: Learn here about getting started with Syncfusion® .NET MAUI Cards (SfCards) control and its basic features. +title: Getting Started with MAUI Card Control | Syncfusion +description: Learn here about getting started with Syncfusion .NET MAUI Cards (SfCards) control and its basic features. platform: maui control: SfCard documentation: ug diff --git a/MAUI/Cartesian-Charts/AI-Powered-Data-Processing.md b/MAUI/Cartesian-Charts/AI-Powered-Data-Processing.md new file mode 100644 index 0000000000..06e5f11010 --- /dev/null +++ b/MAUI/Cartesian-Charts/AI-Powered-Data-Processing.md @@ -0,0 +1,221 @@ +--- +layout: post +title: AI-Powered Data Cleaning in .NET MAUI Charts | Syncfusion +description: Learn here how to create a .NET MAUI Syncfusion® smart Chart using Azure OpenAI to assist in data cleaning and preprocessing for data. +platform: maui +control: SfCartesianChart +documentation: ug +keywords: .net maui chart AI data cleaning, maui chart data, .net maui chart data preprocessing, syncfusion maui chart AI preprocessing, .net maui chart data visualization, .net maui cartesian chart AI empty point preprocessing support. +--- + +# AI Powered data cleaning and preprocessing in .NET MAUI Chart. + +Raw datasets often contain missing values, outliers, or noise that can distort visualizations and analysis. This is common in web traffic data, which may have gaps or spikes. Before visualizing such data, it’s essential to clean it. + +This guide shows how to use Azure OpenAI to clean and preprocessing e-commerce website traffic data, then visualize the results using [Syncfusion .NET MAUI Charts](https://help.syncfusion.com/maui/cartesian-charts/getting-started). + +## Integrating Azure OpenAI for cleaning and preprocessing the data + +Azure OpenAI can process your raw data and return a cleaned version, handling missing values and outliers automatically. This integration allows you to focus on analysis and visualization, rather than manual data correction. + +### 1. Configure Azure OpenAI Service + +To get started, ensure you have access to [Azure OpenAI](https://azure.microsoft.com/en-in/products/ai-services/openai-service) and have deployed a model in the Azure portal. You will need your endpoint and API key to connect your application to the service. You can find the [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI/1.0.0-beta.12) NuGet package from the [NuGet Gallery](https://www.nuget.org/). + +{% tabs %} + +{% highlight C# %} + +internal class AzureOpenAIService +{ + + internal const string Endpoint = "YOUR_END_POINT_NAME"; + + internal const string DeploymentName = "DEPLOYMENT_NAME"; + + internal const string ImageDeploymentName = "IMAGE_DEPOLYMENT_NAME"; + + internal const string Key = "API_KEY"; + + public AzureOpenAIService() + { + + } +} + +{% endhighlight %} + +{% endtabs %} + +To set up a connection to the Azure OpenAI service, Create an `OpenAIClient` instance when needed. This connection allows you to send prompts to the model and receive responses, which you can use for data-cleaning tasks. + +{% tabs %} + +{% highlight C# %} + +//At the time of required. +var client = new OpenAIClient(new Uri(endpoint), new AzureKeyCredential(key)); + +{% endhighlight %} + +{% endtabs %} + +### 2. Generate Prompts for clean the raw data + +Prepare your raw data and format a prompt for Azure OpenAI. The prompt should describe the cleaning task and provide the data in a clear format. + +Example raw data: + +| Date | Visitors | +|------------|----------| +| 2024-08-01 | 1200 | +| 2024-08-02 | | // Missing value +| 2024-08-03 | 1300 | +| 2024-08-04 | 1500 | +| 2024-08-05 | 10000 | // Outlier + +Send the prompt and receive the cleaned data from Azure OpenAI. Here’s an example of how you can frame your prompt and receive the response. + +{% tabs %} + +{% highlight C# %} + +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"; + +var client = new OpenAIClient(new Uri(endpoint), new AzureKeyCredential(key)); +var response = await client.GetChatCompletionsAsync(chatCompletionsOptions); + +{% endhighlight %} + +{% endtabs %} + +You can use this approach for any time-series or tabular data that needs preprocessing before visualization. + +### 3. Implement the Syncfusion .NET MAUI chart to disply data. + +Define classes to represent your website traffic data and manage both raw and cleaned datasets.This structure allows you to easily bind both raw and cleaned data to your chart. + +{% tabs %} + +{% highlight C# %} + +// Data model. +public class WebsiteTrafficData +{ + public DateTime DateTime { get; set; } + public double Visitors { get; set; } +} + +public class ViewModel : INotifyPropertyChanged +{ + public ObservableCollection RawData { get; set; } + + private ObservableCollection cleanData; + public ObservableCollection CleanedData + { + get { return cleanData; } + set + { + cleanData = value; + PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("CleanedData")); + } + } + + public ViewModel() + { + IsBusy = false; + RawData = new ObservableCollection() + { + new WebsiteTrafficData{ DateTime = new DateTime(2024, 07, 01, 00, 00, 00), Visitors = 150 }, + new WebsiteTrafficData{ DateTime = new DateTime(2024, 07, 01, 01, 00, 00), Visitors = 160 }, + new WebsiteTrafficData{ DateTime = new DateTime(2024, 07, 01, 02, 00, 00), Visitors = 155 }, + new WebsiteTrafficData{ DateTime = new DateTime(2024, 07, 01, 03, 00, 00), Visitors = double.NaN }, + + // Missing data + new WebsiteTrafficData{ DateTime = new DateTime(2024, 07, 01, 04, 00, 00), Visitors = 170 }, + + // Some more data. + … + }; + + CleanedData = new ObservableCollection(); + } +} + +{% endhighlight %} + +{% endtabs %} + +### 4. Display Data Using Syncfusion Chart + +Bind your ViewModel to the chart and display raw data and cleaned data. + +To visualize website traffic data, use two line series to show data for before and after AI data cleaning. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} + +{% endtabs %} + +### 5. Trigger the AI Service for Data Cleaning + +After your application loads, call the Azure OpenAI service to clean the raw data and update your chart with the results. + +{% tabs %} + +{% highlight c# %} + +// At application start. +Task.Run(async () => +{ + var service = new AzureOpenAIService("YOUR_Azure_AI_Key"); + CleanedData = await service.GetCleanedData(RawData); +}); + +{% endhighlight %} + +{% endtabs %} + +Now that your chart is set up with the cleaned data, you’ll see a smooth and accurate representation of your website traffic trends, free from anomalies and gaps. + +You can also provide a button or menu option for users to trigger data cleaning on demand, allowing them to refresh the chart with newly cleaned data whenever needed. + + +The following image demonstrates the output of the above AI Powered data cleaning and preprocessing .NET MAUI chart. + +![Ai smart data processing in .NET MAUI Chart](Chart_Smart_component_images/dataprocessing.png) + +For more information, please visit the [GitHub Sample](https://github.com/syncfusion/maui-demos/tree/master/MAUI/SmartComponents/SampleBrowser.Maui.SmartComponents/Samples/SmartComponents/DataPreprocessing) \ No newline at end of file diff --git a/MAUI/Cartesian-Charts/AI-Powered-Stock-forecasting-in-Candle-Chart.md b/MAUI/Cartesian-Charts/AI-Powered-Stock-forecasting-in-Candle-Chart.md new file mode 100644 index 0000000000..f102f47f45 --- /dev/null +++ b/MAUI/Cartesian-Charts/AI-Powered-Stock-forecasting-in-Candle-Chart.md @@ -0,0 +1,271 @@ +--- +layout: post +title: AI powered stock forecasting in Candle chart | Syncfusion +description: Learn here how to implement AI-powered smart stock data forecasting using .NET MAUI Syncfusion® Candle Chart. +platform: maui +control: SfCartesianChart +documentation: ug +keywords: .net maui chart AI forecasting, maui chart stock, .net maui chart data options, syncfusion maui chart AI prediction, .net maui chart stock visualization, .net maui cartesian chart AI stock forecasting support. +--- + +# AI Powered Stock Forecasting in Candle Chart + +This guide demonstrates how to build an AI-powered [.NET MAUI Candle Chart](https://help.syncfusion.com/maui/cartesian-charts/candle) that forecasts stock prices for the next 45 days, helping traders make informed decisions using Syncfusion controls and Azure OpenAI. + +## Integrating Azure OpenAI for Stock Forecasting + +Azure OpenAI can analyze historical stock data and predict future trends. The model identifies patterns and generates financial (Open, High, Low, Close) values for upcoming days. + +### 1. Configure Azure OpenAI Service + +Ensure you have access to [Azure OpenAI](https://azure.microsoft.com/en-in/products/ai-services/openai-service) and a deployed model in the Azure portal. Set up the service endpoint and API key. You can find the [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI/1.0.0-beta.12) NuGet package from the [NuGet Gallery](https://www.nuget.org/). + +{% tabs %} + +{% highlight C# %} + +internal class AzureOpenAIService +{ + + internal const string Endpoint = "YOUR_END_POINT_NAME"; + + internal const string DeploymentName = "DEPLOYMENT_NAME"; + + internal const string ImageDeploymentName = "IMAGE_DEPOLYMENT_NAME"; + + internal const string Key = "API_KEY"; + + public AzureOpenAIService() + { + + } +} + +{% endhighlight %} + +{% endtabs %} + +To set up a connection to the Azure OpenAI service, Create an `OpenAIClient` instance when needed: + +{% tabs %} + +{% highlight C# %} + +//At the time of required. +var client = new OpenAIClient(new Uri(endpoint), new AzureKeyCredential(key)); + +{% endhighlight %} + +{% endtabs %} + +### 2. Generate Prompts and Retrieve AI Predictions + +Prepare a structured prompt with historical data for the AI model, this helps to get the more accurate predicted values. + +{% tabs %} + +{% highlight C# %} + +//AI service. + +internal string GeneratePrompt(List historicalData) +{ + var prompt = "Predicted OHLC values for the next 45 time step(s) for the following data:\n"; + foreach (var data in historicalData) + { + prompt += $"{data.Date:yyyy-MM-dd}: {data.High}, {data.Low}, {data.Open}, {data.Close}\n"; + } + prompt += "and the prediction output data should be in the yyyy-MM-dd:High:Low:Open:Close, no other explanation required\n"; + return prompt; +} + +{% endhighlight %} + +{% endtabs %} + +Request predictions from Azure OpenAI using the 'GetChatCompletionsAsync': + +{% tabs %} + +{% highlight C# %} + +//AI service. + +. . . +public Task> GetAnswerFromGPT(string userPrompt, ViewModel viewModel, int index) +{ + try + { + if (IsCredentialValid && Client != null) + { + ChatHistory = string.Empty; + // Add the system message and user message to the options + ChatHistory = ChatHistory + userPrompt; + var response = await Client.CompleteAsync(ChatHistory); + + //Helps to convert the response to respective data model + return this.ConvertToCompaniesModelCollection(response.ToString()); + } + } + catch (Exception) + { + return viewModel.GenerateDataSource(); + } + + return viewModel.GenerateDataSource(); +} + +{% endhighlight %} + +{% endtabs %} + +### 3. Implement the Syncfusion .NET MAUI Candle chart to display forecasted data. + +The [Syncfusion .NET MAUI Candle chart](https://help.syncfusion.com/maui/cartesian-charts/candle) allows you to display the financial data's. Define the data Model that hold the financial data (High, Low, Open, Close) and ViewModel that hold the collection of data for binding. + + +{% tabs %} + +{% highlight C# %} + +//Model + +. . . +public class DataModel +{ + public double High { get; set; } + public double Low { get; set; } + public DateTime Date { get; set; } + public double Open { get; set; } + public double Close { get; set; } +} + +// ViewModel + +public class ViewModel : INotifyPropertyChanged +{ + private ObservableCollection stockData; + public ObservableCollection StockData { + get { return stockData; } + set + { + stockData = value; + OnPropertyChanged(nameof(StockData)); + } + } + + // Helps to store and display the Forecast data in view from AI response. + public ObservableCollection ForeCastData { get; set; } + + public const string msftStockSource = "6/28/2024\t453.07\t455.38\t446.41\t446.95\t28,362,270\r\n6/27/2024\t452.18\t456.17\t451.77\t452.85\t14,806,320\r\n6/26/20..."; // Complete data from CSV file downloaded. + + public event PropertyChangedEventHandler? PropertyChanged; + + public ViewModel() + { + stockData = GenerateColection(msftStockSource); + } + + private ObservableCollection GenerateColection(string dataSource) + { + string[] alphapetRows = dataSource.Split(new[] { "\r\n", "\n" }, StringSplitOptions.RemoveEmptyEntries); + ObservableCollection alphabetCollection = new ObservableCollection(); + + foreach (string row in alphapetRows) + { + string[] columns = row.Split('\t'); + DataModel item = new DataModel(GetDateTime(columns[0]), GetDouble(columns[2]), GetDouble(columns[3]), GetDouble(columns[1]), GetDouble(columns[4])); + alphabetCollection.Add(item); + } + + return alphabetCollection; + } +} + +{% endhighlight %} + +{% endtabs %} + +### 4. Display Data Using Syncfusion Candle Chart + +Bind your ViewModel to the chart and display both historical and forecasted data: + +{% tabs %} + +{% highlight xaml %} + + + + +. . . + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} + +{% endtabs %} + +### 5. Trigger AI Forecasting + +Invoke the AI service when the user clicks a button: + +{% tabs %} + +{% highlight c# %} + +private async void AIButtonClicked(object sender, EventArgs e) +{ + AzureOpenAIService service = new AzureOpenAIService(); + var data = viewModel.StockData; + var last10Items = data.Skip(Math.Max(0, data.Count - 10)).Take(10).ToList(); + + //Build a prompt for AI. + var prompt = service.GeneratePrompt(last10Items); + var value = await service.GetAnswerFromGPT(prompt, viewModel, selected_Index); + + //Update forecast value to chart. + await viewModel.AddRangeWithDelayAsync(value, 300); +} + +{% endhighlight %} + +{% endtabs %} + +After receiving the AI-predicted stock trends, the chart updates to display both historical and forecasted data, providing a visual representation of potential market movements. + +The following image demonstrates the output of the above AI powered stock forecasting .NET MAUI Candle chart. + +![.NET MAUI Candle chart AI Stock forecasting.](Chart_Smart_component_images/stock_forecasting.gif) + +For more information, please visit the [GitHub Sample](https://github.com/syncfusion/maui-demos/tree/master/MAUI/SmartComponents/SampleBrowser.Maui.SmartComponents/Samples/SmartComponents/StockForecasting) \ No newline at end of file diff --git a/MAUI/Cartesian-Charts/Chart_Smart_component_images/dataprocessing.png b/MAUI/Cartesian-Charts/Chart_Smart_component_images/dataprocessing.png new file mode 100644 index 0000000000..7d5002a5bb Binary files /dev/null and b/MAUI/Cartesian-Charts/Chart_Smart_component_images/dataprocessing.png differ diff --git a/MAUI/Cartesian-Charts/Chart_Smart_component_images/stock_forecasting.gif b/MAUI/Cartesian-Charts/Chart_Smart_component_images/stock_forecasting.gif new file mode 100644 index 0000000000..b3389389b3 Binary files /dev/null and b/MAUI/Cartesian-Charts/Chart_Smart_component_images/stock_forecasting.gif differ diff --git a/MAUI/Cartesian-Charts/Getting-Started.md b/MAUI/Cartesian-Charts/Getting-Started.md index 434fd4751e..01f6484f2b 100644 --- a/MAUI/Cartesian-Charts/Getting-Started.md +++ b/MAUI/Cartesian-Charts/Getting-Started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started with .NET MAUI Chart control | Syncfusion +title: Getting started with .NET MAUI Cartesian Chart control | Syncfusion description: This section explains about the getting started with Syncfusion® MAUI Chart (SfCartesianChart) control. platform: maui control: SfCartesianChart @@ -10,7 +10,7 @@ keywords: .net maui cartesian chart, .net maui charting, cartesian chart maui, s > **Notice**: After **Volume 1 2025 (Mid of March 2025)**, feature enhancements for this control will no longer be available in the Syncfusion® package. Please switch to the **Syncfusion® Toolkit for .NET MAUI** for continued support. For a smooth transition refer this [migration document](https://help.syncfusion.com/maui-toolkit/migration). -# Getting Started with .NET MAUI Chart +# Getting Started with .NET MAUI Cartesian Chart This section explains how to populate the Cartesian chart with data, a title, data labels, a legend, and tooltips, as well as the essential aspects for getting started with the chart. @@ -215,6 +215,105 @@ namespace ChartGettingStarted {% endtabs %} {% endtabcontent %} + +{% tabcontent JetBrains Rider %} + +## Prerequisites + +Before proceeding, ensure the following are set up: + +1. Ensure you have the latest version of JetBrains Rider. +2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +3. Make sure the MAUI workloads are installed and configured as described [here.](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start) + +## Step 1: Create a new .NET MAUI Project + +1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template. +2. Enter the Project Name, Solution Name, and Location. +3. Select the .NET framework version and click Create. + +## Step 2: Install the Syncfusion® MAUI Charts NuGet Package + +1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +2. Search for [Syncfusion.Maui.Charts](https://www.nuget.org/packages/Syncfusion.Maui.Charts/) and install the latest version. +3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, Open the Terminal in Rider and manually run: `dotnet restore` + +## Step 3: Register the handler + +Syncfusion.Maui.Core nuget is a dependent package for all Syncfusion® controls of .NET MAUI. In the **MauiProgram.cs** file, register the handler for Syncfusion® core. + +{% tabs %} +{% highlight C# tabtitle="MauiProgram.cs" hl_lines="6 17" %} + +using Microsoft.Maui; +using Microsoft.Maui.Hosting; +using Microsoft.Maui.Controls.Compatibility; +using Microsoft.Maui.Controls.Hosting; +using Microsoft.Maui.Controls.Xaml; +using Syncfusion.Maui.Core.Hosting; + +namespace ChartGettingStarted +{ + public static class MauiProgram + { + public static MauiApp CreateMauiApp() + { + var builder = MauiApp.CreateBuilder(); + builder + .UseMauiApp() + .ConfigureSyncfusionCore() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + }); + + return builder.Build(); + } + } +} + +{% endhighlight %} +{% endtabs %} + +## Step 4: Add .NET MAUI Cartesian Chart + +1. To initialize the control, import the `Syncfusion.Maui.Charts` namespace. +2. Initialize [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html). + +{% tabs %} +{% highlight xaml %} + + + + + + + +{% endhighlight %} + +{% highlight C# %} + +using Syncfusion.Maui.Charts; +namespace ChartGettingStarted +{ + public partial class MainPage : ContentPage + { + public MainPage() + { + InitializeComponent(); + SfCartesianChart chart = new SfCartesianChart(); + this.Content = chart; + } + } +} + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + {% endtabcontents %} ### Initialize view model diff --git a/MAUI/Cartesian-Charts/Trackball.md b/MAUI/Cartesian-Charts/Trackball.md index 47e2f398c3..182b28fba8 100644 --- a/MAUI/Cartesian-Charts/Trackball.md +++ b/MAUI/Cartesian-Charts/Trackball.md @@ -553,7 +553,7 @@ this.Content = chart; ### TrackballCreated -The [`TrackballCreated`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_TrackballCreated) event occurs when the trackball moves from one data point to another. This argument contains an object of the ChartPointsInfo. The following properties are available in the `ChartPointInfo` class to customize the appearance of the trackball label based on a condition. +The [`TrackballCreated`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_TrackballCreated) event occurs when the trackball moves from one data point to another. This argument contains an object of the `TrackballPointInfo`. The following properties are available in the [TrackballPointInfo](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.TrackballPointInfo.html) class to customize the appearance of the trackball label based on a condition. * [Label](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.TrackballPointInfo.html#Syncfusion_Maui_Charts_TrackballPointInfo_Label) of type `string`: Used to change the text of the trackball label. * [LabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.TrackballPointInfo.html#Syncfusion_Maui_Charts_TrackballPointInfo_LabelStyle) of type `ChartLabelStyle`: Used to customize the appearance of the trackball label. diff --git a/MAUI/Chat/Scrolling.md b/MAUI/Chat/Scrolling.md deleted file mode 100644 index 632346c140..0000000000 --- a/MAUI/Chat/Scrolling.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -layout: post -title: Scrolling in .NET MAUI Chat control | Syncfusion -description: Learn here all about Scrolling support in Syncfusion .NET MAUI Chat (SfChat) control, its elements, and more. -platform: MAUI -control: SfChat -documentation: ug ---- - -# Scrolling in .NET MAUI Chat (SfChat) - -## Scroll to message - -You can scroll to a particular message programmatically using the [SfChat.ScrollToMessage(Object)](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.SfChat.html#Syncfusion_Maui_Chat_SfChat_ScrollToMessage_System_Object_) method. - -{% tabs %} -{% highlight xaml tabtitle="MainPage.xaml" %} - -