Hello,
I would like to know if it is normal for the rendering to be slow with the RadzenChart component when the volume of data is "heavy." Because, in comparison, ChartJS is really faster. I would like to know if there isn't a possible optimization of my code. Exemple of render is quite similar to exemple code in the documentation :
@page "/counter"
@using System.Globalization
@using Radzen.Blazor
@using System.Diagnostics;
<PageTitle>Counter</PageTitle>
<div class="container">
@if (_isLoading)
{
<p>Loading...</p>
}
else
{
<div class="row">
<div class="col-sm-12 my-5">
<RadzenCard class="w-100 mb-4" Style="display: flex; align-items: center; gap: 0.5rem">
<RadzenCheckBox @bind-Value="@smooth" Name="smooth"></RadzenCheckBox>
<RadzenLabel Text="Smooth" For="smooth" Style="margin-right: 1rem;" />
<RadzenCheckBox @bind-Value="@showDataLabels" Name="dataLabels"></RadzenCheckBox>
<RadzenLabel Text="Show Data Labels" For="dataLabels" />
</RadzenCard>
<RadzenChart>
@foreach (var entry in revenueData)
{
<RadzenLineSeries Smooth="@smooth" Data="@entry.Value" CategoryProperty="Date" Title="@entry.Key.ToString()" LineType="LineType.Dashed" ValueProperty="Revenue">
<RadzenMarkers MarkerType="MarkerType.Square" />
<RadzenSeriesDataLabels Visible="@showDataLabels" />
</RadzenLineSeries>
}
<RadzenCategoryAxis Padding="20" Formatter="@FormatAsMonth" />
<RadzenValueAxis Formatter="@FormatAsUSD">
<RadzenGridLines Visible="true" />
<RadzenAxisTitle Text="Revenue in USD" />
</RadzenValueAxis>
</RadzenChart>
</div>
</div>
}
</div>
@code {
bool smooth = true;
bool showDataLabels = true;
Random rand = new Random();
Stopwatch stopwatch = new Stopwatch();
private bool _isLoading = false;
class DataItem
{
public string Date { get; set; }
public double Revenue { get; set; }
}
string FormatAsUSD(object value)
{
return ((double)value).ToString("C0", CultureInfo.CreateSpecificCulture("en-US"));
}
string FormatAsMonth(object value)
{
if (value != null)
{
return Convert.ToDateTime(value).ToString("MMM");
}
return string.Empty;
}
Dictionary<int, DataItem[]> revenueData = new Dictionary<int, DataItem[]>();
protected override async Task OnInitializedAsync()
{
_isLoading = true;
// Simulate an asynchronous task (e.g., data retrieval).
await Task.Run(() =>
{
stopwatch.Start();
for (int year = 1997; year <= 2023; year++)
{
revenueData.Add(year, GenerateRandomRevenueData(year));
}
});
_isLoading = false;
}
protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
if (firstRender)
{
stopwatch.Stop();
Console.WriteLine($"Render time: {stopwatch.ElapsedMilliseconds} ms");
}
}
DataItem[] GenerateRandomRevenueData(int year)
{
var data = new List<DataItem>();
for (int month = 1; month <= 12; month++)
{
data.Add(new DataItem
{
Date = new DateTime(year, month, 1).ToString("yyyy-MM-dd"),
Revenue = rand.Next(200000, 400000) // Random revenue between 200,000 and 400,000
});
}
return data.ToArray();
}
}