I have did my research on chart with angular. However, I can't find a good example for using angular with donut chart. The example that is demon online isn't good enough. First, The demon donut chart code is creating different series. I want to be able to just create one series with different categories. And secondly, I want to load the data dynamically. I got it work with static data. Now, I have to know how to load dynamic data to donut chart. I didn't get it work by using k-data-resource.
HTML:
<div kendo-chart k-options="backupchart" k-tooltip="backuptooltip" k-legend="backuplegend" ></div>
AngularJS:
$scope.backupData = [{
category: "file system",
value: 28,
color: "#009DD6"
},{
category: "sql server",
value: 12,
color: "#F2B33D"
},{
category: "db2",
value: 8,
color: "#90CC38"
},{
category: "oracle",
value: 7,
color: "#FF5444"
},{
category: "hyperV",
value: 8,
color: "#D9D9D9"
}, {
category: "Office365",
value: 2,
color: "#D96CC7"
}];
$scope.backupchart = {
series: [{
data: $scope.backupData,
overlay: {
gradient: "none"
}
}],
seriesDefaults: {
type: 'donut',
style: 'smooth'
}
};
Suppose $scope.backupData is coming from a remote server. How can I redraw into donut chart? I can get the data no problem.
Thank you in advanced.
4 Answers, 1 is accepted
Hello
my understanding is correct, you would like to bind the chart to remote dataSource? If so, you could follow the approach from this example. Please have a look and let me know if it fits in the current requirements or I am missing something.
Regards,Plamen Lazarov
Telerik
Rank 1
Hi Plamen,
I finally got it work yesterday, but thank you for your help. It's very helpful.
I have another issue now. I want to display certain legends with a click event. I have attached a screen shot of what I built so far. Basically, it's a two donut charts. And when I click inner donut, it shows part of the outer donut with matched group ID. As you can see, I built my own legend in the picture. I want to know if it is a way to use kendo ui built-in chart legend to accomplish it. That means it shows certain legends, not all of them. And the legends will change after I click the other part of the donut.
Rank 1
Hi
am not aware of your exact setup, however in order to show / hide particular items in the legend you could change the series.visibleInLegend values.
Regarding your last question, you should define two different objects in the series array. See this example for a reference.
Keep in mind that it is accepted to post different questions in separate threads - this will make tracking / handling your support history much easier. If you have any further questions which are not related to the initial one in this thread, please open a new thread for each of them. Thank you in advance for your understanding and cooperation.
Plamen Lazarov
Telerik