Keno ui pie chart angular is not refreshing datasource at runtime

[Manas]

 

Angular Code to update datasource:

$scope.bindGroupCost = function (groupCostData) {            
            $scope.bindGroupCostData = new kendo.data.DataSource({ data: groupCostData });
            $scope.bindGroupCostData.read();                 
        }

 

HTML Code:

 <div class="k-content">
                                            <div>
                                                <div kendo-chart
                                                     k-title="{ text: 'Group Total Cost', position: 'bottom' }"
                                                     k-series-defaults="{ type: 'pie' }"
                                                     k-series="[{ field: 'groupCost', categoryField: 'groupName', padding: 0 }]"
                                                     k-tooltip="{ visible: true, format: 'Group Cost: {0} £' }"
                                                     k-data-source="bindGroupCostData"
                                                     k-series-hover="onSeriesHover"
                                                     style="width:100%; height:350px; border:1px;"></div>
                                            </div>
                                        </div>

Calling angular function from javascript:

angular.element(document.getElementById('tblContainer')).scope().bindGroupCost(JSON.parse(slices));

 

My problem is that when I am updating the 'slices' values at runtime, kendo pie chart is not updating the datasource and pie chart is not updating.

Please let me know how to refresh the keno chart when datasource is updating at runtime.

Look forward to hear from you.

Let me know if you need any more details..

[Manas]

Please, let me know how to fix this issue?

Or

Provide me some links for reference.

 

We are currently evaluating the Kendo UI for our application. If support is not that much responsive then we have think about replacing kendo with other options available in the market.

Waiting for a quick positive response guys..

[Dimiter Topalov]

Hello Manas,

Thank you for considering Kendo UI.

You can edit the data items by first getting them via the dataSource.data() method, and then setting the desired values via the set() method of the model. The Kendo UI Chart will be rerendered automatically to reflect the changes.

You can also add new items to the chart's dataSource dynamically via the add() method  Again, the changes will be reflected automatically.

I have prepared a simple example, demonstrating the suggested approach:

http://dojo.telerik.com/eWOMe/2

Please inspect the dojo, and apply the necessary adjustments to your implementation.

You can find more information about the Kendo UI Chart and DataSource in the following documentation articles, API references, and online demos:

Chart:

http://docs.telerik.com/kendo-ui/controls/charts/overview

http://docs.telerik.com/kendo-ui/controls/charts/chart-types/pie-charts

http://demos.telerik.com/kendo-ui/pie-charts/index

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart

DataSource:

http://docs.telerik.com/kendo-ui/framework/datasource/overview#datasource-overview

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource

As for our support service response time, it is 72 hours for trials, 48 hours for forum posts, and 24 hours for license holders:

http://www.telerik.com/purchase/support-plans/devtools

I hope this helps.

Regards,
Dimiter Topalov
Telerik

[Manas]

Hi Dimiter,

Thanks for your response. However, I have fixed the problem by myself.

There was one strange thing when I was calling a http service method then keno ui chart was updating data source otherwise, chart datasource property was updated but not reflecting in front end. Strange!

Regards,

Manas