Issues with rendering a pie chart - or refreshing it after changing the underlying data.

[Andy Corrigan]

I've been getting this exception whenever the page component goes to the render tree: 

blazor.server.js:21 [2021-10-01T10:06:33.573Z] Error: System.NullReferenceException: Object reference not set to an instance of an object.

   at Syncfusion.Blazor.Charts.AccumulationChartSeries.SetPoints(Object currentResult, Int32 pointIndex, Type type)

   at Syncfusion.Blazor.Charts.AccumulationChartSeries.GetPoints(IEnumerable`1 result, IAccumulationChart accChart)

   at Syncfusion.Blazor.Charts.SfAccumulationChart.ProcessData()

   at Syncfusion.Blazor.Charts.SfAccumulationChart.Refresh(Boolean shouldAnimate)

   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__140_0(Object state)

   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource`1 completion, SendOrPostCallback d, Object state)

   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)

--- End of stack trace from previous location ---

   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item)

But I can't figure out why I'm getting it - I'm using the newest version of syncfusion (updated on NuGet this morning - ironically, that seems to be where the render tree issue started). Can you have a look and see what's going wrong?

My code is below: 

@using Syncfusion.Blazor.PivotView;

@using SelectionType = Syncfusion.Blazor.Grids.SelectionType

@using FilterType = Syncfusion.Blazor.Grids.FilterType

@inject IStudentService studentService ;

@inject IConfiguration Configuration;

@inject NavigationManager NavManager;

@inject SessionState state;

@inject FIS2_DbContext context;

@if (loaded)

