how to wrap data inside highchart using angularjs

Question

I am trying to display customer registration info. I am wrapping the data and passing inside the highchart, but the data what I am passing is not getting displayed. 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;
        loadChartData(response.data.customers);
    },
    function errorCallback(response){
        console.log('Error:' + response.data);
  });


  function loadChartData(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: data 
        }]
      };
  }    
}])

Could you show your response.data.customers details? Maybe format is wrong? It should be array of points, where values are numbers. — Paweł Fus
– Paweł Fus, Commented Mar 29, 2018 at 13:24
You can simpally push your response data into a new array and use that array in your data . — sahil0021
– sahil0021, Commented Mar 29, 2018 at 13:51
I tried pushing through array, but it din't worked @sahil0021 — vipe
– vipe, Commented Mar 29, 2018 at 14:11
You have to close your callback method after the loadChartData method. maybe this link help link — sahil0021
– sahil0021, Commented Mar 29, 2018 at 14:19

Paweł Fus · Accepted Answer · 2018-03-29 14:18:49Z

1

You need to provide format supported by Highcharts. customers and months means nothing :)

Use x, y, name etc. properties (details: https://api.highcharts.com/highcharts/series.column.data ).

You can simply map your data: data: data.map(point => [point.month, point.customers]) or data: data.map(point => { name: point.month, y: point.customers })

Now you can remove categories from xAxis and set type: xAxis: { type: 'category' }

answered Mar 29, 2018 at 14:18

Paweł Fus

45.1k3 gold badges65 silver badges79 bronze badges

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

Collectives™ on Stack Overflow

how to wrap data inside highchart using angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related