Hi there,
I have a RadzenChart dashboard page that is displayed after successful login.
Here is the razor page:
@page "/"
@using IMS.CoreBusiness
@using IMS.UseCases.Interfaces.Order
@using System.Globalization
@inject IAnnualStatusViewModel AnnualStatusViewModel
<div class="px-4 py-5 my-5 text-center">
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<div class="col-lg-5">
<div class="card">
<div class="card-header">
Order Status
</div>
<div class="card-body">
<RadzenChart @ref="myChart">
<RadzenColumnSeries Data="@yearlyStatus" CategoryProperty="Status" Title="2022" LineType="LineType.Dashed" ValueProperty="Count">
<RadzenSeriesDataLabels Visible="@showDataLabels"/>
</RadzenColumnSeries>
<RadzenColumnOptions Radius="10"/>
<RadzenValueAxis Formatter="@FormatAsUSD">
<RadzenGridLines Visible="true"/>
<RadzenAxisTitle Text="Quantity"/>
</RadzenValueAxis>
</RadzenChart>
</div>
</div>
</div>
</div>
</div>
@if (earnings != null)
{
<div class="row mt-4">
<div class="col-lg-8">
<div class="card">
<div class="card-header">
Earnings - Last 3 Months
</div>
@*<div class="card-body">
<div style="display: flex">
<PieChart Colors="@colors" Data="@earnings.CurrentMonth" />
<PieChart Colors="@colors" Data="@earnings.LastMonth" />
<PieChart Colors="@colors" Data="@earnings.PreviousMonth" />
</div>
</div>*@
</div>
</div>
</div>
}
@if (expenses != null)
{
<div class="row mt-4">
<div class="col-lg-8">
<div class="card">
<div class="card-header">
Expenses - Last 3 Months
</div>
@*<div class="card-body">
<div style="display: flex">
<PieChart Colors="@colors" Data="@expenses.CurrentMonth" />
<PieChart Colors="@colors" Data="@expenses.LastMonth" />
<PieChart Colors="@colors" Data="@expenses.PreviousMonth" />
</div>
</div>*@
</div>
</div>
</div>
}
@code {
RadzenChart myChart;
bool showDataLabels = true;
private static int currentYear = DateTime.Today.Year;
private ICollection<string> colors = new List<string>() { "#FBC687", "#F4F7C5", "#93ABD3" };
private ICollection<Order> yearlyExpenses;
private ICollection<AnnualStatusViewModel> yearlyStatus;
private Order earnings;
private Order expenses;
protected override async Task OnInitializedAsync()
{
//earnings = await _dataService.LoadLast3MonthsEarnings();
//expenses = await _dataService.LoadLast3MonthsExpenses();
//yearlyExpenses = await _dataService.LoadCurrentYearExpenses();
yearlyStatus = await AnnualStatusViewModel.ExecuteAsync();
StateHasChanged();
}
string FormatAsUSD(object value)
{
return ((double)value).ToString("N0", CultureInfo.CreateSpecificCulture("en-US"));
}
}
Here is the sample data query output:
And here is the chart:
Why does the chart look like this? I kindly request your help, thank you.