admin管理员组文章数量:1244397
I'm trying out Kendo charts with angular, and I have problem displaying data, here is my code:
HTML:
<div kendo-chart="rchart" data-k-options="chartOptions" data-role="chart" class="k-chart" style="position: relative;"></div>
Javascript:
resultService.getResult().then(function (resultResponse) {
$scope.data = resultResponse.data;
$scope.oldReps = _.pluck($scope.data.TreningScores.Item1, 'Item2');
$scope.newReps = _.pluck($scope.data.TreningScores.Item2, 'Item2');
$scope.categories = _.pluck($scope.data.TreningScores.Item1, 'Item1');
});
$scope.chartOptions = {
legend: {
position: "bottom"
},
seriesDefaults: {
type: "column"
},
series: [{
name: "Total Visits",
data: $scope.oldReps
}, {
name: "Unique visitors",
data: $scope.newReps
}],
valueAxis: {
line: {
visible: false
}
},
tooltip: {
visible: true,
format: "{0}"
}
};
The problem is chart isn't updated after data is fetched from server, I've tried refreshing chart like this (but with no luck):
$scope.chart = {
refreshChart : function() {
$scope.rchart.refresh();
},
};
And calling this method in:
resultService.getResult().then(function (resultResponse) {});
And I've also tried to define $scope.chartOptions
inside same function, but nothing. Is there any way to fix this ?
I'm trying out Kendo charts with angular, and I have problem displaying data, here is my code:
HTML:
<div kendo-chart="rchart" data-k-options="chartOptions" data-role="chart" class="k-chart" style="position: relative;"></div>
Javascript:
resultService.getResult().then(function (resultResponse) {
$scope.data = resultResponse.data;
$scope.oldReps = _.pluck($scope.data.TreningScores.Item1, 'Item2');
$scope.newReps = _.pluck($scope.data.TreningScores.Item2, 'Item2');
$scope.categories = _.pluck($scope.data.TreningScores.Item1, 'Item1');
});
$scope.chartOptions = {
legend: {
position: "bottom"
},
seriesDefaults: {
type: "column"
},
series: [{
name: "Total Visits",
data: $scope.oldReps
}, {
name: "Unique visitors",
data: $scope.newReps
}],
valueAxis: {
line: {
visible: false
}
},
tooltip: {
visible: true,
format: "{0}"
}
};
The problem is chart isn't updated after data is fetched from server, I've tried refreshing chart like this (but with no luck):
$scope.chart = {
refreshChart : function() {
$scope.rchart.refresh();
},
};
And calling this method in:
resultService.getResult().then(function (resultResponse) {});
And I've also tried to define $scope.chartOptions
inside same function, but nothing. Is there any way to fix this ?
- 1 @george-brighton I'm a bit late to the party on this reply, but check out my simplified solution and example: stackoverflow./a/39739389/1467810 – TaeKwonJoe Commented Sep 28, 2016 at 7:14
3 Answers
Reset to default 11It's not well documented, but to get a UI control with remote data-binding to update after data has been returned from a server requires both watching the collection for updates from the Angular side and rebinding the data object to its respective UI control from the Kendo side.
In your controller, watch for changes to your data objects using $watchCollection
, and update the objects/properties which are bound to those collections:
// API call
$http.get('...').success(function(data){
$scope.data = data;
});
// KendoUI config object
$scope.chart = {
dataSource: {
data: $scope.data
}
};
// Watch for changes to $scope.data
$scope.$watchCollection('data', function(newData) {
// Update data bindings with changes
$scope.chart.dataSource.data = newData;
});
In your view, define the object your UI control should be bound to when changes are made via the k-rebind
Angular-Kendo directive:
<div kendo-chart k-options="chart" k-rebind="chart"></div>
Here is an example of a chart bound to remote data:
http://codepen.io/micjamking/pen/4980a5e22cbd4de01264fadae5f25f06
The use of $watchCollection to track and assign the dataSource.data in the accepted answer and others is a needlessly convoluted approach.
Here's a straightforward implementation:
view:
<div kendo-chart k-theme='metro' k-options="chart" k-rebind="chart"></div>
controller:
$scope.chart = {
dataSource: new kendo.data.DataSource({
data: [{ title: "Loading", value: 100, color: '#EFEFEF' }]
}),
series: [{ field: 'value', categoryField: 'title', padding: 0, holeSize: 25 }],
seriesDefaults: { type: 'donut', startAngle: 90 }
};
Using the dataSource.data() method instead of assigning dataSource.data as an array is the key here:
payrollService.load(userId).then(function (result) {
$scope.chart.dataSource.data(result.items); //where result.items is an array like so:
//[
// { title: "Net Pay", value: 60, color: '#6BAE4B' },
// { title: "Taxes", value: 15, color: '#ED6347' },
// { title: "Deductions", value: 25, color: '#8161C2' }
//]
});
Codepen Demo: http://codepen.io/TaeKwonJoe/pen/WGOpEv
I think your problem is that $scope.chartOptions is set before the data of the resultService is retrieved. Angular is returning an empty array in this case and filling in the data later. But $scope.chartOptions not not updated with new data.
You could try with
$scope.$watchCollection('oldReps', function(newData, oldData) {
$scope.chartOptions.series[0].data = newData;
});
$scope.$watchCollection('newReps', function(newData, oldData) {
$scope.chartOptions.series[1].data = newData;
});
So chartOptions are updated if oldReps or newReps have changed.
I had a similiar problem and $watchCollection saved my day (Caching data and updating another object for an chart does not work)
本文标签: javascriptKendoAngular chart dataStack Overflow
版权声明:本文标题:javascript - Kendo + Angular chart data - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1740184518a2237956.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论