Pi Chart Issue: Unable to show default Pie Chart

[Asad]

Hello Everyone,

Currently i'm working on  dynamically data binding in kendo pie chart in .net core 3.0.

We have get data from database and values greater than 0 so it's working fine.

but KPI value recieve 0 so pie chart is not draw properly. Please review attached file "PieChartEmpty.PNG"

 

We need to draw Default chart if value received from Database is 0. Please review attached file "ExpectedResult.PNG"

Please provide solution ASAP

 

 

 

 

[Preslav]

Hi Asad,

To handle the scenario when the server returns zeros for all records, you could use the dataBound event handler of the Chart. In the event handler, check if all records have zero values, and based on this, change the data on the client.

For example, if the series.field is called "percentage", the code of the dataBound function could look like:

function onDataBound(e) {
    var allDataIsZero = true;
    e.sender.dataSource.view().forEach(function(e, i) {
        if (e.percentage !== 0) {
            allDataIsZero = false;
        }
    });

    if (allDataIsZero) {
        e.sender.dataSource.data([{
                percentage: "50"
            },
            {
                percentage: "50"
            }
        ])
    }
};

I hope this helps.

 

Regards,
Preslav
Progress Telerik

[Asad]

Hi Preslav,

Not working databound event in pie chart. Please review attach file

 

[Preslav]

Hello Asad,

The code in the provided picture looks okay. Could you please elaborate on what is not working? It will help me a lot if you can provide a runnable example that replicates the problem. Examining this project locally will help me better understand what is causing the issue, and I will be able to provide assistance to the best of my knowledge.

I look forward to your reply.

 

Regards,
Preslav
Progress Telerik

[Asad]

Hi Preslav,

I will assign single 0 value in pie chart so chart not draw properly but i think it should be draw circle but not loaded properly.

You will provide one solution for use databound event. So i will check this event and implemented in our project but databound event is not triggered in pie chart.

Thanks 

Asad Shaikh

 

 

[Preslav]

Hello Asad,

Based on the information gathered here, I believe that the Chart is using a DataSource to request the remote data. Please correct me if I am wrong.

I tested the scenario with this demo - https://demos.telerik.com/aspnet-core/pie-charts/remote-data-binding

The only modifications I made are:

<div class="demo-section k-content wide">
    <h3>1024x768 screen resolution trends</h3>

    @foreach (var year in (IEnumerable<string>)ViewData["years"])
    {
        @(Html.Kendo().Chart<Kendo.Mvc.Examples.Models.ScreenResolutionRemoteDataViewModel>()
            .Name("chart" + year)
            .Title(year)
            .HtmlAttributes(new { @class = "small-chart" })
            .Legend(legend => legend
                .Visible(false)
            )
            .DataSource(ds =>
            {
                ds.Read(read => read.Action("_SpainElectricityProduction", "Pie_Charts"));
                ds.Filter(filter => filter.Add(model => model.Year).IsEqualTo(year));
                ds.Sort(sort => sort.Add(model => model.Year).Ascending());
            }
            )
            .Events(e => e.DataBound("onDataBound"))
            .Series(series => series
                    .Pie(model => model.Share, model => model.Resolution)
                    .ColorField("Color")
                    .Padding(0)
            )
            .Tooltip(tooltip => tooltip
                .Visible(true)
                .Format("{0:N0}")
                .Template("#= category # - #= kendo.format('{0:P}', percentage)#")
            )
        )
    }
</div>
<style>
    .k-chart.small-chart {
        display: inline-block;
        width: 120px;
        height: 120px;
    }
</style>
<script>
    function onDataBound(e) {
        console.log("test");
    }
</script>

On my side, the event fired as expected.

Having said that, could you please elaborate on the exact implementation of your project?

 

Regards,
Preslav
Progress Telerik

[Asad]

I'm using local binding with calling in partial view. Please review attached file.

Also i have share code.

@model LoadChartModel
@{
    var unit = "";
    if(Model.PieDonutList.Count > 0)
    {
        var perunit = Model.PieDonutList.FirstOrDefault();
        if (perunit != null) {
            unit = perunit.XUnit;
        }
    }
}

@(Html.Kendo().Chart()
    .Name("chart" + Model.WidgetId)
            .Title(title => title
                 .Text(Model.Name)
                .Position(ChartTitlePosition.Top))
    .Legend(legend => legend
        .Visible(false)
         .Position(ChartLegendPosition.Bottom)
    )
     .SeriesDefaults(seriesDefaults =>
                    seriesDefaults.Line().Style(ChartSeriesStyle.Step)
                )
    .HtmlAttributes(new { style="height:100%;"})
    .Series(series =>
    {
        var items = Model.PieDonutList;
        var total = new List<dynamic>();
        foreach (var it in items)
        {
            total.Add(new { category = it.DimensionName, value =  it.KPIValue});
        }

        series.Pie(total)
           .Labels(labels => labels
           .Position(ChartBarLabelsPosition.OutsideEnd)
          .Align(ChartFunnelLabelsAlign.Center)
            .Template("#= category #: \n #= kendo.format('{0:P}', percentage)#")
            .Background("transparent")
            .Visible(true)
        )

        //);
       .StartAngle(250);
    })
    .SeriesColors(
          "#8bc34a", "#e91e63", "#03a9f4","#f56f2d", "#474747","#29c7da","#f44336", "#4a4a4a","#3fe4b7","#e4e4e5"
                )
    .Tooltip(tooltip => tooltip
            .Visible(true)
            .Template(unit =="$"?"#= category # : #= kendo.toString(value, 'c4') #":"#= category # : #= kendo.format('{0:N4}',value) #"+unit)

            //.Template("#= category #: \n #= value #")

        )

 .Events(events => events
    .DataBound("dataBoundOn")
        )

)

 

[Preslav]

Hello Asad,

Thank you for sharing the full code of the Chart.

Indeed, when a local binding is used, the dataBound event is not fired. In this case, we will not need this event as we already know the data when creating the chart.

Having said that, my suggestion is to check the model data, and based on it, implement custom logic. This logic could change the data to some dummy values or not display the chart at all.

 

Regards,
Preslav
Progress Telerik