Unable to render FusionTime charts in Blazor

I have built a Blazor app that renders FusionCharts, connecting to an MS SQL database. I have successfully created regular FusionCharts and linked them to the MS SQL database. Additionally, I converted a 'demo' FusionTime report from ASP.NET to Blazor, which renders fine with demo data stored in external files.

However, while all these aspects work great, I cannot get time series charts to render with my SQL data..

Working Page

@page "/line-chart"@using System.Net.Http@using System.Text.Json@using Microsoft.JSInterop@inject HttpClient Http@inject IJSRuntime JSRuntime<h6>Reactor 1 Alarm Analysis</h6><div id="chart-container"></div>@code {    private string schemaUrl = "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json";    private string dataUrl = "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json";    protected override async Task OnInitializedAsync()    {        var schema = await Http.GetStringAsync(schemaUrl);        var data = await Http.GetStringAsync(dataUrl);        InitChart(schema, data);    }    private void InitChart(string schema, string data)    {        var chartConfig = new        {            type = "timeseries",            renderAt = "chart-container",            width = "800",            height = "550",            dataSource = new            {                chart = new { },                caption = new { text = "Alert Analysis" },                subcaption = new { text = "Reactor 1" },                yaxis = new[] {                    new {                        plot = new { value = "Reactor 1 Alert Count" },                        format = new { prefix = "$" },                        title = "Alert Count"                    }                }            }        };        var chartConfigJson = System.Text.Json.JsonSerializer.Serialize(chartConfig);        JSRuntime.InvokeVoidAsync("renderFusionChart", chartConfigJson, schema, data);    }}

Despite all my efforts, I cannot get time series charts to render with my SQL data. I have tried so many things, and it's incredibly demoralising. I've literally spent weeks trying to crack this, it's now 3:02 AM.

What I am expecting is a nice render of my 65,000+ records displayed in a FusionTime chart via my Blazor application. But it’s just not working. :(

Here is the most recent of my attempts.

Can someone please help.

@page "/event-time-chart"@using CAPA.Data@using Microsoft.EntityFrameworkCore@inject ApplicationDbContext dbContext@inject IJSRuntime JSRuntime<h6>Event Time Chart</h6><div id="chart-container"></div>@code {    private string? chartData;    private string? chartSchema;    private bool isLoaded = false;    protected override async Task OnInitializedAsync()    {        await LoadChartData();    }    protected override async Task OnAfterRenderAsync(bool firstRender)    {        if (firstRender && chartSchema != null && chartData != null)        {            await InitChart(chartSchema, chartData);            isLoaded = true;        }    }    private async Task LoadChartData()    {        var groupedData = await dbContext.AlarmData                        .GroupBy(a => a.EventTime)                        .Select(group => new                        {                            EventTime = group.Key,                            Value = group.Count()                        })                        .ToListAsync();        chartData = System.Text.Json.JsonSerializer.Serialize(groupedData, new System.Text.Json.JsonSerializerOptions { WriteIndented = true });        var schema = new        {            fields = new object[] {                new { name = "EventTime", type = "date", format = "%Y-%m-%d %H:%M:%S" },                new { name = "Value", type = "number" }        }        };        chartSchema = System.Text.Json.JsonSerializer.Serialize(schema, new System.Text.Json.JsonSerializerOptions { WriteIndented = true });    }    private async Task InitChart(string schema, string data)    {        var chartConfig = new        {            type = "timeseries",            renderAt = "chart-container",            width = "800",            height = "550",            dataSource = new            {                chart = new { },                caption = new { text = "Event Count Analysis" },                subcaption = new { text = "Detailed View" },                yaxis = new[] {                    new {                        plot = new { value = "Value" },                        title = "Number of Events"                    }                }            }        };        var chartConfigJson = System.Text.Json.JsonSerializer.Serialize(chartConfig, new System.Text.Json.JsonSerializerOptions { WriteIndented = true });        await JSRuntime.InvokeVoidAsync("renderFusionChart", chartConfigJson, schema, data);    }}<script>    function renderFusionChart(chartConfigJson, schemaJson, dataJson) {        const chartConfig = JSON.parse(chartConfigJson);        const data = JSON.parse(dataJson);        const schema = JSON.parse(schemaJson);        console.log(chartConfig);        console.log(data);        console.log(schema);        FusionCharts.ready(function () {            var chart = new FusionCharts({                type: chartConfig.type,                renderAt: chartConfig.renderAt,                width: chartConfig.width,                height: chartConfig.height,                dataSource: {                    chart: chartConfig.dataSource.chart,                    caption: chartConfig.dataSource.caption,                    subcaption: chartConfig.dataSource.subcaption,                    yaxis: chartConfig.dataSource.yaxis,                    data: data,                    schema: schema                }            });            chart.render();        });    }</script>