AngularJS $http.get not displaying data

Question

My data displays when I call URL from dataSource: but not when I use $http.get. I am passing this data into a dx-chart using a JsonResult from my controller. Here is code which includes my AngularJS file and MVC View:

AngularJS

var app = angular.module('customCharts', ['dx']);

$http.get("http://localhost:53640/Home/PostChart").success(function (data) {
    $scope.dataSource = data;
    $scope.renderChart();
})

$scope.renderChart = function () {
    $scope.productSettings = {
        dataSource: $scope.dataSource,
        title: 'Displays Product Costs for items in our Database',
        series: {
            argumentField: "Name",
            valueField: "Cost",
            type: "bar",
            color: '#008B8B'
        },
        commonAxisSettings: {
            visible: true,
            color: 'black',
            width: 2
        },
        argumentAxis: {
            title: 'Items in Product Store Database'
        },
        valueAxis: {
            title: 'Dollor Amount',
            valueFormat: 'currency'
        }
    }
};

HTML

<div ng-app="customCharts">
    <div ng-controller="ChartController">
        <div dx-chart="productSettings"></div>
    </div>
</div>

No. My chart just doesn't display any data, but the chart itself is there. But when I remove the $http.get and just use dataSource: ('URL') my data is populated into the chart. — Tim
– Tim, Commented Mar 26, 2015 at 16:58

Tim · Accepted Answer · 2015-03-30 13:16:50Z

2

Here is how I solved this issue.

var app = angular.module('customCharts', ['dx']);

app.controller("ChartController", function ($scope, $http, $q) {
    $scope.productSettings = {
        dataSource: new DevExpress.data.DataSource({
            load: function () {
                var def = $.Deferred();
                $http({
                    method: 'GET',
                    url: 'http://localhost:80/Home/PostChart'
                }).success(function (data) {
                    def.resolve(data);
                });
                return def.promise();
            }
        }),
        series: {
            title: 'Displays Product Costs for items in our Database',
            argumentType: String,
            argumentField: "Name",
            valueField: "Cost",
            type: "bar",
            color: '#008B8B'
        },
        commonAxisSettings: {
            visible: true,
            color: 'black',
            width: 2
        },
        argumentAxis: {
            title: 'Items in Product Store Database'
        },
        valueAxis: {
            title: 'Dollor Amount',
            valueFormat: 'currency'
        }
    }
})

answered Mar 30, 2015 at 13:16

Tim

9523 gold badges13 silver badges32 bronze badges

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

3 Comments

Michael Sheely Over a year ago

I'm amazed that DevExpress hasn't accommodated their libraries to interact better with AngularJS. It seems that they wrap everything up with their classes that take away from two-way binding that AngularJS is known for.

Tim Over a year ago

So what you're saying is basically DevExpress = Poop

Michael Sheely Over a year ago

That would be accurate. :)

Pankaj Parkar · Accepted Answer · 2015-03-26 17:30:49Z

1

$http.get("http://localhost:53640/Home/PostChart") will return a promise object, that promise will get resolved when your server controller action returns a data. You should get data first after resolving promise and then render your chart by passing a data.

Code

var app = angular.module('customCharts', ['dx']);

app.controller('ChartController', ['$scope', '$http', function($scope, $http) {
    $http.get("http://localhost:53640/Home/PostChart").success(function(data) {
        $scope.dataSource = data;
        $scope.renderChart();
    })

    $scope.renderChart = function() {
        $scope.productSettings = {
            dataSource: $scope.dataSource,
            title: 'Displays Product Costs for items in our Database',
            series: {
                argumentField: "Name",
                valueField: "Cost",
                type: "bar",
                color: '#008B8B'
            },
            commonAxisSettings: {
                visible: true,
                color: 'black',
                width: 2
            },
            argumentAxis: {
                title: 'Items in Product Store Database'
            },
            valueAxis: {
                title: 'Dollor Amount',
                valueFormat: 'currency'
            }
        }
    };
}]);

edited Mar 26, 2015 at 17:30

answered Mar 26, 2015 at 17:23

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

16 Comments

Tim Over a year ago

No luck with that either my friend. Now I now longer am displaying my chart OR data...

Tim Over a year ago

These are the console errors when I hit 'F12' Failed to load resource: the server responded with a status of 404 (Not Found) ChartDesign.js:3 Uncaught ReferenceError: $http is not defined angular.js:9101 Error: [ng:areq] Argument 'ChartController' is not a function, got undefined errors.angularjs.org/1.2.1/ng/… at angular.js:78

Tim Over a year ago

at assertArg (angular.js:1346) at assertArgFn (angular.js:1356) at angular.js:6636 at angular.js:6083 at forEach (angular.js:307) at nodeLinkFn (angular.js:6070) at compositeLinkFn (angular.js:5536) at compositeLinkFn (angular.js:5539) at publicLinkFn (angular.js:5444) localhost:53640/Content/themes/base/jquery-ui.css Failed to load resource: the server responded with a status of 404 (Not Found)

Tim Over a year ago

I added the HTML and .cs code above to my original post if that helps. I think it has something to do with the way I am passing renderChart to the MVC view

Tim Over a year ago

lol me either, but Sr. developer asked me to do it this way. I think because our project is already built using dx-chartjs.js

|

Tiago Martins · Accepted Answer · 2015-03-27 17:14:27Z

1

You need to use two-way binding in order for the chart to update properly. Add this in your dx-chart attribute:

    <div dx-chart="{
       ...
       bindingOptions: {
         dataSource: 'dataSource'
       }
    }"></div>

where dataSource is an attribute of your scope ($scope.dataSource) that you will update after you perform the $http.get successfully.

Check the documentation here

answered Mar 27, 2015 at 17:14

Tiago Martins

7276 silver badges12 bronze badges

Collectives™ on Stack Overflow

AngularJS $http.get not displaying data

3 Answers 3

3 Comments

16 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

16 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related