Am Chart does not load chart after ajax call - angularjs

Question

I fetch data from API by making ajax call then pass this data to the chart.
I am not able to render the chart. Can anyone suggest me what may be the issue?
This is my ajax call
You can see after ajax call i am trying to push to scope variable and trying to add to chart.
for reference please find in this link http://jsfiddle.net/w3vpc35o/41/
angular.module('amChartsDirectiveExample', ['amChartsDirective']).controller('amChartsController', function ($scope) {
$scope.call = function(){
$http({
method: "get",
global: false,
async: true,
url: "server/test.php
}).
success(function(data) {
/*Assume data like like [{
year: 2005,
income: 23.5,
expenses: 18.1
}, {
year: 2006,
income: 26.2,
expenses: 22.8
}, {
year: 2007,
income: 30.1,
expenses: 23.9
}, {
year: 2008,
income: 29.5,
expenses: 25.1
}, {
year: 2009,
income: 24.6,
expenses: 25
}]*/
$scope.rest = data
$scope.amChartOptions = {
data:$scope.res ,
type: "serial",
theme: 'black',
categoryField: "year",
rotate: true,
pathToImages: 'https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/images/',
legend: {
enabled: true
},
chartScrollbar: {
enabled: true,
},
categoryAxis: {
gridPosition: "start",
parseDates: false
},
valueAxes: [{
position: "top",
title: "Million USD"
}],
graphs: [{
type: "column",
title: "Income",
valueField: "income",
fillAlphas: 1,
}]
}
});
}
$scope.call();
});

Answer 1

You didn't mentioned if you use some angular wrapper for amCharts or not, but if not, maybe you called var chart = AmCharts.makeChart(...) before the ajax call completed and you forgot to call chart.validateData(); after?
Will greatly help if you will post here some full code related to this issue
EDIT
It's seems that you use GrantMStevens/amCharts-Angular.
Use the technique mentioned in the documentation: 'Promise based chart rendering' to resolve the data in async: http://jsfiddle.net/w3vpc35o/83/
In general, what you need to do is to create the ChartOptions like this:
this.amChartOptions = $timeout(function(){
return {
data: this.dataFromPromise(),
type: "serial",
...
}.bind(this), 1000)
and fetch the data in async using something like this:
this.dataFromPromise = function(){
var deferred = $q.defer();
$http({
method : "GET",
url : "/server/endpoint"
}).then(function mySucces(response) {
deferred.resolve(response);
});
return deferred.promise;
};