AI Powered data cleaning and preprocessing in .NET MAUI Chart.

10 Jul 202610 minutes to read

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 Cartesian Chart.

NOTE

Prerequisite: Ensure that the required NuGet package is installed, the necessary namespaces are imported, and the SfCartesianChart control is properly configured in your application. For detailed setup and configuration instructions, refer to the Getting Started guide.

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 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 NuGet package from the NuGet Gallery.

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()
    {

    }
}

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.

//At the time of required.
var client = new OpenAIClient(new Uri(endpoint), new AzureKeyCredential(key));

2. Generate Prompts to 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.

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);

You can use this approach for any time-series or tabular data that needs preprocessing before visualization.

3. Implement the Syncfusion .NET MAUI Cartesian Chart to display 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.

// Data model.
public class WebsiteTrafficData
{
    public DateTime DateTime { get; set; }
    public double Visitors { get; set; }
}

public class ViewModel : INotifyPropertyChanged 
{ 
    public ObservableCollection<WebsiteTrafficData> RawData { get; set; } 
    
    private ObservableCollection<WebsiteTrafficData> cleanData; 
    public ObservableCollection<WebsiteTrafficData> CleanedData 
    { 
       get { return cleanData; } 
       set 
       { 
           cleanData = value; 
           PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("CleanedData")); 
       } 
    } 
    
    public ViewModel() 
    { 
        IsBusy = false; 
        RawData = new ObservableCollection<WebsiteTrafficData>() 
        { 
           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. 
           //code omitted for brevity
        }; 

        CleanedData = new ObservableCollection<WebsiteTrafficData>(); 
    } 
}

4. Display Data Using Syncfusion Cartesian 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.

<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">
        </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>

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.

// At application start.
Task.Run(async () =>
{
    var service = new AzureOpenAIService("YOUR_Azure_AI_Key");
    CleanedData = await service.GetCleanedData(RawData);    
});

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 Cartesian Chart.

AI-powered smart data cleaning and preprocessing in .NET MAUI Cartesian Chart

For more information, please visit the GitHub Sample