Fusionchart Angularjs cannot show Graph with JSON from URL

Question

i use fusion chart for angular js. My data came from json url with http angular (with my factory), here my json object :

{"chart":{"caption":"Asset Hardware by Status","numberPrefix":"","dataFormat":"json","theme":"fint","showBorder":"0","borderAlpha":"0","bgAlpha":"0","useplotgradientcolor":"0","showplotborder":"0"},"data":[{"label":"OK","value":"281"},{"label":"OK GUDANG","value":"26"},{"label":"OK MUTASI","value":"8"},{"label":"PEMINJAMAN","value":"2"},{"label":"RUSAK GUDANG","value":"0"},{"label":"RUSAK SERVICE","value":"11"},{"label":"TERJUAL","value":"0"}]}

and here my controller :

app.controller("GraphCtrl",function(GlobalFactory,$scope){
$scope.myDataSource = '';
$scope.getData = function(){
    GlobalFactory.typeahead(restUrl('assethw_status')).then(function(d){
        $scope.myDataSource = d;
        console.log(d);
    });
}

// if i use this the chart work normally
// this json object is same as than output from URL
$scope.myDataSource = {"chart":{"caption":"Asset Hardware by Status","numberPrefix":"","theme":"fint","showBorder":"0","borderAlpha":"0","bgAlpha":"0","useplotgradientcolor":"0","showplotborder":"0"},"data":[{"label":"OK","value":"281"},{"label":"OK GUDANG","value":"26"},{"label":"OK MUTASI","value":"8"},{"label":"PEMINJAMAN","value":"2"},{"label":"RUSAK GUDANG","value":"0"},{"label":"RUSAK SERVICE","value":"11"},{"label":"TERJUAL","value":"0"}]};

// but if i use from json url the chart show no data to display
// may i miss something?
$scope.getData();
$scope.refresh = function(){
    $scope.getData();
}
});

my problem is, if i use locally json data, charts is work normally but if i use json form URL, charts show no data to display. May i miss something?

thanks advance, ikwijaya

Answer 1

You should access the data property of the response, change it as

GlobalFactory.typeahead(restUrl('assethw_status')).then(function(d){
        $scope.myDataSource = d.data;       
});