{

    @*<div class="card">

            <div class="card-header bg-secondary p-2">

                <h6 class="text-white m-0">Student Attendance</h6>

            </div>

            <div class="card-body">

                <SfPivotView TValue="spGetAllStudentAttendanceMarksInYearResult" @ref="AttendancePivot" ShowGroupingBar="true" ShowValuesButton="true" EnableValueSorting="true">

                    <PivotViewDataSourceSettings DataSource="@studentAllStudentAttendanceMarksInYearResults" ShowSubTotals="false" ShowColumnGrandTotals="false" ShowRowGrandTotals="false" ShowAggregationOnValueField="true" ExpandAll="false">

                        <PivotViewColumns>

                            <PivotViewColumn Name="Weekday"></PivotViewColumn>

                            <PivotViewColumn Name="BlockCode"></PivotViewColumn>

                            <PivotViewColumn Name="PeriodCode"></PivotViewColumn>

                        </PivotViewColumns>

                        <PivotViewRows>

                            <PivotViewRow Name="TermName"></PivotViewRow>

                            <PivotViewRow Name="WeekBeginning"></PivotViewRow>

                            <PivotViewRow Name="Mark"></PivotViewRow>

                        </PivotViewRows>

                        <PivotViewValues>

                            <PivotViewValue Name="Mark"></PivotViewValue>

                        </PivotViewValues>

                        <PivotViewFormatSettings>

                            <PivotViewFormatSetting Name="WeekBeginning" Type="FormatType.DateTime" Format="dd/MM/yyyy"></PivotViewFormatSetting>

                        </PivotViewFormatSettings>

                        <PivotViewValueSortSettings>

                        </PivotViewValueSortSettings>

                    </PivotViewDataSourceSettings>

                </SfPivotView>

            </div>

        </div>*@

    <div class="card">

        <div class="card-header bg-secondary p-2">

            <h6 class="text-white m-0">Student Attendance By Year</h6>

        </div>

        <div class="card-body">

            <SfAccumulationChart @ref="pieChartAnnualAttendance" ID="pieChartAnnualAttendance" Title="Attendance Summary" EnableSmartLabels="true" EnableAnimation="true" EnableBorderOnMouseMove="true" Width="50%">

                <AccumulationChartEvents></AccumulationChartEvents>

                <AccumulationChartLegendSettings Visible="false" Position="LegendPosition.Left"></AccumulationChartLegendSettings>

                <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>

                <AccumulationChartSeriesCollection>

                    <AccumulationChartSeries DataSource="@PieStatistics" XName="Mark" YName="Periods" Name="Browser" Radius="80%" ExplodeOffset="5" Explode="true" ExplodeAll="true">

                        <AccumulationDataLabelSettings Visible="true" Name="DataLabel" Position="AccumulationLabelPosition.Outside">

                            <AccumulationChartConnector Type="ConnectorType.Curve" Length="20px"></AccumulationChartConnector>

                            <AccumulationChartDataLabelFont Size="8px"></AccumulationChartDataLabelFont>

                        </AccumulationDataLabelSettings>

                    </AccumulationChartSeries>

                </AccumulationChartSeriesCollection>

                <AccumulationChartLegendSettings Visible="true"></AccumulationChartLegendSettings>

                <AccumulationChartTooltipSettings Enable="true" Format="${point.x} : <b>${point.y}</b>" Fill="#7bb4eb">

                    <AccumulationChartTooltipBorder Color="red" Width="2"></AccumulationChartTooltipBorder>

                </AccumulationChartTooltipSettings>

            </SfAccumulationChart>

            <SfGrid @ref="studentAttendanceByYear" ID="studentEnrolmentsGrid" DataSource="StuAttendanceByYear" SelectedRowIndex="0" RowHeight="30" AllowTextWrap="true"

                    AllowFiltering="false" AllowPaging="false" AllowSelection="true" AllowSorting="true" EnableHover="true"

                    Toolbar="@(new List<object>() { " Print", "ExcelExport", "PdfExport", "csvExport" })"

                    AllowExcelExport="true" AllowPdfExport="true"

                    ContextMenuItems="@(new List<object>() { " AutoFit", "AutoFitAll", "SortAscending", "SortDescending", "Copy", "PdfExport", "ExcelExport", "CsvExport", "FirstPage", "PrevPage", "LastPage", "NextPage" })">

                <GridSelectionSettings Type="SelectionType.Single"></GridSelectionSettings>

                <GridFilterSettings Type="FilterType.Menu"></GridFilterSettings>

                <GridEvents TValue="spGetStudentAttendanceByYearResult" OnToolbarClick="ToolbarClick"></GridEvents>

                <GridEvents RowSelected="onSelectedRow" TValue="spGetStudentAttendanceByYearResult"></GridEvents>

                <GridPageSettings PageSize="20"></GridPageSettings>

                <GridColumns>

                    <GridColumn Field=@nameof(spGetStudentAttendanceByYearResult.AcademicYearCode) HeaderText="Year" AutoFit="true"></GridColumn>

                    <GridColumn Field=@nameof(spGetStudentAttendanceByYearResult.PossMarks) HeaderText="Possible Marks" Type="ColumnType.Number" Format="N0" AutoFit="true"></GridColumn>

                    <GridColumn Field=@nameof(spGetStudentAttendanceByYearResult.NumPresent) HeaderText="Present No" Format="N0" Type="ColumnType.Number" AutoFit="true"></GridColumn>

                    <GridColumn Field=@nameof(spGetStudentAttendanceByYearResult.PresentPercent) HeaderText="Present %" Format="N1" Type="ColumnType.Number" AutoFit="true"></GridColumn>

                    <GridColumn Field=@nameof(spGetStudentAttendanceByYearResult.NumAuthorised) HeaderText="Auth No" Format="N0" Type="ColumnType.Number" AutoFit="true"></GridColumn>

                    <GridColumn Field=@nameof(spGetStudentAttendanceByYearResult.AuthorisedPercent) HeaderText="Auth %" Format="N1" Type="ColumnType.Number" AutoFit="true"></GridColumn>

                    <GridColumn Field=@nameof(spGetStudentAttendanceByYearResult.NumUnauth) HeaderText="Unauth No" Format="N0" Type="ColumnType.Number" AutoFit="true"></GridColumn>

                    <GridColumn Field=@nameof(spGetStudentAttendanceByYearResult.UnauthorisedPercent) HeaderText="Unauth %" Format="N1" Type="ColumnType.Number" AutoFit="true"></GridColumn>

                </GridColumns>

            </SfGrid>

        </div>

    </div>

    <div class="card">

        <div class="card-header bg-secondary p-2">

            <h6 class="text-white m-0">Student Attendance By Class</h6>

        </div>

        <div class="card-body">

        </div>

    </div>

}

else

