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

Getting data to group in Pie Charts

1 Answer 79 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Carter
Top achievements
Rank 1
Carter asked on 20 Dec 2019, 10:18 PM

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?

1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 24 Dec 2019, 10:56 AM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Tags
Chart
Asked by
Carter
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Share this question
or