Highcharts-ng Ajax Data Load

I have the following HTTP request that i use to fill out my chart: $scope.series = ['Moduler tager', 'Gns.score']; $scope.activity_data = []; $scope.activity_ticks = []; var tmp_da

Solution 1:

Your $scope.chartConfig is likely firing before the success callback of your $http.get(api.getUrl('findSelfActivityByDivisions', null)) completes. I am assuming $scope.chartConfig is located in a controller. Try placing a $watchGroup on the values then apply your chart rendering logic once those values resolve. An example may include

Note that $watchGroup is found within Angular as of 1.3

$scope.$watchGroup(['line', 'bar'], function(newValues, oldValues) {

    // newValues[0] --> $scope.line 
    // newValues[1] --> $scope.bar 

    if(newValues !== oldValues) {
        $scope.chartConfig = {
            options: {
                chart: {
                    type: 'areaspline'
                }
            },
            series: [{
                data: $scope.bar,
                type: 'column'
            },{
                data: $scope.line,
                type: 'line'
            }],
            xAxis: {
                categories: $scope.activity_ticks
            },
            title: {
                text: 'Hello'
            }, 
            loading: false
        }
    }
});