Getting data to group in Pie Charts

[Carter]

I have a set of data where for any given date, there is a number for each of five geographic regions. When I try to put this data in a pie chart, I get 5n different series in my pie chart, where n is the number of days of data. I just want the chart to add all the data for each region, no matter how many days, so that I just have five different series.

I've been scouring the documentation and forums for hours, but the only lead is Pie Chart Data Aggregates, which is only for the jQuery version of Kendo. I'm trying to get this to work for MVC, but the documentation for MVC Aggregates is completely unhelpful. How can I get the functionality I'm looking for?

[Nikolay]

Hi Carter, 

I prepared an MVC example showing how to make the same implementation with the MVC Chart and DataSource. The idea is:

1. Read the data into a standalone DataSource.
2. Declare the Chart with a dynamic model explicitly listing the Field and CategoryField settings for the series.
3. On Change event of the DataSource, transform the data in the needed format and apply it to the Chart.

Below is the Razor snippet:

<script>
    $(document).ready(function () {
        dataSource1.read();
    });
 
    function change(e) {
        var data = getChartData(this);
        $("#chart1").data("kendoChart").dataSource.data(data);
        $("#chart1").data("kendoChart").refresh();
    }
 
    function getChartData() {
        var chartData = [];
        var view = dataSource1.view();
        for (var idx = 0; idx < view.length; idx++) {
            chartData.push({
                Source: view[idx].value,
                Percentage: view[idx].aggregates.Percentage.sum
            });
        }
        return chartData;
    }
</script>
 
@(Html.Kendo().DataSource<ChartAggregates.Models.EnergySourceViewModel>()
        .Name("dataSource1")
        .Ajax(dataSource => dataSource
           .PageSize(10)
           .Events(ev => ev.Change("change"))
           .Read(read => read.Action("GetSourcesData", "Home"))
           .Group(g=>g.Add(m=>m.Source))
           .Aggregates(agg=> {
               agg.Add(m => m.Percentage).Sum();
           })
        )
)
 
@(Html.Kendo().Chart<dynamic>()
        .Name("chart1")
        .Series(series=> {
            series.Pie(null).Field("Percentage").CategoryField("Source");
        })
        .Tooltip(t=>t.Template("#: category # - #:value# (#:percentage#%)").Visible(true))
)

For your convenience, I am attaching a small demo MVC project demonstrating the above.

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik