CODEWITHSUNDEEP
jsonasp.net-mvcangularjs
Tim
Tim

Reputation: 952

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

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}]

Upvotes: 1

Views: 908

Answers (2)

Tim
Tim

Reputation: 952

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

Upvotes: 1

Tiago Martins
Tiago Martins

Reputation: 727

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

Upvotes: 0

Related Questions