[Solved] Angular Kendo bar chart bound to remote data not working

[Rajesh]

Hi,

I have a $scope variable on my controller that is constantly changing. I need to create a kendo stacked chart that is updated to reflect the changing data. I am unable to get the chart to refresh with the changing data. I have tried the following options but nothing works

1. Using a datasource and ensuring I call dataSource.read()
2. Doing a watchCollection and k-rebind as suggested at http://stackoverflow.com/questions/21220886/kendo-angular-chart-data 

Here is what my grid looks like

div kendo-chart="scopeVariableKendoChart"
                                     k-title="{visible: 'false'}"
                                     k-chart-area="{background:'', width:850, height:100}"
                                     k-legend="[{ visible: 'false' }]"
                                     k-series-defaults="{ type: 'bar', markers: { visible: false }, stack: 'true' }"
                                     k-data-source = "deviceDetailsKDataSource"
                                     k-value-axis="{labels: { format: '{0}' }, visible: false, majorGridLines: { visible: false }, majorTicks: { visible: false, width: 0 }, axisCrossingValue:0}"
                                     k-category-axis="{line: { visible: false }, majorGridLines: { visible: false }, majorTicks: { visible: false, width: 0 }}"
                                     k-tooltip="{visible: true, format: '{0}%', template: '#= series.name #: #= value #'}"
                                     k-series-hover="onSeriesHover"
                                     k-on-series-click="onSeriesClick(kendoEvent)"
                                >

and here is the k-data-source on the controller

$scope.deviceDetailsKDataSource= new kendo.data.DataSource({
        data: [
                    {name: 'Stopped Devices', data: [$scope.value1], color: '#65c178', labels: {visible:'true', position:'left', background:''} },
                    {name: 'Running Devices', data: [$scope.value2], color: '#5da2f7', labels: {visible:'true', position:'left', background:''}},
                    {name: 'Failed Install Devices', data: [$scope.value3], color: '#9c68ab', labels: {visible:'true', position:'left', background:''}},
                    {name: 'Stop failed Devices', data: [$scope.value4], color: '#65c178', labels: {visible:'true', position:'left', background:''} },
                    {name: 'Start failed Devices', data: [$scope.value5], color: '#5da2f7', labels: {visible:'true', position:'left', background:''}},
                    {name: 'Installing Devices', data: [$scope.value6], color: '#e2e2e2', labels: {visible:'true', position:'left', background:''}}
                ]
        }
    );
 

I really wish all the Angular Kendo example use remote data rather than local data. Having local data is the easier case while we run into all kinds of issues while binding to remote value in the scope.

[Daniel]

Hello Rajesh,

The barchart angularjs demo uses remote data for the binding. How does it differ from the functionality that you are trying to implement. If the remote data should not be loaded with the dataSource but with a separate request then you could set it with the dataSource data method. I created an example that uses a separate request to update the chart each second. 

Regards,
Daniel
Telerik

 

 

[Chris]

I ran into a curious situation.  Using the remote example from the http://demos.telerik.com/kendo-ui/bar-charts/remote-data-binding
example.  I was able to recreate a working remote access using the dojo (see attached)
Yet when I run the file from my Desktop IIS I get blank results.  I have verified that I can access the data with Fiddler and see the results returned to me so I know it is not a firewall issue.  Any thoughts as to why this might be occurring?

[Chris]

Further Investigation yield the reason for the missing remote data: XML_HttpRequest cannot load http://demos.telerik.com/kendo-ui/content/dataviz/js/spain-electricity.json.  The 'Access-Control-Allow-Origin' header has a value 'http://runner.telerik.io' that is not equal to the supplied origin Origin 'http://xxx-my-domain' is therefore not allowed.

[Daniel]

Hello Warren,

The data from the demos site cannot be loaded from a different domain because of the browsers Same-origin security policy. It can be accessed from the dojo because the demo site adds a CORS header that allows requests from the dojo site.

Regards,
Daniel
Telerik