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

Donut chart with dynamic data in angular

4 Answers 223 Views
Charts
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 05 Aug 2015, 07:03 PM

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

Sort by
0
Plamen Lazarov
Telerik team
answered on 07 Aug 2015, 01:35 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
David
Top achievements
Rank 1
answered on 07 Aug 2015, 01:49 PM

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.

0
David
Top achievements
Rank 1
answered on 07 Aug 2015, 02:38 PM
Also, how to make two donuts chart using dataSource with angular? Most of the examples I saw are creating two different objects inside series object. So, I want to know how to structure the datasource data to make it two donuts.
0
Accepted
Plamen Lazarov
Telerik team
answered on 11 Aug 2015, 02:05 PM

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.

Regards,
Plamen Lazarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
David
Top achievements
Rank 1
Answers by
Plamen Lazarov
Telerik team
David
Top achievements
Rank 1
Share this question
or