I have a doughnut chart on my page that I am filling with a data service. Once my data comes back, I have 9 items. With my current test data, 3 of them are small enough that the doughnut chart combines them into "Other". However, the number is displayed as "undefined". Here is the code for filling the chart:
var data = $.parseJSON(result); $("#doughnutChart").igDoughnutChart({ width: "100%", height: "90%", series: [{ name: "Count", labelMemberPath: "Status", valueMemberPath: "Count", dataSource: data, labelsPosition: "bestFit", formatLabel: function (context) { return context.itemLabel + " (" + context.item.Count + ")"; } }] });
Here is the test data I have:
[ { Status:"Contributors", Count:100 }, { Status:"Pending", Count:282 }, { Status:"Expired", Count:3911 }, { Status:"Canceled", Count:674 }, { Status:"Active", Count:3711 }, { Status:"Prospects", Count:2033 }, { Status:"Error", Count:44 }, { Status:"Suspended", Count:2758 }, { Status:"Complimentary", Count:2 }]
Here is what it ends up looking like. Why is Others undefined?
Hello Dave,
Thank you for contacting Infragistics!
When you the callback for formatLabel is called and the item is others, i.e. context.item is array of the other items. In order to get the count of the items you can enumerate them and store it to a variable, which you can return.
Thank you Denis! Just what I was looking for.
For those that may come across this, here is the modified formatLabel callback code:
formatLabel: function (context) { if ($.isArray(context.item)) { var cnt = 0; var arrayLength = context.item.length; for (var i = 0; i < arrayLength; i++) { cnt += context.item[i].Count; } return context.itemLabel + " (" + cnt + ")"; } else { return context.itemLabel + " (" + context.item.Count + ")"; }}