[Solved] How to update data on donut chart?

[Melicaster]

I been reading some donut chart info the support documentation. I do have a donut chart that need to be updated when new data comes in. These data is stored locally. Is there anyway to update those data and reflect on the donut chart?

I had made some example of the source code as below:

var donutSeriesChartCtrl = new Telerik.UI.RadChart(document.getElementById("donutSeriesChart"));
var donutSeries = new Telerik.UI.Chart.DonutSeries();
donutSeries.data = [16.7, 20, 15.7, 26.6, 23.5];
donutSeriesChartCtrl.series.push(donutSeries);
donutSeriesChartCtrl.refresh();

I have new data like "[50,0,40,6,4]". How to I update the donutSeries.data and reflect it to the donut chart?

[Tsvetina]

Hi Melicaster,

With this chart declaration, you can change the series data with the following code:

donutSeriesChartCtrl.series[0].data = [50, 0, 40, 6, 4];
donutSeriesChartCtrl.refresh();

Additionally, you can take a look at the following article to see what are the other possible options for binding a RadChart control:
Data Binding

Regards,
Tsvetina
Telerik

 

 

[Melicaster]

Thank you...! It is working...

When the app is doing donutSeriesChartCtrl.refresh();, is it possible to disable the animation?

[Tsvetina]

Hi Melicaster,

You can turn of animations for your chart by setting its transitions property to false:

var donutSeriesChartCtrl = new Telerik.UI.RadChart(document.getElementById("donutSeriesChart"), {
    dataSource: {
        data: [
            { val: 16.7 },
            { val: 20 },
            { val: 15.7 },
            { val: 26.6 },
            { val: 23.5 }
        ]
    },
    series: [
        {
            type: "donut",
            field: "val"
        }
    ],
    transitions: false
});

Regards,
Tsvetina
Telerik