I have tried Accumulation chart but it is not showing when the page is not refresh. I am using Blazor WebAssembly. You can see the project on this link.
- When the page is first loaded the chart appears but when I navigate to a different page like Canada or Philippine page, the chart is not loading. Is there something I am missing? Code below:
@using Syncfusion.Blazor.Charts
@inject AttributeService AttributeService
<style>
.e-grid {
border: none;
}
.e-grid tr.e-row {
height: 30px;
}
</style>
<div class="row rounded-lg shadow-lg" style="background: white;">
<div class="col">
<SfAccumulationChart Title="Status Chart" Width="100%" Height="380px" EnableSmartLabels="true">
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@Statuses" XName="X" YName="Y" Radius="83%" StartAngle="0" EndAngle="360" InnerRadius="25%" Palettes="@palettes">
<AccumulationDataLabelSettings Visible="true" Name="X" Position="AccumulationLabelPosition.Outside">
<AccumulationChartConnector Length="10%"></AccumulationChartConnector>
<AccumulationChartDataLabelFont Color="Black" Size="14px" FontFamily="Roboto"></AccumulationChartDataLabelFont>
</AccumulationDataLabelSettings>
<AccumulationChartAnimation Enable="false"></AccumulationChartAnimation>
</AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartTooltipSettings Enable="true" Format="${point.x} : ${point.y}"></AccumulationChartTooltipSettings>
<AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
</SfAccumulationChart>
</div>
<div class="col mt-5">
<SfGrid TValue="Status"
DataSource="@Statuses"
Width="50%"
AllowSelection="false"
GridLines="GridLine.None"
EnableHover="false">
<GridTemplates>
<RowTemplate>
@{ var legend = (context as Status);
var style = "width: 16px; height: 16px; margin-left: 1px; " +
"border-radius: 16px; background:" + legend.Color;
<td><div style="@style"></div></td>
<td style="text-align: left;">@legend.X</td>
<td style="text-align: right;">@legend.Y.ToString("N0")</td> }
</RowTemplate>
</GridTemplates>
<GridColumns>
<GridColumn Field="@nameof(Status.Color)" HeaderText="" Width="10" TextAlign="@TextAlign.Center"></GridColumn>
<GridColumn Field="@nameof(Status.X)" HeaderText="Status" Width="10" TextAlign="@TextAlign.Left"></GridColumn>
<GridColumn Field="@nameof(Status.Y)" HeaderText="Figure" Width="10" TextAlign="@TextAlign.Right"></GridColumn>
</GridColumns>
</SfGrid>
</div>
</div>
@code {
private IEnumerable<Attributes> Countries;
private List<Attributes> AllAttribute { get; set; }
private List<Status> Statuses = new List<Status>();
private string[] palettes = new string[] { "#61EFCD", "#CDDE1F", "#FEC200", "#CA765A" };
private class Status
{
public string X { get; set; }
public int Y { get; set; }
public string Color { get; set; }
}
protected override async Task OnInitializedAsync()
{
AllAttribute = await AttributeService.GetAttributesAsync();
UpdateValues();
GetStatuses();
await InvokeAsync(() => { StateHasChanged(); });
}
private void UpdateValues()
{
Countries = AllAttribute.Where(a => a.Country_Region == "Canada").ToList();
}
private void GetStatuses()
{
Statuses.Add(new Status
{
X = "Positive",
Y = Countries.ElementAt(0).Confirmed,
Color = this.palettes[0]
});
Statuses.Add(new Status
{
X = "Recovered",
Y = Countries.ElementAt(0).Recovered,
Color = this.palettes[1]
});
Statuses.Add(new Status
{
X = "Active",
Y = Countries.ElementAt(0).Active,
Color = this.palettes[2]
});
Statuses.Add(new Status
{
X = "Deaths",
Y = Countries.ElementAt(0).Deaths,
Color = this.palettes[3]
});
}
