How to create kendo pie chart with model in MVC

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

The data you creating in the controller is not making sense for a pie chart so its not clear what you actually want to display. To understand how it works, replace the code in the controller with `var data = new[]{ new { type = "Beverages", percent = 25 }, new { type = "Meals", percent = 75 } }; return Json(data);` and then in the view - `.Series(series => series.Pie(m => m.percent , m => m.type).Padding(0) )`. It will generate a pie chart with 2 segments with Beverages being 1/4 and Meals being 3/4. — , Jun 04 '16 at 07:46
Stephen, thank you for your precious time. I have tried the way given by you and it worked amazingly but just need your opinion on this. I saw the percent in your code template which in 75 but in my case , I just have a amount that is earned by selling meals or beverages. It could be anything. For eg: i have earned $5000 from meals and $10000 from beverages. so, In order to show correct information, Do I have to convert this total amount into some sort of percentages or it will be handled by the tool itself? — Sweetie, Jun 04 '16 at 12:08
I have no idea (I have never used Kendo), but I assume that if you were to provide values 10000 and 5000 (i.e. adds up to 15000) the method would be smart enough to convert then to percentages (i.e. 66.67 and 33.33) - at least that the way I would have written it. All you can do is try it an see what happens :) — , Jun 04 '16 at 12:15

score 7 · Accepted Answer · answered Jun 06 '16 at 00:52

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"}
};

How to create kendo pie chart with model in MVC

1 Answers1