Aggregate Pie Chart Data

[Brian]

Hi,

I have a model holding a string property:

public class TicketDto
{
    public string Status { get; set; }
}

Is there a way for a view with a model of IEnumerable<TicketDto> to display a pie chart with the category being Status and the value being the percentage that particular status appears in the collection?

For example, if my IEnumerable<TicketDto> contains the following properties:

Active
Closed
Closed
Closed

... then the pie chart would show two categories: 25% active, and 75% closed.

Thanks!
Brian

[Tsvetina]

Hello Brian,

The Chart cannot bind directly to such data structure. The aggregates need to be available in a flat format in order for the Chart to bind to them. If you need to use model binding, the data should be available in flat format in advance. 
If you could use a DataSource to bind to data coming from a controller method, you could apply the grouping on the client using two DataSources and a jQuery declaration of the Chart . The jQuery declaration is needed because the re-formatted data does not match any model on the server:

<div id="chart"/>
<script>
    var chartSource = new kendo.data.DataSource();

    var chart = $("#chart").kendoChart({
        dataSource: chartSource,
        series: [
            { type: "pie", field: "Count", categoryField: "Status"}
        ],
        tooltip: {
            visible: true
        }
    });
    // DataSource, which reads the ungrouped data
    var groupsSource = new kendo.data.DataSource({
        transport: {

            read: {
                url: "/Grid/Tickets_Read",
                type: "POST"
            }
        },
        group: { field: "Status" }
    });
    groupsSource.read().then(function () {
        var chartData = [];
        var groupedData = groupsSource.view().toJSON();
        for (var i = 0; i < groupedData.length; i++) {
            chartData.push({Status: groupedData[i].value, Count: groupedData[i].items.length});
        }
        chartSource.data(chartData);
    });
</script>

This is the controller method that I am using to return the data from the server in the original, ungrouped format:

public ActionResult Tickets_Read()
{
    var result = Enumerable.Range(0, 30).Select(i => new Ticket
    {
        Status = i % 3 == 0? "Active" : "Closed"
    });

    return Json(result);
}

Regards,
Tsvetina
Progress Telerik

[Brian]

Awesome, sounds good.  Thanks so much for your help!