It seems like I have identified the issue with the chart not displaying properly. The problem is most likely due to the fact that I am loading a large JSON object from a RESTful server and passing it to a directive for chart generation before the JSON has finished downloading completely.
The JSON file is nearly 1mb in size and I am fetching it like this:
Within the Controller:
dataArchive.get().then(function(result){
$scope.getData = result;
});
And in the HTML:
<divng-controller="archiveCtrl">
<data-graph get-archive-data="getData"></data-graph>
</div>
Within the directive:
var chart = function(data){
var createchart = new AmCharts.makeChart("chartdiv", {
//
});
}
var linker = function(scope, element, attrs){
scope.$watch('data', function(){
chart(scope.data);
});
}
directives.directive('dataGraph', function(){
return {
restrict: 'E',
replace: false,
scope: {
data: '=getArchiveData'
},
template: '<div id="chartdiv"></div>',
link: linker
};
});
Due to this, the directive template may load with empty content, causing the chart to not generate properly. What would be the best way to solve this issue?