{

    <LoadingDialog />

}

@code {

    [Parameter]

    public string StudentId { get; set; }

    private List<spGetAllStudentAttendanceMarksInYearResult> studentAllStudentAttendanceMarksInYearResults = new();

    private List<spGetStudentAttendanceByClassResult> studentAttendanceByClass = new();

    private List<spStudentAttendanceYearsResult> AttYears = new();

    private List<spGetStudentAttendanceByYearResult> StuAttendanceByYear = new();

    private spGetAllStudentAttendanceMarksInYearResult StudentAllAttendanceMarksInYearResult = new();

    private SfPivotView<spGetAllStudentAttendanceMarksInYearResult> AttendancePivot = new();

    private SfAccumulationChart pieChartAnnualAttendance;

    private SfGrid<spGetStudentAttendanceByYearResult> studentAttendanceByYear;

    private bool loaded = false;

    public class PieStats

    {

        public string MarkType { get; set; }

        public int Periods { get; set; }

        public string DataLabel { get; set; }

    }

    public List<PieStats> PieStatistics = new();

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        if (firstRender)

        {

            await GetStudentAttendance(StudentId);

            loaded = true;

            StateHasChanged();

        }

    }

    private async Task GetStudentAttendance(string studentId)

    {

        //studentAllStudentAttendanceMarksInYearResults = await studentService.GetAllStudentAttendanceMarksAsync(studentId);

        //studentAttendanceByClass = await studentService.GetStudentAttendanceByClassAsync(studentId);

        var procedures = context.Procedures;

        StuAttendanceByYear = await procedures.spGetStudentAttendanceByYearAsync(studentId);

        //BuildYearPieChart(2021);

        //studentAllStudentAttendanceMarksInYearResults = await procedures.spGetAllStudentAttendanceMarksInYearAsync(2021, studentId);

        //studentAttendanceByClass = await procedures.spGetStudentAttendanceByClassAsync(studentId);

        //AttYears = await procedures.spStudentAttendanceYearsAsync(studentId);

    }

    private void onSelectedRow(RowSelectEventArgs<spGetStudentAttendanceByYearResult> args)

    {

        loaded = false;

        StateHasChanged();

        BuildYearPieChart(args);

        loaded = true;

        StateHasChanged();

        //pieChartAnnualAttendance.Refresh();

    }

    private void BuildYearPieChart(RowSelectEventArgs<spGetStudentAttendanceByYearResult> row)

    {

        PieStatistics.Clear();

        PieStatistics.Add(new PieStats { MarkType = "Present", Periods = (int)row.Data.NumPresent, DataLabel = "Present %: " + row.Data.PresentPercent });

        PieStatistics.Add(new PieStats { MarkType = "Authorised", Periods = (int)row.Data.NumAuthorised, DataLabel = "" });

        PieStatistics.Add(new PieStats { MarkType = "Unauthorised", Periods = (int)row.Data.NumUnauth, DataLabel = "" });

    }

    private void ToolbarClick(ClickEventArgs args)

    {

        if (args.Item.Id == "studentGrid_pdfexport")

        {

            studentAttendanceByYear.PdfExport();

        }

        if (args.Item.Id == "studentGrid_excelexport")

        {

            studentAttendanceByYear.ExcelExport();

        }

        if (args.Item.Id == "studentGrid_csvExport")

        {

            studentAttendanceByYear.CsvExport();

        }

    }

}

[Durga Gopalakrishnan]

Hi Andy, 

We are validating your reported scenario. We will update the status within one business day(5^th October, 2021). We appreciate your patience until then. 

Regards, 

Durga G 

[Durga Gopalakrishnan]

Hi Andy, 

Thanks for being patience. We have ensured your reported scenario with local data in OnAfterRenderAsync method, unfortunately we are unable to replicate an issue from our end. We have attached the tested sample for your reference.  

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartInRenderAsync755169058.zip 

Please share the below information which will be helpful for further analysis. 

• Try to reproduce the reported scenario in shared sample.
• Please share your sample (or) code snippet with full configurations.
• Share the details if you have done any other customization in your sample.
• Share your datasource file.
• Share your nugget package version.

Kindly let us know if you have any concerns. 

Regards, 

Durga G