Donut chart not populating with local data

[Lester]

Passing local data to the chart.  I pass the following class to the model of the partial view:

public class DonutChartDetails
  {
      public string Name { get; set; }
      public string Title { get; set; }
      public IEnumerable<DashValue> Items { get; set; }
      public Boolean ShowLabel { get; set; }
  }

 

public class DashValue
{
        [Key]
        [Required]
        [DisplayName("DashItem")]
        public string category { get; set; }

        [Required]
        [DisplayName("DashValue")]
        public decimal value { get; set; }

        //[DisplayName("DashDetail")]
        //public string dashDetail { get; set; }
    }

 

 

Here's the code for the chart:

@model DonutChartDetails

<div style="background-color:transparent;">
    @(Html.Kendo().Chart(Model.Items)
    .Name(Model.Name)
    .Title(Model.Title)
    .Legend(legend => legend.Position(ChartLegendPosition.Top)
    )
    .Series(series =>
    {
        series.Donut(model => model.value, model => model.category);
    })
    )
</div>

 

 

Any ideas as to why no data is showing... The Title is showing.

 

-Lester

[Tsvetina]

Hello Lester,

Your model and Chart declaration look ok. Actually, I tried them in the attached sample project and they work as expected. Could you check for any JavaScript or network errors in the browser developer tools (F12 key)? Some error in the page might be preventing the Chart from loading.

Regards,
Tsvetina
Progress Telerik

[Lester]

I checked the console and found this strange error:

2jquery-3.3.1.slim.min.js:2 jQuery.Deferred exception: t.fadeOut is not a function TypeError: t.fadeOut is not a function
    at init._hideElement (http://localhost:65479/lib/kendo-ui/js/kendo.all.min.js:109:24105)
    at init.hide (http://localhost:65479/lib/kendo-ui/js/kendo.all.min.js:109:23343)
    at init._hideTooltip (http://localhost:65479/lib/kendo-ui/js/kendo.all.min.js:109:16645)
    at r.callObserver (http://localhost:65479/lib/kendo-ui/js/kendo.all.min.js:100:24510)
    at r.trigger (http://localhost:65479/lib/kendo-ui/js/kendo.all.min.js:100:24338)
    at init.trigger (http://localhost:65479/lib/kendo-ui/js/kendo.all.min.js:108:29712)
    at init.notify (http://localhost:65479/lib/kendo-ui/js/kendo.all.min.js:100:23692)
    at r.hide (http://localhost:65479/lib/kendo-ui/js/kendo.all.min.js:106:3348)
    at r.hide (http://localhost:65479/lib/kendo-ui/js/kendo.all.min.js:107:22813)
    at init._unsetActivePoint (http://localhost:65479/lib/kendo-ui/js/kendo.all.min.js:109:5641) undefined

 

 

-Lester

[Tsvetina]

Hi Lester,

This is very weird, as the code is working on my side. There might be some problem coming from the Kendo UI references. Could you show me the full list of JS references in your project? Also, do you observe the same issue if you declare a Chart with hard-coded values, for example:

@(Html.Kendo().Chart()
    .Name("chart")
    .Title(title => title
        .Text("Share of Internet Population Growth")
        .Position(ChartTitlePosition.Bottom)
    )
    .Legend(legend => legend
        .Visible(false)
    )
    .Series(series =>
    {
        series.Donut(new dynamic[] {
            new {category = "Asia",value = 53.8,color = "#9de219"},
            new {category = "Europe",value = 16.1,color = "#90cc38"},
            new {category = "Latin America",value = 11.3,color = "#068c35"},
            new {category = "Africa",value = 9.6,color = "#006634"},
            new {category = "Middle East",value = 5.2,color = "#004d38"},
            new {category = "North America",value = 3.6,color = "#033939"}
        });
    })
)

Regards,
Tsvetina
Progress Telerik