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.
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
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
