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. Image for the cookie policy date
close icon

Use doughnut char with Angular

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

1 Reply

AT Anandaraj T Syncfusion Team December 15, 2016 11:40 AM UTC

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 

SIGN IN To post a reply.
Loader.
Live Chat Icon For mobile
Up arrow icon