Template for No Data

[Eduardo]

Greetings!

I'm using two kinds of charts, both loading data from URL:

They both work fine, but when the url returns no data it shows a blank space.

Is there a way to create a custom template where I can display a message like "No data found" for cases when no data is returned?

Best regards!

[Gopalakrishnan Veeraraghavan]

Hi Eduardo,

We have analyzed your query and checked the Template for scenarios when no data is returned from the web API for the chart and accumulation chart sample. Therefore, we suggest applying an if-else condition to check If the data source is empty, render the content within a div to display a message such as 'No data found'. Additionally, apply CSS styling to hide the chart and accumulation chart by setting their visibility to 'hidden.' However, if the data source is not empty, remove previously applied classes on the chart and accumulation chart during the chart load event, and proceed to render the chart and accumulation chart normally. We have attached a sample and screenshot for your reference. Please check with the below code snippet.

@if (DataSource?.Count == 0)

{

    <div class="chart">No Data Found</div>

}

else

{

   <div class="@loadDiv">

        <div class="row mt-5">

            <div class="col-12 col-md-6">

                <SfAccumulationChart>                   

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

                    <AccumulationChartSeriesCollection>

                        <AccumulationChartSeries DataSource="@DataSource" XName="CustomerID" YName="OrderID">

                        </AccumulationChartSeries>

                   </AccumulationChartSeriesCollection>

                </SfAccumulationChart>

            </div>

 

            <div class="col-12 col-lg-6">

                <SfChart Title="Vendas Mensais NF" Width="100%" Height="250px">

                    <ChartEvents Loaded="ChartLoaded"></ChartEvents>

                    <ChartPrimaryXAxis Title="Orders" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">

                    </ChartPrimaryXAxis>

                    <ChartSeriesCollection>

                        <ChartSeries DataSource="@DataSource" XName="CustomerID" YName="Freight" Type="ChartSeriesType.Column">

                        </ChartSeries>

                    </ChartSeriesCollection>

                </SfChart>

            </div>

        </div>

    </div>

}

 

<style>

    .chart {

        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

        color: red;

        font-weight: 500;

        font-size: large;

        display: flex;

        justify-content: center;

        align-items: center;

        height: 100vh;

    }

 

    .stockchartdiv {

        visibility: hidden;

    }

</style>

 

string loadDiv = "stockchartdiv";

 

void ChartLoaded(LoadedEventArgs args)

{

        loadDiv = "";

        StateHasChanged();

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TemplateForNoData-1617628520.zip

Screenshot:

Regards,

Gopalakrishnan Veeraraghavan

[Eduardo]

It works when the DataSource is used, but what if the Chart is loaded by an URL (which is my case)?

[Gopalakrishnan Veeraraghavan]

Hi Eduardo,

We have analyzed your query. For the Chart sample, we suggest applying an if condition to check if data is found from the Web API. If data is found, set 'isDataFound' to true to render the chart using the 'OnSeriesRender' chart event. Otherwise, set 'isDataFound' to false and render a 'No Data Found' message using the 'OnSeriesRender' chart event.

In the case of the accumulation chart, we recommend applying an if condition to check if data is found from the Web API. If data is found, set 'isDataFound' to true and render the accumulation chart using the 'OnPointRender' accumulation chart event. If no data is found, set 'isDataFound' to false and render a 'No Data Found' message using the 'OnAfterRender' method.

We have attached a sample for your reference. Please check with the below code snippet.

In Chart:

<ChartEvents Loaded="ChartLoaded" OnSeriesRender="SeriesRenderEvent"></ChartEvents>

 

    public void SeriesRenderEvent(SeriesRenderEventArgs args)

    {

        List<object> DataSource = args.Data.ToList();

        if (DataSource.Count() > 0)

        {

            IsDataFound = true;

        }

        else

        {

            IsDataFound = false;

            StateHasChanged();

        }

    }

In AccumulationChart:

<AccumulationChartEvents Loaded="@LoadHandler" OnPointRender="PointRenderEvent"></AccumulationChartEvents>

 

protected override void OnAfterRender(bool firstRender)

{

        if (!IsDataFound) {

            IsDataFound = false;

            StateHasChanged();

        }

}

 

public void PointRenderEvent(AccumulationPointRenderEventArgs args)

{

        IsDataFound = true;

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/NoDataFound-834615786.zip

UG for OnPointRender event: https://blazor.syncfusion.com/documentation/accumulation-chart/events#onpointrender

Kindly revert us if you have any concerns.

Regards,

Gopalakrishnan Veeraraghavan