Telerik Kendo Chart : How to bind the chart to a string type

Question

I've been stuggling for a moment and I'm unable to find anything related to that. I'm a total newbie with Kendo, and sadly I was not able to find anything that could help my question, documentation, forums and all of that : they haven't helped at all.

Situation : I have a viewmodel in my ASP .NET app. I'm trying to make a chart out of one of the proripeties called "Type". This propriety represent a type of data - let's say fruits, like "Banana", "Apple" etc. This type contains only and only one type at the time. It cannot contain something like "Apple and bananas". It's always a string, too. This proriety is part of a larger model. But I'm only interested in this one.

Now, what I like to do : I'd like to make a chart, using Kendo, from that propriety. That means, I have to bind my chart to my model, and then, it will be able to know how many time some of those Types were used. Like, example, If I have three objects : Name : "Mjuzl" Type : "Potato"

Name : "Uijqf" Type : "Apple"

Name : "Zjli" Type : Potato"

I'd like my char to count that my model used the type Potato twice, and the type Apple once. I know how to get my datasource that contain all of the objects that use my model. (I have already used Kendo Grid just before but it's so simplier tbh) My issue right now, is that I have no idea - and I wasnt' able to find any - how to actually display what I want in my chart. I say it again, they are strings. I know how to get my datasource. I don't know how to actually show what I want to show. (Should I use columns ? sections ? I don't know)

Do I need to build a JSON from my controller that will ask the database to count ? Does Kendo is able to do it by it's own ? I'm so lost, I have no idea what Kendo is actually waiting for to make my chart working. The documentation isn't helping at all. I've been researching for a while, I haven't found anything that describes the exact same problem. And I've been searching for days. Very badly drawn image I've done to put a picture on my problem :

I don't ask to do it for me, I ask for a path. A way to do it. Thanks.

Answer 1

One way would be to create a view model specifically for your chart, and you can populate that view model based on your data.

Roughly (untested code - just to give you an idea), something like this:

public class MyChartViewModel
{
    public int TypeCount { get; set; }
    public string TypeName { get; set; }
}

and then in your read method for the chart where you are populating MyChartViewModel:

    var myExistingDataModel = howeverYouGetYourDataHere;
    var model = new MyChartViewModel();

    var distinctTypes = myExistingDataModel.Select(x => x.Type).Distinct().ToList();

    foreach (var distinctType in distinctTypes)
    {
        model.TypeCount = myExistingDataModel.Count(x => x.Type == distinctType);
        model.TypeName = distinctType;
    }

Answer 2

Finally ! I managed to do it ! For any future reference :

Based on G_P's answer, I used a LINQ request to count all of my types : Linq distinct - Count (don't forget to remove the .District() otherwise I won't work !)

Then, I did some debuging to see if I actually return my data, because nothing was showing in the chart. It did return my data and the right number.

The issue for this case was, I use

return Json(types.ToDataSourceResult(request, ModelState));

To return my data to my chart. But ! there is a little thing to know about Chart, they don't work like grids. You have to use a specific setup for showing your data if you use ToDataSourceResult : https://docs.telerik.com/aspnet-mvc/html-helpers/charts/data-binding (See "3) (Optional) Configure a Custom DataSource."), just change the call to your controller, and voilà ! It worked !