Build AI-Powered Water Consumption Chart Using Azure OpenAI and Blazor Spline Charts

Refer to the following image,

Adding a Spinner for chart update visualization

To enhance the user experience, the Syncfusion^® Blazor Spinner component is incorporated. It provides clear visual feedback, indicating that the AI model is processing the request and the chart is being updated with newly forecasted data.

<SfSpinner @bind-Visible="@SpinnerVisibility"></SfSpinner>

@code{
    private bool SpinnerVisibility { get; set; } = false;
}
 

Refer to the following image,

Step 2: Configure Azure OpenAI

To begin with, when integrating Azure OpenAI, service credentials must be configured. This involves adding the unique endpoint and access key to the appsettings.json file, ensuring a secure and standardized approach to managing configuration settings.

Insert the following JSON structure into the appsettings.json file, substituting the placeholder values with your specific Azure OpenAI 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 3: Create a service to connect Azure OpenAI

To establish a connection with Azure OpenAI and retrieve AI-generated responses based on user input, a dedicated service class named AISampleService is created. This service accepts user queries, internally constructs a detailed prompt, and sends it to the Azure OpenAI API.

Upon receiving the response, the service processes the data and returns it for dynamic chart updates with relevant forecast information.

using System.Text.Json;

public class AISampleService
{
    private readonly HttpClient _httpClient;
    private readonly IConfiguration _configuration;
    private readonly string? _endpoint;
    private readonly string? _apiKey;
    private readonly string? _deploymentId;

    public AISampleService(HttpClient httpClient, IConfiguration configuration)
    {
        _httpClient = httpClient;
        _configuration = configuration;
        _endpoint = _configuration["AzureOpenAI:Endpoint"];
        _apiKey = _configuration["AzureOpenAI:ApiKey"];
        _deploymentId = _configuration["AzureOpenAI:DeploymentId"];
    }

    public async Task<string> GetAIResponse(string prompt)
    {
        var requestBody = new
            {
                messages = new[]
                {
                    new { role = "user", content = prompt }
                },
                max_tokens = 2000
            };

            var request = new HttpRequestMessage(HttpMethod.Post, $"{_endpoint}/openai/deployments/{_deploymentId}/chat/completions?api-version=2023-07-01-preview")
            {
                Content = JsonContent.Create(requestBody)
            };

            request.Headers.Add("api-key", _apiKey);

            var response = await _httpClient.SendAsync(request);
            if (response.IsSuccessStatusCode)
            {
                var responseJson = await response.Content.ReadAsStringAsync();
                using var doc = JsonDocument.Parse(responseJson);
                return doc.RootElement.GetProperty("choices")[0].GetProperty("message").GetProperty("content").GetString() ?? string.Empty;
            }
            else
            {
                var errorContent = await response.Content.ReadAsStringAsync();
                return $"Error: {response.StatusCode} - {errorContent}";
            }
    }
}
 

Step 4: Create a prompt to request future predicted data points

To generate realistic water consumption forecasts, a precise prompt is crafted for Azure OpenAI. The prompt requests data for the next five years in a specific JSON format, incorporates the historical dataset for context, and instructs the AI to maintain realistic fluctuations rather than linear patterns.

var lastYear = WaterConsumptionData.Max(d => d.Year).Year;

string dataJson = JsonConvert.SerializeObject(WaterConsumptionData);

string prompt = $"Generate {value} data for the next 5 years after {lastYear} " +
                $"in JSON array format using this structure: " +
                $"[{{\"Year\": \"2025-01-01\", \"Population\": 8500000, \"WaterConsumptionInGallons\": 1000}}]. " +
                $"Base it on: {dataJson} and the data should avoid uniform increase or decrease " +
                $"and should realistically reflect past trends and fluctuations.";

Step 5: Fetch data from Azure OpenAI

The AnimateButton method creates a smooth user experience when requesting AI-generated forecasts. It prevents multiple simultaneous requests by using an isLoading flag that guards against parallel executions.

When activated, it immediately displays a spinner component and applies a pulsing animation to the button itself, providing users with clear visual feedback that the system is processing their request.

