how to pass response data inside HighChart using angularjs

Question

I am displaying the customer data on the highchart who will register on the website based on their month and year. I am fetching the response from the server to display. But I am not getting how to inject those data into highchart. Any help/advice greatly appreciated.

Angularjs:

.controller('ctrl',['$scope','$http',function($scope,$http){            
$http({
    url: '//customerinformation',
    method: 'GET'
})
.then(
    function successCallback(response){
        $scope.users = response.data.customers;
    },
    function errorCallback(response){
        console.log('Error:' + response.data);
});

$scope.chartOptions =  {
chart: { type: 'column' },
title: { text: 'Customer Information' },
xAxis: { categories: ['Jan', 'Feb', 'Mar','Apr','May','June','July','Aug','Sep','Oct','Nov','Dec'] },
yAxis: { title: { text: 'No.of customer' } },
series: [{ 
         name: 'customer', 
         data: []  <-- 'Here I need to pass the response data'
      }]
    };
}]);

are you using any angular highchart module like github.com/pablojim/highcharts-ng ? — Kalleshwar Kalshetty
– Kalleshwar Kalshetty, Commented Mar 28, 2018 at 14:47

Kacper Madej · Accepted Answer · 2018-03-29 10:10:14Z

2

You could:

set series' data before your chart is generated from chartOptions

or

use series.setData() to update the chart dynamically. To do this you will need the chart variable - mentioned in a comment wrapper https://github.com/pablojim/highcharts-ng can help you with that. Alternativelly you could use chart's load event where this is the chart.

answered Mar 29, 2018 at 10:10

Kacper Madej

7,89627 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sahil0021 · Accepted Answer · 2018-03-28 16:06:54Z

You have to push response data into an array then pass that array in your data like this.

.controller('ctrl',['$scope','$http',function($scope,$http){            
$http({
    url: '//customerinformation',
    method: 'GET'
  })
  .then(
    function successCallback(response){
       $scope.users = response.data;
       var CustomersData= [];
       for (var i = 0; i < $scope.users.length; i++) {
          CustomersData.push($scope.users[i].customers);   
       }
    },
    function errorCallback(response){
        console.log('Error:' + response.data);
  });



 $scope.chartOptions =  {
chart: { type: 'column' },
title: { text: 'Customer Information' },
xAxis: { categories: ['Jan', 'Feb', 'Mar','Apr','May','June','July','Aug','Sep','Oct','Nov','Dec'] },
yAxis: { title: { text: 'No.of customer' } },
series: [{ 
         name: 'customer', 
         data: CustomersData  <--- here you get your data.
        }]
      };
  }

Collectives™ on Stack Overflow

how to pass response data inside HighChart using angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related