CODEWITHSUNDEEP
javascriptjsonangularjshighcharts
Patricio Bustos
Patricio Bustos

Reputation: 61

Use Highcharts-ng with JSON

For display the chart, y use the tipical way: 

var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {

    $scope.highchartsNG = {
        options: {
            chart: {
                type: 'bar'
            }
        },
        series: [{
            data: [10, 15, 12, 8, 7]
        }],
        title: {
            text: 'Hello'
        },
        loading: false
    }
});>

But i want load the data from a remote json.

I tried using the method described in the official documentation, but with angular it does not work. I'm using highchart-ng but i dont know how to load remote JSON-Files.

I'm researching how to use $http.get but still i dont know how to use it.

Thanks!

Upvotes: 0

Views: 1007

Answers (1)

David Losert
David Losert

Reputation: 4802

Change the Data ofr your chart to be within a variable:

var chartData = [];
[...]
series: [{
     data: chartData
}],
[...]

Then you can use the $http-Service like the following:

$http.get('/PATH/TO/MY/JSON')
  .success(function(jsonData){
      // Do some remodeling of the jsonData if necessary, else just give it to the chart:
      chartData = jsonData;
  }

The $http-Service of Angular works promise based - this means that you provide the callback of the request within .success and .error-Functions. Its pretty good explained in the official docs.

Upvotes: 1

Related Questions