Search code examples
javascriptangularjsnvd3.jsangularjs-nvd3-directives

`a.map is not a function` error when trying to make NVD3 chart

I'm trying to make a chart with AngularJS and NVD3. But I keep getting an error.

Here's index.html:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div.square {
            background-color: #ccc;
            height: 400px;
            width: 400px;
            margin: 10px;
        }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.js"></script>
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="item in items">
    <br>
    <form id="{{'customize-chart-' + item.number}}" novalidate>
        <textarea rows="5" cols="50" placeholder="Paste comma-separated data here." ng-model="textModel"></textarea>
        <br>
        <button id="{{'update-chart-' + item.number}}" ng-click="updateChart(item.number)">Update chart</button>
    </form>
  </div>
  <div ng-repeat="item in items">
    <div class="square">
        <nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3>
    </div>
  </div>
</body>
</html>

Here's app.js"

var app=    angular.module("myApp",["nvd3"]);
app.controller("myCtrl",function($scope){
    $scope.items=   [
        {
            hed: '',
            subhed: '',
            number: chNum
        }
    ];

    $scope.textModel=   '';

    $scope.updateChart= function(passedItemNumber){
        var csvData=    d3.csv.parse(this.textModel);
        var headers=    d3.keys(csvData[0]);
        var nvd3Obj=    {};

        headers.forEach(function(d){
            nvd3Obj[d]= [];
        });

        csvData.forEach(function(d){
            for(var key in d){
                nvd3Obj[key].push(d[key]);
            }
        });

        $scope.options = {
            "chart": {
                "type": "lineChart",
                "height": 400,
                "margin": {
                    "top": 20,
                    "right": 20,
                    "bottom": 40,
                    "left": 55
                },
                "x": function(d) {
                    console.log(d);
                    return d[0];
                },
                "y": function(d) {
                    return d[1];
                },
                "useInteractiveGuideline": true,
                "dispatch": {},
                "xAxis": {
                    "axisLabel": "X axis"
                },
                "yAxis": {
                    "axisLabel": "Y axis"//,
                    // "axisLabelDistance": -10
                }
            }
        };

        $scope.data=    nvd3Obj;
    };
});

Here's what I paste into the textarea tag.

date,dow,sp500,nasdaq
1/1/16,10,15,8
1/3/16,5,3,7
1/5/16,12,18,12

When I paste that into the textarea, then click the "Update chart" button, this error appears in my browser's console.

angular.js:14290 TypeError: a.map is not a function
    at nv.d3.min.js:5
    at g (nv.d3.min.js:2)
    at update (nv.d3.min.js:2)
    at SVGSVGElement.<anonymous> (nv.d3.min.js:4)
    at d3.min.js:3
    at Y (d3.min.js:1)
    at Array._a.each (d3.min.js:3)
    at Array.b (nv.d3.min.js:4)
    at Array._a.call (d3.min.js:3)
    at Object.updateWithData (angular-nvd3.js:229)

The error does not refernce my script, app.js. What in my code causes this error? How do I fix it?

Solution

  • I can get you past your current error by telling you that your nvd3Obj needs to be an Array. Now you'll get a new error that says 'Cannot create property 'series' on string '1' if you use (a,b,c\n1,2,3) as your CSV data.

    EDIT: I got past that second error by making the values objects with x,y properties. { x: d[k], y: 0 }. Hopefully this will help you get back to solving the rest of your problem. Here's a plnkr with the code I used. http://plnkr.co/edit/q1apvHlChaXvdsqzlXlM?p=preview

        var csvData=    d3.csv.parse(this.textModel);
    var headers=    d3.keys(csvData[0]);
    var nvd3Obj=    [];
    headers.map(function (heading, index) {
      nvd3Obj[index] = { "key": heading };
    })
    csvData.forEach(function(d){
        for(var k in d){
            for(var i = 0; i < nvd3Obj.length; i++) {
              var obj = nvd3Obj[i];
              if (obj.key === k) {
                if (!obj.values) {
                  obj.values = [{ x: d[k], y: 0 }];
                } else {
                  obj.values.push({ x: d[k], y: 0 });
                }
                break;
              }
            }
        }
    });