We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Use doughnut char with Angular

Thread ID:

Created:

Updated:

Platform:

Replies:

127866 Dec 14,2016 09:33 AM Dec 15,2016 06:40 AM JavaScript 1
loading
Tags: ejChart
roberto
Asked On December 14, 2016 09:33 AM

Hi.

Can you guide me  how to use a chart of type doughnut using angular?. Also when a new set of points is loaded I need to use .redraw() to refresh the graph?

Regards

Anandaraj T [Syncfusion]
Replied On December 15, 2016 06:40 AM

Hi Roberto, 


 

Thanks for using Syncfusion products. 


 

Query #1: Can you guide me how to use a chart of type doughnut using angular? 

We have created a simple doughnut chart sample using angular directive with option to dynamically update the data source. The sample is available in the following link 

http://jsplayground.syncfusion.com/xotdeoql 


 

Please refer the following code snippet to achieve this 

[HTML] 

 

<div id="container" ej-chart style="width: 60%; float: left;" 

e-legend-visible="false" 

e-commonseriesoptions-marker-datalabel-visible="true" 

e-commonseriesoptions-marker-datalabel-font="nTextFont" 

e-title-text="nTitle"> 

<e-series> 

<e-series name="Doughnut Demo" type="doughnut" e-datasource="nChartData" 

e-xname="x" e-yname="y"> 

</e-series> 

</e-series> 

</div> 


 

Query #2: Also when a new set of points is loaded I need to use .redraw() to refresh the graph? 


 

Essential JavaScript Chart supports two way binding with angular JS. If points are updated through scope variables, then chart will be updated automatically. We can use redraw method when points are not updated through scope variable. 


 

Please refer the following code snippet to update using redraw method 

[JS] 

 

function UpdateChart() { 

//Get Chart instance 

var chart = $('#container').ejChart('instance'); 


 

//Change the data source 

chart.model.series[0].dataSource = chart.model.series[0].dataSource.length == 5 ? data10 : data5; 


 

//Redraw the chart 

$('#container').ejChart('redraw'); 

} 


 

Note: In above example, two way binding is used to update chart through combo box 


 

Please let us know if you have any concern. 


 

Regards, 

Anand 

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;