Pi Chart Issue: Unable to show default Pie Chart

8 posts, 0 answers
  1. Asad
    Asad avatar
    15 posts
    Member since:
    Nov 2019

    Posted 27 Feb 2020 Link to this post

    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

     

     

     

     

  2. Preslav
    Admin
    Preslav avatar
    589 posts

    Posted 03 Mar 2020 Link to this post

    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.
  3. Asad
    Asad avatar
    15 posts
    Member since:
    Nov 2019

    Posted 04 Mar 2020 Link to this post

    Hi Preslav,

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

     

  4. Preslav
    Admin
    Preslav avatar
    589 posts

    Posted 09 Mar 2020 Link to this post

    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.
  5. Asad
    Asad avatar
    15 posts
    Member since:
    Nov 2019

    Posted 09 Mar 2020 Link to this post

    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

     

     

  6. Preslav
    Admin
    Preslav avatar
    589 posts

    Posted 09 Mar 2020 Link to this post

    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.
  7. Asad
    Asad avatar
    15 posts
    Member since:
    Nov 2019

    Posted 10 Mar 2020 Link to this post

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

    )

     

  8. Preslav
    Admin
    Preslav avatar
    589 posts

    Posted 12 Mar 2020 Link to this post

    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.
Back to Top