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 000000000..06e5f1101 --- /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 000000000..486cc29cc --- /dev/null +++ b/MAUI/Cartesian-Charts/AI-Powered-Stock-forecasting-in-Candle-Chart.md @@ -0,0 +1,273 @@ +--- +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 %} + +## Output + +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 000000000..7d5002a5b 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 000000000..b3389389b Binary files /dev/null and b/MAUI/Cartesian-Charts/Chart_Smart_component_images/stock_forecasting.gif differ diff --git a/maui-toc.html b/maui-toc.html index 78813d781..3a4bbf962 100644 --- a/maui-toc.html +++ b/maui-toc.html @@ -399,6 +399,8 @@
  • Zooming and Panning
  • Exporting
  • Localization
    • +
  • Data cleaning and preprocessing
    • +
  • Stock Forecasting
  • How to