apexcharts / Blazor-ApexCharts

A blazor wrapper for ApexCharts.js
https://apexcharts.github.io/Blazor-ApexCharts
MIT License
811 stars 92 forks source link

Please help me with loading dynamic data #511

Closed CoolDaddyCool closed 3 weeks ago

CoolDaddyCool commented 3 weeks ago

Hello there I'm new to Blazor-ApexCharts and I'm not able to display data from the HttpClient service. I'm using Blazor WebAssembly stand alone in .NET8. My code:

@page "/graph"
@inject IDataService dataService
<ApexChart TItem="MachineDataDTO" Title="Machine Data">
    <ApexPointSeries TItem="MachineDataDTO"
                     Items="Data"
                     Name="MovesPerSec"
                     SeriesType="SeriesType.Bar"
                     XValue="@(x => x.Name)"
                     YAggregate="@(x => x.Sum(x => x.ChainMovesPerSecond))" />
</ApexChart>
<h3>Counter: @Data.Count()</h3>
@code {
    public IEnumerable<MachineDataDTO> Data { get; set; } = new List<MachineDataDTO>();

    protected override async Task OnInitializedAsync()
    {
        Data = await dataService.GetMachineDataAsync();
    }
}

After reaching the graph page chart witout any data is diplayed . I know that my service (Task<IEnumerable> GetMachineDataAsync()) works because returns @Data.Count() correctly. Maybe I missed something maybe I approached it incorrectly. My appologies for placing my request in issue section, but I stacked with this already for 2 days and I ran out of ideas.

joadan commented 3 weeks ago

Hi, have you checked samples? https://apexcharts.github.io/Blazor-ApexCharts/features/chart-data

CoolDaddyCool commented 3 weeks ago

With a hint from @joadan, here’s my solution for anyone encountering a similar issue:

@if (Data != null && Data.Any())
{
    <ApexChart TItem="MachineDataDTO">
        <ApexPointSeries
        TItem="MachineDataDTO"
        Items="Data"
        Name="MovesPerSec"
        SeriesType="SeriesType.Bar"
        XValue="@(x => x.Name)"
        YAggregate="@(y => y.Sum(y => y.ChainMovesPerSecond))"
        OrderByDescending="e=>e.Y" />
    </ApexChart>
}
else
{
    <h4>...loading....</h4>
}
CoolDaddyCool commented 3 weeks ago

thanks @joadan