Pass data to $scope in AngularJS chart

Question

I am using asp .net mvc web app with AngularJS and chart.js to create chart.

Taking the bar chart example: http://jtblin.github.io/angular-chart.js/

I have a list of data from MVC controller, and I would like to pass this data to angular controller. /Displaycharts/Columnchart is link to get datalist from c# controller to angular controller.

May I know the $scope.labels and $scope.data are assigned correctly? Appreciate if you could help to modify the sample and SQL script which can be downloaded from here.

Thanks!

Code:

angular
    .module('MyApp', 'Chart.js', 'DisplaychartsngController.js')
    .controller('DisplaychartsngController', function ($scope, MarketService) {
        $scope.Markets = null;
        MarketService.GetMarketList().then(function (d) {
            $scope.Markets = d.data; //Success callback
            $scope.labels = $scope.Markets.PlanName;
            $scope.series= ['PaymentAmount'];
            $scope.data = $scope.Markets.PaymentAmount;

        }, function (error) {
            alert('Error!'); // Failed Callback
        });
    })

How does your response look like? And what do you wish to pass to $scope.labels and $scope.data? — LordTribual
– LordTribual, Commented Jun 11, 2015 at 6:28
I want to pass Markets.PlanName and Markets.PlanAmount to $scope.data. and i think $scope.labels = ['PlanName', 'PaymentAmount']; I tried $scope.data = [d.PlanName, d.PaymentAmount]; but it's failed. — Nel
– Nel, Commented Jun 11, 2015 at 6:38
PlanName seems to be a sting and PaymentAmount a number, right? $scope.data takes a series of data such as [1,2,3,4]. In case of a bar chart you assign either a single array or a set of arrays. — LordTribual
– LordTribual, Commented Jun 11, 2015 at 6:52
I have added the web application that I have developed. Appreciate if you can help to troubleshoot. — Nel
– Nel, Commented Jun 11, 2015 at 8:59
PlanName seems to be a string and PaymentAmount a number. I tried with code below but it is still failed. $scope.labels = ['PlanName', 'PaymentAmount']; $scope.data = [$scope.Markets.PlanName, $scope.Markets.PaymentAmount]; — Nel
– Nel, Commented Jun 11, 2015 at 9:28

Phil Quinn · Accepted Answer · 2015-06-11 10:49:42Z

1

If the data is returned as JSON to the $scope.Markets. Then you would apply it like an accessing of an object. For example:

$scope.Markets = d.data; //Success callback
$scope.labels = $scope.Markets.labels;  
$scope.data = $scope.Markets.data;

As I'm not sure on the format of the response I can't be certain, maybe comment with an example of the response if this isn't correct and I'll edit the answer.

EDIT:

HTML like this:

<div ng-controller="DisplaychartsngController">
    <canvas id="bar" class="chart chart-bar" data="data" labels="labels"></canvas>
</div>

And a controller with this:

 angular.module("MyApp", ["chart.js"])
        .controller("DisplaychartsngController", function ($scope) {
             $scope.labels = ['Half Yearly', 'Quarterly', 'Yearly']
             $scope.data = [['17974', '152324','5393']]; 
             $scope.series = ['PaymentAmount']; //what you want to call your series
         });

edited Jun 11, 2015 at 10:49

answered Jun 11, 2015 at 6:41

Phil Quinn

1461 silver badge6 bronze badges

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

13 Comments

Nel Over a year ago

I have added the web application that I have developed. Appreciate if you can help to troubleshoot.

Phil Quinn Over a year ago

A sample of the response would be more helpful.

Nel Over a year ago

I would like the list of data pass to chart X and Y axis data, and transform to a bar chart.

Phil Quinn Over a year ago

I get that. You want ['PlanName', 'PaymentAmount'] as labels on the x axis and you need to get the data for the y axis. But as I don't know the format of the response from MarketService.GetMarketList() I can't give a proper answer yet.

Nel Over a year ago

I see. MarketService.GetMarketList() will get listdata from Displaycharts controller - ColumnCharts function. The data is [PlanName, PaymentAmount] 17974 Half Yearly 152324 Quaretly 5393 Yearly

|

VBMali · Accepted Answer · 2015-06-24 09:33:12Z

0

Make sure you are assigning data in appropriate format (array), Like:

$scope.labels = ["Item1", "Item2", "Item3"];
$scope.data = [300, 500, 100];

Hope this helps.

answered Jun 24, 2015 at 9:33

VBMali

1,3803 gold badges20 silver badges47 bronze badges

Collectives™ on Stack Overflow

Pass data to $scope in AngularJS chart

2 Answers 2

13 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related