This is a migrated thread and some comments may be shown as answers.

Aggregate Pie Chart Data

2 Answers 122 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 2
Brian asked on 01 Jun 2018, 12:20 PM

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

2 Answers, 1 is accepted

Sort by
0
Accepted
Tsvetina
Telerik team
answered on 05 Jun 2018, 12:13 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Brian
Top achievements
Rank 2
answered on 08 Jun 2018, 03:31 PM
Awesome, sounds good.  Thanks so much for your help!
Tags
Chart
Asked by
Brian
Top achievements
Rank 2
Answers by
Tsvetina
Telerik team
Brian
Top achievements
Rank 2
Share this question
or