I have been working on adding fusionCharts dynamically to an AngularJS page. I load chart data into a model object, and while the charts do display, they show "No data to display" content.
My app.js:
(function () {
var modelListOfCharts = ["1", "4", "5", "6"];
var model = {};
var app = angular.module('chartDash', ["ng-fusioncharts"]);
app.controller('fussionController',["$scope","DataService", function ($scope, DataService) {
$scope.chartData = {};
DataService.getThings().then(function () {
$scope.myListOfCharts = modelListOfCharts;
$scope.chartData = model;
});
}]);
app.service("DataService", ["$http", "$timeout", "$q", function ($http, $timeout, $q) {
return {
getThings: function () {
var dfd = $q.defer();
$timeout(function () {
angular.forEach(modelListOfCharts, function(chartId) {
$http.get('/FusionCharts/GetChartData/', { params: { chartID: chartId } }).success(function (result) {
model[chartId] = result;
});
});
dfd.resolve(model);
}, 300);
return dfd.promise;
}
};
}]);
})();
My html:
<div ng-controller="fussionController">
<div ng-repeat="n in myListOfCharts">
<h2>Chart number {{n}}</h2>
<fusioncharts width="100%"
height="400"
type="MSCombi2D"
datasource="{{chartData[n]}}"></fusioncharts>
</div>
</div>
When I move dfd.resolve(model); inside the loop, it only displays data for one chart.
app.service("DataService", ["$http", "$timeout", "$q", function ($http, $timeout, $q) {
return {
getThings: function () {
var dfd = $q.defer();
$timeout(function () {
angular.forEach(modelListOfCharts, function(chartId) {
$http.get('/FusionCharts/GetChartData/', { params: { chartID: chartId } }).success(function (result) {
model[chartId] = result;
dfd.resolve(model);
});
});
}, 300);
return dfd.promise;
}
};
}]);