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
Apologies for the delayed reply - we were short on staff due to the Christmas holidays.
There should not be a difference when chart is bound to local / remote data and I was not able to reproduce the issue on my side (dojo). Could you please provide an isolated runnable example which we could test locally - this way I would be able to check what exactly is going wrong and provide concrete recommendations?
Regards,
Iliana Nikolova
Telerik
Rank 1
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
Thank you for the provided files. The issue is caused by the MessageCount field contains strings, while the chart expects numbers (updated dojo with string fields). Please fix the MessageCount values and let me know if this will help.
Regards,
Iliana Nikolova
Telerik
Rank 1