Load JSON Data into Angular-nvD3 Graph (AngularJS)

Question

I want to load encoded JSON Data retrieved with queries from a database into an Angular-nvD3 graph but I don't know how to do it or which way is the best to accomplish such task.

I retrieve encoded JSON data with queries from a database (table PRODUCTS) with an api. I have already successfully loaded such data into tables with $http requests (loaded into a factory) to the given api. The data is saved as an object into a dictionary in a factory with $http requests to the api (located in services).

Sample of the table (table PRODUCTS):

ID STOCK

1 100

2 275

Sample of the factory:

.factory('services', ['$http', function($http){
  var serviceBase = 'services/'
  var object = {};
  object.getData = function(){
    return $http.get(serviceBase + 'data');
  };
  return object;
}]);

Sample of a controller to display the data into a table (with "ng-repeat="data in get_data"" in the view):

.controller('TablesCtrl', ['$scope', 'services', function($scope, services) {

  services.getData().then(function(data){
    $scope.get_data = data.data;
  });

}]);

Sample of the data format:

[{"0":"1","1":"100","ID":"1","STOCK":"100"},{"0":"2","1":"275","ID":"2","STOCK":"275"}]

PIE CHART - This is an example of the type of script I want to addapt (from THIS repository):

'use strict';

angular.module('mainApp.controllers')

.controller('pieChartCtrl', function($scope){

    $scope.options = {
        chart: {
            type: 'pieChart',
            height: 500,
            x: function(d){return d.key;},
            y: function(d){return d.y;},
            showLabels: true,
            duration: 500,
            labelThreshold: 0.01,
            labelSunbeamLayout: true,
            legend: {
                margin: {
                    top: 5,
                    right: 35,
                    bottom: 5,
                    left: 0
                }
            }
        }
    };

    $scope.data = [
        {
            key: "One",
            y: 5
        },
        {
            key: "Two",
            y: 2
        },
        {
            key: "Three",
            y: 9
        },
        {
            key: "Four",
            y: 7
        },
        {
            key: "Five",
            y: 4
        },
        {
            key: "Six",
            y: 3
        },
        {
            key: "Seven",
            y: .5
        }
    ];
});

HTML:

<div ng-app="myApp">
    <div ng-controller="pieChartCtrl">
        <nvd3 options="options" data="data"></nvd3>
    </div>
</div>

My question is: how it is possible to load such retrieved encoded JSON data into an Angular-nvD3 graph instead of typing manually the data into $scope.data?

Thank you very much!

If your json data is in a format that you can plug directly into the chart, then what you have there would work. It would just be services.getData().then(function(data){ $scope.data = data.data; });. Otherwise you might have to massage the data into a structure the chart expects. — Bennett Adams
– Bennett Adams, Commented Apr 13, 2016 at 2:55
I think that I can't plug directly the data into the chart. My question is how do I massage the data into the structure the chart expects? For instance, with two queries: one object with "keys" and the other with the "y" (values)? Both in JSON format. — Ariana
– Ariana, Commented Apr 13, 2016 at 15:39
If you know what your data look like, I can help you. Otherwise I can just tell you that you'll need to use a function, or multiple functions, to convert the data into that structure. — Bennett Adams
– Bennett Adams, Commented Apr 13, 2016 at 17:12
Thank you very much. I updaded my post with a sample of the data format with one request to the database (table PRODUCTS with two columns: ID and STOCK). — Ariana
– Ariana, Commented Apr 13, 2016 at 18:17

Bennett Adams · Accepted Answer · 2016-04-13 19:22:54Z

1

All you have to do is map your data once you receive it. I updated the plunker from my comment to show you how you might do this using lodash.

services.getData().then(function successCb(data) {
  $scope.data = _.map(data.data, function(prod) {
    return {
      key: prod.ID,
      y: prod.STOCK
    };
  });
});

Alternatively, if you don't want to use lodash (though it's usually included in angular applications by default), you could do something like:

$scope.data = [];
services.getData().then(function successCb(data) {
  angular.forEach(data.data, function(prod) {
    $scope.data.push({
      key: prod.ID,
      y: prod.STOCK
    });
  });
});

answered Apr 13, 2016 at 19:22

Bennett Adams

1,81815 silver badges17 bronze badges

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

2 Comments

Bennett Adams Over a year ago

@Ariana, I updated the plunker again with a method for creating bar-chart compatible data.

Ariana Over a year ago

Oh, thank you but meanwhile I created my own method (similar to yours). However, it could be very useful for somebody else! Thank you for everything :)

Code Whisperer · Accepted Answer · 2016-04-11 21:15:36Z

0

I think you want d3.json()

https://github.com/mbostock/d3/wiki/Requests

This command should load any JSON file. Since you're using NVD3, you should already have D3 in your project.

answered Apr 11, 2016 at 21:15

Code Whisperer

23.7k22 gold badges73 silver badges88 bronze badges

1 Comment

Ariana Over a year ago

I don't want to load a JSON file. I want to load JSON data retrieved directly from a database with queries. The data is saved as an object into a dictionary in a factory with $http requests to the api.

Collectives™ on Stack Overflow

Load JSON Data into Angular-nvD3 Graph (AngularJS)

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related