Getting error "data.map is not a function" using angular-nvd3

Question

I'm getting some deep nvd3 error when I try to configure a simple line chart using angular-nvd3.

I edited the example plunker given and it seems it might be my data that is malformatted, since swapping the options only still works.

Here is an malfunctioning plunkr: http://plnkr.co/edit/fznNKBw6hwNYavfZ3Nvi?p=preview

the options:

  $scope.options = {
    "chart": {
      "type": "lineChart",
      "height": 450,
      "useInteractiveGuideline": true,
      "dispatch": {},
      "xAxis": {
        "axisLabel": "Months"
      },
      "yAxis": {
        "axisLabel": "Team size",
      }
    }
  };

the data:

$scope.data = {
    "key": "Monthly",
    "values": [{
      "x": 0,
      "y": 2
    }, {
      "x": 1,
      "y": 6
    }, {
      "x": 2,
      "y": 10
    }]
  }

Anybody who can spot the issue?

Ok, solved it. The data object needed to be an array! Thanks @PeterS for pointing in the right direction. — primavera133, May 12 '16 at 07:06

PeterS · Accepted Answer · 2016-05-12T08:21:15.040

I replaced your scope.data with a sample one from the nvd3 site:

      $scope.data = sinAndCos();

    /*Random Data Generator */
    function sinAndCos() {
        var sin = [],sin2 = [],
            cos = [];

        //Data is represented as an array of {x,y} pairs.
        for (var i = 0; i < 100; i++) {
            sin.push({x: i, y: Math.sin(i/10)});
            sin2.push({x: i, y: i % 10 == 5 ? null : Math.sin(i/10) *0.25 + 0.5});
            cos.push({x: i, y: .5 * Math.cos(i/10+ 2) + Math.random() / 10});
        }

        //Line chart data should be sent as an array of series objects.
        return [
            {
                values: sin,      //values - represents the array of {x,y} data points
                key: 'Sine Wave', //key  - the name of the series.
                color: '#ff7f0e'  //color - optional: choose your own line color.
            },
            {
                values: cos,
                key: 'Cosine Wave',
                color: '#2ca02c'
            },
            {
                values: sin2,
                key: 'Another sine wave',
                color: '#7777ff',
                area: true      //area - set to true if you want this line to turn into a filled area chart.
            }
        ];
    };

And that works in this plunkr:

plunkr

So this means something is wrong with the data component of what you are trying to do. Experiment by adding/subtracting from your data element and see if that helps.

Edit: Your data object was badly formed: it should be in this format:

  $scope.data = [{
        "key" : "Monthly",
        values : [{
                "x" : 1,
                "y" : 6,
                "color" : 'blue'
            }, {
                "x" : 2,
                "y" : 10,
                "color" : 'red'
            }
        ]
    }
  ];

So from the docs the data object expects an array and then the values are a further array of value objects:

quickstart 1/3 way down page

The solution seems to be to wrap the data object in an array, but keep the x:0, y:45-syntax. — primavera133, May 12 '16 at 07:08
My example was just to get the chart going and to prove the original data object wasn't/was invalid. The data now needs to be reconsidered so that it falls within the nvd definition. I will take a further look in the meantime. — PeterS, May 12 '16 at 08:03
I have updated the example and plunkr, the line is now drawn as you intended (I think). Please take another look. — PeterS, May 12 '16 at 08:09
No problem, the error handling is not the greatest in nvd and you just get a console log -- where the program has fallen over, it is free on the upside. — PeterS, May 12 '16 at 08:36

score 0 · Answer 2 · answered May 14 '16 at 13:57

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
    $scope.options = {
        chart: {
            type: "lineChart",
            height: 450,
            useInteractiveGuideline: true,
            dispatch: {},
            xAxis: {
                axisLabel: "Months"
            },
            yAxis: {
                axisLabel: "Team size",
            }
        }
    };


    $scope.data = [{
        key: "Monthly",
        values: [{
            x: 0,
            y: 2
        },{
            x: 1,
            y: 6
       }, {
            x: 2,
            y: 10
       }],

    }]
    console.log($scope.options, $scope.data)
});

Here is a working example for the data you use (in the plunker)

@rrosa Here, i just created a separate one for you http://plnkr.co/edit/0Hibppc8EzFqEPAMR6i3?p=preview you can also just copy the code from here and paste in the plunker (in the file app.js) mentioned in question. — Dheeraj vats, Jun 22 '16 at 05:51

Getting error "data.map is not a function" using angular-nvd3

2 Answers2