This is a migrated thread and some comments may be shown as answers.

Pi Chart Issue: Unable to show default Pie Chart

7 Answers 56 Views
This is a migrated thread and some comments may be shown as answers.
Asad
Top achievements
Rank 1
Veteran
Asad asked on 27 Feb 2020, 11:48 AM

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

 

 

 

 

7 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 03 Mar 2020, 09:25 AM

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

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
0
Asad
Top achievements
Rank 1
Veteran
answered on 04 Mar 2020, 10:05 AM

Hi Preslav,

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

 

0
Preslav
Telerik team
answered on 09 Mar 2020, 08:37 AM

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

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
0
Asad
Top achievements
Rank 1
Veteran
answered on 09 Mar 2020, 09:12 AM

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

 

 

0
Preslav
Telerik team
answered on 09 Mar 2020, 03:07 PM

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

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
0
Asad
Top achievements
Rank 1
Veteran
answered on 10 Mar 2020, 06:33 AM

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")
        )

)

 

0
Preslav
Telerik team
answered on 12 Mar 2020, 11:11 AM

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

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
Asked by
Asad
Top achievements
Rank 1
Veteran
Answers by
Preslav
Telerik team
Asad
Top achievements
Rank 1
Veteran
Share this question
or