Angular Chart.js is not working with $http call

Question

I am using angular chart for populating a pie chart. For populating the chart I need to make a $http.get() call in service and call the service method from controller. But the chart is not working if I make $http call.

angular.module('shopAdminApp')
.service('ChartService', ['$http',ChartService])

function ChartService($http) {

    this.GetAllChartData = function (month, year) {
        return $http.get('GetMonthlyStatistics?month=' + month + '&&year=' + year + '');
    }
}

angular.module('shopAdminApp')
.controller('chartCtrl', ["ChartService", ChartCtrl]);


function ChartCtrl(ChartService) {
   // this.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
   // this.data = [10, 20, 100];
    
    var promise = ChartService.GetAllChartData(12, 2012);
    promise.then(function (response) {
        console.log(response.data);
        this.chartsdata = response.data;
        this.labels = response.data.BranchNames;
        this.data = response.data.BranchMonthlyTotalSales;
    });
   
  //  console.log(this.chartsdata);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<canvas id="pie1" class="chart chart-pie" data="chart.data" labels="chart.labels" height="300" width="400"></canvas>

If I un-comment the commented part, the pie chart works fine but I need to populate the value with $http call. How can I do that?

but you have GetMonthlyStatistics?month= which is not a url... — Avraam Mavridis
– Avraam Mavridis, Commented May 9, 2015 at 16:11
it is a url as I am using .net mvc with angular js.. and response.data.BranchNames returning the exact array that I commented for labels and response.data.BranchMonthlyTotalSale returning the exact value that I commented for data. I saw it using console.log. so no issue there. — jubair
– jubair, Commented May 9, 2015 at 16:17
Are you sure that the response from the server is ok? Why are you not using a rejection handler function as the second param function on your promise's then? — Avraam Mavridis
– Avraam Mavridis, Commented May 9, 2015 at 16:26
yeah 100% sure. No problem there. I checked the value of data and labels in fulfilled handler and they are ok. but the chart does not show up. — jubair
– jubair, Commented May 9, 2015 at 16:31

Krzysiek · Accepted Answer · 2015-05-09 17:00:55Z

1

try sth like this:

function ChartCtrl(ChartService) {
    var self = this;

    var promise = ChartService.GetAllChartData(12, 2012);
    promise.then(function (response) {
        self.chartsdata = response.data;
        self.labels = response.data.BranchNames;
        self.data = response.data.BranchMonthlyTotalSales;
    });
}

you have to remember that this keyword refer to current context, so when you're in promise callback function this no longer points to your controller, but to callback function itself.

answered May 9, 2015 at 17:00

Krzysiek

2672 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

Angular Chart.js is not working with $http call

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