Loading data from Angular AJAX-call into D3-graph

Question

I'm having some trouble loading JSON-data from an external API into a D3-graph. I'm using Quandl's API to load brent oil price-rates over a period of time, which is the data I'm trying to graph. I'm making use of Angular in my project, so I have a service set up to make the AJAX-call and then provide it to the scope. This I can do successfully as long as I don't try to involve my D3-code.

When I do, I get several errors:

GET http://localhost:3000/[object%20Object] 404 (Not Found)

and this:

Uncaught TypeError: Cannot read property 'forEach' of undefined

which is tied to some error in my d3-code I cannot well understand.

Here is the full code producing the errors:

app.service('oilService', function($http) {
  delete $http.defaults.headers.common['X-Requested-With'];
  this.getData = function() {
  var URL = "https://www.quandl.com/api/v1/datasets/CHRIS/ICE_B1.json";
  return $http({
    method: 'GET',
    url: URL
  })
}})

.directive('oilGraph', function() {
  return {
   scope: {},
   controller: function(oilService) {
    var width = 200;
  var height = 100;

  var parseTime = d3.timeParse("%y-%m-%d");

  var x = d3.scaleTime().range([0, width]);
  var y = d3.scaleLinear().range([height, 0]);

  var valueline = d3.line()
      .x(function(d) { return x(d.date); })
      .y(function(d) { return y(d.settle); });
  var svg = d3.select("#oilgraph").append("svg")
        .attr("width", width)
        .attr("height", height);

  oilService.getData()
  .then(function(data) {
    d3.json(data, function(error, data) {
      if (error) {
        console.log(error);
      }

      data.forEach(function(d) {
        d.date = parseTime(d[0]);
        d.settle = d[4];
      })

      x.domain(d3.extent(data, function(d) { return d.date; }));
      y.domain([0, d3.max(data, function(d) { return d.settle; })]);

      svg.append("path")
          .data([data])
          .attr("class", "line")
          .attr("d", valueline);

      svg.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x));

      svg.append("g")
          .call(d3.axisLeft(y));
    })
   })
  }
 }
})

(nevermind the curly brackets-mess)

The second error is because data in data.forEach(function(d) {... is undefined - due to the first error. Could you log the result of oilService.getData() by putting a console.log here: .then(function(data) { console.log("data:", data)? Could you also post what the result of console.log(error); is? (I am guessing it is the first error but just in case) — mkaran
– mkaran, Commented Jun 29, 2017 at 13:36
$http most probably deserializes the JSON data (that would be the default), so d3.json already gets an object, not a string — ccprog
– ccprog, Commented Jun 29, 2017 at 13:41
@ccprog that's definitely one of the issues, but what I cannot understand at this point is why the localhost part in the first error: http://localhost:3000/[object%20Object] . I mean this is not constructed anywhere in the code and d3.json takes as input the data from oilService.getData() so something there must be fishy.. — mkaran
– mkaran, Commented Jun 29, 2017 at 13:45
cf. the signature: d3.json(url[, callback]). Your data object is interpreted as a file system uri. — ccprog
– ccprog, Commented Jun 29, 2017 at 13:51
@ccprog indeed! So just remove the d3.json and load directly the data — mkaran
– mkaran, Commented Jun 29, 2017 at 13:55

ccprog · Accepted Answer · 2017-06-30 12:36:30Z

2

Angular $http allready deserializes the data. Either do not call d3.json, or let it handle the request and do not call $http.

The data received from https://www.quandl.com/api/v1/datasets/CHRIS/ICE_B1.json follow another format than you are expecting. They look like this:

{
  //...
  "column_names": [ "Date","Open","High","Low","Settle","Change","Wave","Volume","Prev. Day Open Interest","EFP Volume","EFS Volume","Block Volume" ],
  "data": [
     ["2017-06-28",46.25,47.47,46.25,47.31,0.66,46.85,158984.0,149270.0,2218.0,null,1379.0],
     //...
}

To get at what you want you need to reference

oilService.getData()
  .then(function(response) {
    var mapped_data = response.data.data.map(function(d) {
        return {
           date: parseTime(d[0]),
           settle: d[4]
        };
     })

    //...

    svg.append("path")
       .data([mapped_data])
       //etc.
  })

edited Jun 30, 2017 at 12:36

answered Jun 29, 2017 at 14:16

ccprog

22.2k4 gold badges32 silver badges48 bronze badges

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

3 Comments

SudokuNinja Over a year ago

data.data.map is not a function

SudokuNinja Over a year ago

I could reference the data just fine if I write it like this data.data.data.forEach(function(d) { .... }) This also works for: data.data.data.map My only problem now is the graph is not showing anything except a vertical y-axis line.

ccprog Over a year ago

ah - Angular $http also wraps the JSON object in a .data property. To avoid naming that is too silly, maybe the callback parameter should be called response, as the Angular doc does.

Collectives™ on Stack Overflow

Loading data from Angular AJAX-call into D3-graph

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related