AngularJS Why is data not showing up with $http.get?

Question

When using $http.get I no longer see data in my bar graph. If I remove $http.get and just call the url my data appears just fine. Any ideas what I am doing wrong?

AngularJS

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

function ChartController($scope, $http) {

    $http.get("http://localhost:53640/Home/PostChart")
        .success(function (data) {
            $scope.productSettings = {
                dataSource: data,
                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>

JSON

[{"Name":"Learn SQL Server 2014","Cost":34.95},{"Name":"ASUS PC","Cost":499.99},{"Name":"SQL Server 2014","Cost":600.00}]

Is data actually the data, or is it actually the response, and you want to use data.data (or rename data to response and do response.data) — Tom
– Tom, Commented Mar 27, 2015 at 15:19
@Tom $http.get("localhost:53640/Home/PostChart") .success(function (response) { $scope.productSettings = { dataSource: response.data ..........Still does not work — Tim
– Tim, Commented Mar 27, 2015 at 15:26
possible duplicate of AngularJS $http.get not displaying data — ediblecode
– ediblecode, Commented Mar 27, 2015 at 15:32
@jumpingcode yes, that was mine. I cannot seem to get the display. I never received anymore suggestions on that post, so wanted to try again. — Tim
– Tim, Commented Mar 27, 2015 at 15:39

Tim · Accepted Answer · 2015-03-30 13:20:47Z

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'
        }
    }
})

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

0

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

    $scope.productSettings = {
       ...
       bindingOptions: {
         dataSource: 'dataSource'
       }
    };

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

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

Check the documentation here

answered Mar 27, 2015 at 17:25

Tiago Martins

7276 silver badges12 bronze badges

Collectives™ on Stack Overflow

AngularJS Why is data not showing up with $http.get?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related