--- title: "Build an AI Powered Air Quality Dashboard Using Blazor Spline Chart and GPT-4o" published_at: "2025-09-09T17:21:16+00:00" modified_at: "2025-09-10T08:47:52+00:00" url: "https://www.syncfusion.com/blogs/post/blazor-spline-chart-dashboard" excerpt: "Discover how to create a real-time air quality dashboard using Blazor Spline Chart and Azure OpenAI. Visualize pollution trends with Spline Charts and integrate AI for predictive analytics." taxonomy_category: - "AI Integration" - "Blazor" - "Chart" - "Data Visualization" - "OpenAI" - "Weekly Data Visualization" taxonomy_post_tag: - "AI Integration" - "Air-Quality Monitoring" - "Azure OpenAI" - "Blazor" - "Blazor Charts" - "Blazor Spline Chart" - "cards" - "Chart" - "Data Visualization" - "OpenAI" - "predictive analytics" - "Real-Time Data" - "Spinner" - "Spline Chart" --- [Weekly Data Visualization](https://www.syncfusion.com/blogs/category/weekly-data-visualization) # Build an AI Powered Air Quality Dashboard Using Blazor Spline Chart and GPT-4o [Ilamathi Govindaraj](https://www.syncfusion.com/blogs/author/ilamathi-govindaraj) ![Build an AI Powered Air Quality Dashboard Using Blazor Spline Chart and GPT-4o](https://www.syncfusion.com/blogs/wp-content/uploads/2025/09/Build-an-AI-Powered-Air-Quality-Dashboard-Using-Blazor-Spline-Chart-and-GPT-4o.png) **TL;DR:** Learn how to build a real-time air quality dashboard using Blazor Spline Chart and Azure OpenAI. This tutorial covers chart rendering, AI-based forecasting, and interactive data visualization, all tailored for developers. Welcome to our latest post in the **Weekly Data Visualization** blog series! This blog explores how [Syncfusion® Blazor](https://www.syncfusion.com/blazor-components) components turn raw air quality data into insights. Using [Azure OpenAI](https://azure.microsoft.com/en-us/products/ai-services/openai-service) , real-time and forecasted pollution data are visualized in a [Spline chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) using [Syncfusion® Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) . The chart enables interactive trends analysis, while seamless API integration ensures continuous data flow, making it a powerful tool for environmental management. Let’s get started! ## Why use Syncfusion® Blazor Chart? The [Syncfusion® Blazor Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component is a powerful tool for building interactive, high-performance visualizations in Blazor apps. Ideal for dashboards, reports, and analytics, it transforms raw data into meaningful insights. ### Key benefits include: - Support for 50+ chart types like [Line](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) , [Bar](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) , [Pie](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) , [Area](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) , and [Financial](https://www.syncfusion.com/blazor-components/blazor-stock-chart) . - Built-in interactivity: [zooming](https://blazor.syncfusion.com/documentation/chart/zooming) , [panning](https://blazor.syncfusion.com/documentation/stock-chart/panning) , [tooltips](https://blazor.syncfusion.com/documentation/chart/tool-tip) , [crosshairs](https://blazor.syncfusion.com/documentation/chart/cross-hair-and-track-ball) , and legends. - Full customization with themes, gradients, markers, and annotations. - Real-time data binding for dynamic updates. - Native Blazor support for Server and **WebAssembly** hosting. **Note:** To start using the Syncfusion® Blazor Chart, follow our official [documentation](https://blazor.syncfusion.com/documentation/chart/getting-started-with-web-app) ## Prerequisites Before getting started, ensure you have access to [Azure OpenAI](https://azure.microsoft.com/en-us/products/ai-foundry/models/openai/) and have deployed a model in the Azure portal. You’ll need these integration credentials: - **Azure OpenAI API key** - **Model name** (gpt-4o is used for this example) - **Endpoint URL** - **Install and configure the Syncfusion® Blazor Chart component** ## Building an AI-powered air quality dashboard with Blazor components To implement a dashboard for monitoring air quality using Azure OpenAI and Blazor components, follow the steps outlined below. ### Step 1: Configure the Azure OpenAI To integrate Azure OpenAI with your Blazor application, securely configure your credentials in the **appsettings.json** file. This enables safe communication between your app and Azure OpenAI services. Add the following configuration, replacing the placeholders with your actual credentials: ``` { "AzureOpenAI": { "Endpoint": "your-endpoint-url", "ApiKey": "your-api-key", "DeploymentId": "model_name" } } ``` Replace `your-endpoint-url`, `your-api-key`, and `model_name` with your actual **Azure OpenAI** endpoint URL, API key, and deployed model name. ### Step 2: Setting up the Azure AI service Configure the AI-powered APIs to fetch comprehensive air quality data, including historical trends and predictive analytics, through the Azure AI Service. ### Define the data model: Our journey begins with defining the `AirQualityInfo` class, which is essential for capturing detailed air quality metrics: ``` public class AirQualityInfo { public DateTime Date { get; set; } public double PollutionIndex { get; set; } public string? AirQualityStatus { get; set; } public double Latitude { get; set; } public double Longitude { get; set; } public double AIPredictionAccuracy { get; set; } } ``` Next, implement the `AIAirQualityService` class to integrate AI capabilities into the dashboard. This class manages API credentials, securely communicates with Azure OpenAI, and generates prompts tailored to air quality queries. It retrieves data asynchronously for better performance and includes detailed logging for monitoring and debugging, ensuring reliability and responsiveness. Here’s a snippet of how this service might look: ``` public class AIAirQualityService { private readonly HttpClient _httpClient; private readonly string _endpoint; private readonly string _apiKey; private readonly string _deployment; private readonly ILogger _logger; …… …… …… public async Task GetResponseFromOpenAI(string prompt) { var requestBody = new { messages = new[] { new { role = "user", content = prompt } }, max_tokens = 2000 }; var request = new HttpRequestMessage(HttpMethod.Post, $"{_endpoint}/openai/deployments/{_deployment}/chat/completions?api-version=2025-01-01-preview") { Content = JsonContent.Create(requestBody) }; request.Headers.Add("api-key", _apiKey); var response = await _httpClient.SendAsync(request); if (response.IsSuccessStatusCode) { string? responseJson = await response.Content.ReadAsStringAsync(); using var doc = JsonDocument.Parse(responseJson); return doc.RootElement.GetProperty("choices")[0].GetProperty("message").GetProperty("content").GetString(); } else { …… } } private async Task> HandleResponseFromAI(string prompt) { string response = await GetResponseFromOpenAI(prompt); string extractedJson = JsonExtractor.ExtractJson(response); if (!string.IsNullOrEmpty(extractedJson)) { var options = new System.Text.Json.JsonSerializerOptions { NumberHandling = System.Text.Json.Serialization.JsonNumberHandling.AllowReadingFromString, PropertyNameCaseInsensitive = true }; return System.Text.Json.JsonSerializer.Deserialize>(extractedJson, options) ?? new List(); } else { return new List(); } } } ``` The AI service uses custom prompts to generate data and predictions. Here’s how this process unfolds: ### Predict historical air quality trends The **`PredictAirQualityTrends`** method retrieves data for the past 30 days. The AI model generates realistic datasets that reflect daily air quality variations. ``` public class AIAirQualityService { private readonly HttpClient _httpClient; private readonly string _endpoint; private readonly string _apiKey; private readonly string _deployment; private readonly ILogger _logger; …… …… …… public async Task GetResponseFromOpenAI(string prompt) { var requestBody = new { messages = new[] { new { role = "user", content = prompt } }, max_tokens = 2000 }; var request = new HttpRequestMessage(HttpMethod.Post, $"{_endpoint}/openai/deployments/{_deployment}/chat/completions?api-version=2025-01-01-preview") { Content = JsonContent.Create(requestBody) }; request.Headers.Add("api-key", _apiKey); var response = await _httpClient.SendAsync(request); if (response.IsSuccessStatusCode) { string? responseJson = await response.Content.ReadAsStringAsync(); using var doc = JsonDocument.Parse(responseJson); return doc.RootElement.GetProperty("choices")[0].GetProperty("message").GetProperty("content").GetString(); } else { …… } } private async Task> HandleResponseFromAI(string prompt) { string response = await GetResponseFromOpenAI(prompt); string extractedJson = JsonExtractor.ExtractJson(response); if (!string.IsNullOrEmpty(extractedJson)) { var options = new System.Text.Json.JsonSerializerOptions { NumberHandling = System.Text.Json.Serialization.JsonNumberHandling.AllowReadingFromString, PropertyNameCaseInsensitive = true }; return System.Text.Json.JsonSerializer.Deserialize>(extractedJson, options) ?? new List(); } else { return new List(); } } } ``` ### Predict future trends The `PredictNextMonthForecast` method forecasts air quality for the next 30 days based on historical data, providing proactive insights. ``` internal async Task> PredictNextMonthForecast(List historicalData) { try { string today = DateTime.UtcNow.ToString("yyyy-MM-dd"); string futureDate = DateTime.UtcNow.AddDays(30).ToString("yyyy-MM-dd"); var userMessage = "You are an AI model specialized in air pollution forecasting. " + "Based on the provided historical data, generate an accurate prediction " + $"for air quality trends over the next 30 days ({today} to {futureDate}). " + "Using the following historical dataset, predict the Pollution Index for the next 30 days:\n\n" + $"{System.Text.Json.JsonSerializer.Serialize(historicalData)}\n\n" + "Use the following structure for each entry: " + "[ { \"Date\": \"YYYY-MM-DD\", \"PollutionIndex\": number, " + "\"AirQualityStatus\": \"Good | Satisfactory | Moderate | Poor | Very Poor | Severe\", " + "\"Latitude\": number, \"Longitude\": number, \"AIPredictionAccuracy\": number } ]. " + "Output ONLY valid JSON without any additional explanations."; return await HandleResponseFromAI(userMessage); } catch (Exception ex) { …… } } ``` ### Step 3: Configuring the dashboard header The [Syncfusion® Blazor TextBox](https://www.syncfusion.com/blazor-components/blazor-textbox) captures user input for a specific location, enabling dynamic retrieval of air quality data. Paired with the [Syncfusion® Blazor Button](https://www.syncfusion.com/blazor-components/blazor-button) , users can trigger the data-fetching process with a single click, making the interaction smooth and intuitive. Here’s the HTML code setup using Syncfusion® components for a Blazor environment: ```

AI-Powered Air Quality Command Center

Real-Time Monitoring and Smart Forecasting for a Healthier Environment

``` The following code example demonstrates how to retrieve air quality data by entering a country name and triggering a forecast using a button click. ``` private async Task TextChanged(Microsoft.AspNetCore.Components.ChangeEventArgs e) { if (!string.IsNullOrWhiteSpace(SearchCountry)) { ShowMarker = false; SpinnerVisibility = MapSpinnerVisibility = true; Data = new ObservableCollection(); ForeCastData = new ObservableCollection(); MapMarkers?.Clear(); SearchCountry = e.Value?.ToString(); CurrentPollutionIndex = AIPredictionAccuracy = AvgPollution7Days = LatestAirQualityStatus = "Loading..."; await FetchAirQualityData(SearchCountry); if (Data != null && sfDashboardLayout != null) { ShowMarker = true; SpinnerVisibility = MapSpinnerVisibility = false; await sfDashboardLayout.RefreshAsync(); await chart1.RefreshAsync(); } } } private async void ForecastButton_Click() { if (!string.IsNullOrWhiteSpace(SearchCountry)) { SpinnerVisibility = true; CurrentPollutionIndex = AIPredictionAccuracy = AvgPollution7Days = LatestAirQualityStatus = "Loading..."; await PredictForecastData(); if (ForeCastData != null && sfDashboardLayout != null) { ShowMarker = true; SpinnerVisibility = false; await sfDashboardLayout.RefreshAsync(); await chart1.RefreshAsync(); } } } ``` - The **TextChanged** method is triggered when the user updates the location input. It initiates data retrieval, shows loading indicators, and refreshes the dashboard with updated air quality data. - The **ForecastButton_Click** method fetches forecast data, displays a spinner during loading, and updates the dashboard once the data is ready. The image below illustrates the layout implemented by the above code: ### Step 4: Visualizing data with Spline Charts Configure **Syncfusion® Blazor Charts** with the ** Spline series** to present air quality data using smooth curves for better visual appeal and analysis. We bind pollution data from the AI service to the Spline series and customize the visuals to enhance clarity. Actual and forecasted data are separated in the [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html) , with current values shown as solid lines and forecasts as dashed lines with animations for clear distinction, as shown in the code below. ``` @if (Data != null) { } @if (ForeCastData != null) { } ``` - In this configuration, [ChartPrimaryXAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartPrimaryXAxis.html) and [ChartPrimaryYAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartPrimaryYAxis.html) are configured for precise formatting and clear visibility, supporting time-series data. - [Tooltips](https://blazor.syncfusion.com/documentation/chart/tool-tip) and [zoom](https://blazor.syncfusion.com/documentation/chart/zooming) enable detailed views and smooth chart navigation. - Data binding shows actual and forecasted indices with solid and dashed lines for distinction. Refer to the following spline chart image: ![Visualizing data with Blazor Spline Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2025/09/Using-spline-chart-to-visualize-data.png) Visualizing data with Blazor Spline Chart The data label template highlights air quality points with a pollution index below 50. It uses a custom SVG featuring a green triangle icon to indicate good air quality, as shown in the code below. ``` ``` Refer to the following image showing the data label template in action: ![Blazor Spline Charts with data labels](https://www.syncfusion.com/blogs/wp-content/uploads/2025/09/Using-data-label-to-highlight-air-quality.png) Blazor Spline Chart with data labels ### Step 5: Adding Blazor Maps for location visualization Maps are a valuable tool for providing geographical context to a selected location. By using [Syncfusion® Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) to visually display the selected country, this feature highlights the country’s name and location, making it easier to identify and interpret pollution hotspots. Now, let’s see how to configure Syncfusion Blazor Maps: ```
Marker Image
@CountryName
``` Now, refer to the following image showing the map configuration: ![Blazor Maps added for location Visualization](https://www.syncfusion.com/blogs/wp-content/uploads/2025/09/Using-maps-to-display-a-selected-country-and-location.png) Blazor Maps added for location Visualization ### Step 6: Displaying key metrics To provide a comprehensive understanding of air quality, the dashboard presents critical metrics in a structured and readable format using [Syncfusion® Blazor Card](https://www.syncfusion.com/blazor-components/blazor-card) . This layout ensures quick and easy interpretation of vital air quality insights. - **Current pollution index**: Displays the real-time pollution level. - **Pollution (7 Days)**: Shows the average pollution level over the past week. - **Air quality status**: Indicates the overall air quality condition. - **Prediction accuracy**: Shows the AI model’s confidence in forecasting air quality trends. This card-based presentation effectively highlights key data, enhancing the clarity and usability of air quality metrics. The [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) , [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) , and [Blazor Card](https://blazor.syncfusion.com/documentation/card/getting-started) components are placed inside the [Blazor Dashboard](https://www.syncfusion.com/blazor-components/blazor-dashboard) component to ensure proper layout and alignment, as shown in the code below. ``` ``` Refer to the following image for a visual representation of the card layout: ![Interprating vital air quality insights using Syncfusion Blazor Card](https://www.syncfusion.com/blogs/wp-content/uploads/2025/09/Interprating-vital-air-quality-insights-using-Syncfusion-Blazor-Card.png) Interprating vital air quality insights using Syncfusion Blazor Card ### Step 7: Adding the Blazor Spinner The [Syncfusion® Blazor Spinner](https://www.syncfusion.com/blazor-components/blazor-spinner) visually indicates when the application loads or fetches data, preventing interaction with incomplete elements and ensuring a smoother, more responsive interface. Let’s add a Blazor spinner to improve the user experience during data fetches and maintain seamless UI interactions. Here’s the code snippet for the spinner: ``` ``` Refer to the following image showing the spinner in action: Blazor Spinner shows loading and data fetch status To build an intuitive layout for the Air Quality Index dashboard, elements like text inputs, buttons, charts, maps, and cards are strategically arranged. This ensures a flexible, responsive design that adapts well to various screen sizes and orientations. Now, refer to the overall image of the AI-powered Air Quality Dashboard. ![Visualizing the Air Quality Index with Syncfusion® Blazor Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2025/09/AI-Provided-Air-Quality-Dashboard_GIF-Animation.gif) Visualizing the Air Quality Index with Syncfusion® Blazor Charts ## References For more details, refer to the [GitHub](https://github.com/SyncfusionExamples/AI-Powered-Air-Quality-Command-Center-with-Syncfusion-Blazor-Chart) demo. ## Conclusion Thanks for reading! In this blog, we have seen how to build anAI-powered air pollution monitoring dashboard. Try them out and leave your feedback in the comments section below! Explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/spline?theme=fluent2) to learn more about the supported chart types and how easy it is to configure them for stunning visual effects. The latest version of the Blazor Chart component is available for current customers from the [license and downloads](https://www.syncfusion.com/account/downloads) page. If you are not a Syncfusion® customer, try our [30-day free trial](https://www.syncfusion.com/downloads) . You can also contact us through our [support forums](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or[feedback portal](https://www.syncfusion.com/feedback) . We are always happy to assist you! ## Related Blogs [Build AI-Powered Water Consumption Chart Using Azure OpenAI and Blazor Spline Charts](https://www.syncfusion.com/blogs/post/ai-water-consumption-chart-blazor-spline) [Blazor Radar Charts: Visualizing Football Defending Stats Made Easy](https://www.syncfusion.com/blogs/post/blazor-radar-chart-football-stats) [How to Build a Blazor HeatMap Chart to Visualize Global Temperature Anomalies](https://www.syncfusion.com/blogs/post/blazor-heatmap-temperature-anomalies) [How to Build an AI-Powered Blazor Chatbot That Turns Conversations into Charts](https://www.syncfusion.com/blogs/post/ai-powered-blazor-chatbot)