After a brief delay to ensure UI updates are visible, it calls the GetForecastData method to fetch the AI-generated predictions. Once forecasting is complete, it returns all UI elements to their normal state by removing animations and hiding the spinner.

private async Task AnimateButton()
{
    if (isLoading)
    {
        return;
    }
    isLoading = true;
    SpinnerVisibility = true;
    animationClass = "pulse-animation";
    await InvokeAsync(StateHasChanged);
    await Task.Delay(2000);
    await GetForecastData("water consumption forecast ");
    isLoading = false;
    animationClass = "";
    await InvokeAsync(StateHasChanged);
    SpinnerVisibility = false;
}
 

The GetForecastData method handles generating and integrating AI forecast data. It serializes existing data into JSON to provide context to the AI model, then constructs a detailed prompt requesting forecast data in a specific format.

After receiving the response, it deserializes the JSON back into WaterConsumption objects and animates the addition of each new data point with a delay.

The combination of these methods creates an engaging user experience with clear visual indicators of AI processing and seamless integration of predictions into the existing chart visualization.

public async Task GetForecastData(string value)
{
    var lastYear = WaterConsumptionData.Max(d => d.Year).Year;
    string dataJson = JsonConvert.SerializeObject(WaterConsumptionData);
    string prompt = $@"Generate {value} data for the next 5 years after {lastYear} in JSON array format using this structure: 
        [{{""Year"": ""2025-01-01"", ""Population"": 8500000, ""WaterConsumptionInGallons"": 1000}}]. 
        Base it on: {dataJson} and the data should avoid uniform increase or decrease and should realistically reflect past trends and fluctuations.";

    string result = await OpenAIService.GetAIResponse(prompt);
    var jsonStart = result.IndexOf('[');
    var jsonEnd = result.LastIndexOf(']');

    if (jsonStart >= 0 && jsonEnd > jsonStart)
    {
        var jsonSubstring = result.Substring(jsonStart, jsonEnd - jsonStart + 1);
        try
        {
            var forecastData = JsonConvert.DeserializeObject<List<WaterConsumption>>(jsonSubstring);
            if (forecastData != null)
            {
                foreach (var item in forecastData)
                {
                    WaterConsumptionData.Add(item);
                    StateHasChanged();
                    await Task.Delay(500);
                }
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error deserializing forecast data: {ex.Message}");
        }
    }
}

Step 6: Differentiating the AI-predicted data and predefined historical data using Striplines

To differentiate the historical data from the AI-predicted data, striplines are used in charts. The conditional rendering code below displays blue background strips in the chart that visually highlight the AI-generated forecast data.

When forecast data exists, semi-transparent blue strip lines appear behind the data points, starting from the first forecast date and extending across all predicted points.

@if (HasForecastData) {
    <ChartStriplines>
        @foreach(var strip in forecastStriplines) {
            <ChartStripline StartFromAxis="false" Start="@strip.Start" Size="@strip.Size" ZIndex="ZIndex.Behind" Opacity="0.2" Color="blue"/>
        }
    </ChartStriplines>
}
 

When forecast data is successfully generated, the GetForecastData method sets a flag indicating forecasts and creates a stripline entry that marks the starting point and span of the AI-generated data.

This allows users to visually distinguish between historical water consumption data and the AI-predicted future trends in the chart.

public async Task GetForecastData(string value)
{
    …
    …
    if (forecastData != null)
    {
        HasForecastData = true;
        var stripline = new StriplineInfo
        {
            Start = forecastData[0].Year,
            size = forecastData.Count
        };
        forecastStriplines.Add(stripline);
        …
        …
    }
}

Refer to the following image,

GitHub reference

For further details, check out the GitHub demo.

Conclusion

Thanks for reading! In this blog, we’ve learned how to forecast water consumption in New York City by collaborating with Azure OpenAI and Syncfusion^® Blazor Spline Chart. Give it a try and leave your feedback in the comment section below.

If you’re already a Syncfusion^® user, you can download the latest version of Essential Studio^® from the license and downloads page. New to Syncfusion^® Start your journey with a 30-day free trial and explore over 1,900 UI components, including powerful charting tools for Blazor.

If you need assistance, please do not hesitate to contact us via our support forum, support portal, or feedback portal. We are always eager to help you!