How to create kendo pie chart with model in MVC - asp.net-mvc-4

Question

I am trying to create a Pie chart through model and controller in MVC using Kendo UI which will show the total for two types of food but I am not able to get the results due to the attached error.
Types to show in pie chart:
1)Beverages and
2)Meals
I am referring to this kind of Chart.
Kendo UI Pie chart
This link has shown multiple graphs using foreach but I am just concerned with only single chart that will differentiate the total earnings from Meals and Beverages.
My controller is:
public ActionResult _SpainElectricityProduction()
{
List<PieGraphModel> objList = new List<PieGraphModel>();
for (int i = 0; i < 2; i++)
{
if (i == 0)
{
objList.Add(new PieGraphModel { coke = 10, pepsi = 20, Type = "Beverages", total = 30 });
}
else
{
objList.Add(new PieGraphModel { chiniese = 50, italian = 40, Type = "Meals", total = 90 });
}
}
return Json(objList);
}
#(Html.Kendo().Chart<MvcRepo_Kendo.Models.PieGraphModel>()
.Name("chart")
.HtmlAttributes(new { #class = "small-chart" })
.Legend(legend => legend
.Visible(false)
)
.DataSource(ds =>
{
ds.Read(read => read.Action("_SpainElectricityProduction", "Home"));
}
)
.Series(series => series
.Pie(model => model.total)
.Padding(0)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0:N0}")
.Template("#= category # - #= kendo.format('{0:P}', percentage)#")
)
)

Answer 1

The Kendo method for generating a pie chart expects and array of objects, with each object representing one segment in the pie chart. Each object must contain a property for the value (the percentage that each segment will occupy in the whole) and the name of the segment. In addition, it can contain a property for the color (to override the default color) and a bool to indicate if the segment is 'exploded'.
Your PieGraphModel should look like (you can name the properties whatever you want)
public class PieGraphModel
{
public string Name { get; set; }
public float Value { get; set; }
public string Color { get; set; } // optional
public bool Explode { get; set; } // optional
}
and to create a pie chart with 2 segments, "Meals" and "Beverages", being 1/3 and 2/3 respectively, your controller method would be
List<PieGraphModel> model = new List<PieGraphModel>()
{
new PieGraphModel(){ Name = "Meals", Value = 33.33F },
new PieGraphModel(){ Name = "Beverages", Value = 66.67F }
};
return Json(model);
and in the view
.Series(series => series
.Pie(m => m.Value, m => m.Name)
.Padding(0)
)
Note that the expressions must match the names of the properties. If you also wanted to specify Color and Explode, the it would be
.Series(series => series
.Pie(m => m.Value, m => m.Name, m => m.Color, m => m.Explode)
.Padding(0)
)
which would output this pie chart if the data was
List<PieGraphModel> model = new List<PieGraphModel>()
{
new PieGraphModel(){ Name = "Hydro", Value = 22.0F, Color = "#03a9f4", Explode = true },
new PieGraphModel(){ Name = "Solar", Value = 2.0F, Color = "#ff9800"},
new PieGraphModel(){ Name = "Nuclear", Value = 49.0F, Color = "#fad84a"},
new PieGraphModel(){ Name = "Wind", Value = 27.0F, Color = "#4caf50"}
};