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

Cannot aggregate remote data

4 Answers 144 Views

Charts

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

Mike asked on 29 Dec 2015, 12:04 AM

I cannot aggregated remote data into a pie chart. It works just fine for local data if I use the following html.

<div id="ReportPOC">
    <div class="demo-section k-content wide">
        <div id="chart"></div>
    </div>

    <script type="text/javascript">
            function createChart() {
                var data = [
                    {
                        "Name": "Inbound GoodMail",
                        "MessageCount": 1394,
                        "Date": "2015-10-05"
                    },
                    {
                        "Name": "Outbound GoodMail",
                        "MessageCount": 724,
                        "Date": "2015-10-05"
                    },
                    {
                        "Name": "Outbound GoodMail",
                        "MessageCount": 504,
                        "Date": "2015-10-06"
                    },
                    {
                        "Name": "Inbound GoodMail",
                        "MessageCount": 256,
                        "Date": "2015-10-06"
                    }
                ];
                var dataSourcePie = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: '@Url.Action("ReportData", "Home")',
                            dataType: "json"
                        }
                    },
                    group: {
                        field: "Name",
                        aggregates: [
                            { field: "MessageCount", aggregate: "sum" }
                        ]
                    }
                });

                dataSourcePie.fetch().then(function () {
                    var pieD = [];
                    var view = dataSourcePie.view();
                    for (var idx = 0; idx < view.length; idx++) {
                        pieD.push({
                            Name: view[idx].value,
                            MessageCount: view[idx].aggregates.MessageCount.sum
                        });
                    }
                    $("#chart").kendoChart({
                        dataSource: pieD,
                        seriesDefaults: {
                            labels: {
                                visible: true,
                                background: "transparent",
                                template: "#= category #: \n #= value#"
                            }
                        },
                        series: [{
                            type: "pie",
                            field: "MessageCount",
                            aggregate: "sum",
                            categoryField: "Name"
                        }],
                    });
                });
            }

            $(document).ready(createChart);
    </script>
</div>

The pie chart show 2 sections where Inbound GoodMail is 1650 and Outbound GoodMail is 1228. If I change my dataSource to make a remote call to an Action in my Controller, the data doesn't aggregate.

                var dataSourcePie = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: '@Url.Action("ReportData", "Home")',
                            dataType: "json"
                        }
                    },
                    group: {
                        field: "Name",
                        aggregates: [
                            { field: "MessageCount", aggregate: "sum" }
                        ]
                    }
                });

The json returned is the same, but now I get a pie chart where Inbound GoodMail is 256 and Outbound GoodMail is 504. The view object returned from dataSourcePiew.view() does not have the correct aggregates. What am I doing wrong?

4 Answers, 1 is accepted

answered on 04 Jan 2016, 09:37 PM

support.zip

When I used http://output.jsbin.com/tarawafotu.js as the data source url, it worked, but I still can't get it to work when I get the data from my controller action method. When I looked at GET request in Fiddler, the data returned was identical, so maybe it has to do with the header?

I created the project the standard ASP.NET 5 template with a few additions.

- HomeController.cs has been changed to return the data from a method called ReportData().

- There is a new view called KendoSupportTicket.cshtml that displays the pie chart.

- _Layout.cshtml has been change to add a new link called Reports that displays the KendoSupportTicket view.

I tried attaching the entire zipped project, but it exceeded the 2MB limit.

Thanks,

Mike