How to resolve an error like: TypeError: Cannot read property 'length' of undefined in angular nvd3 discrete bar chart?

问题

I am using angular nvd3 discrete bar chart, i am fetching values from $http and showing in the discrete bar chart, chart showing my value properly but i am getting an error like TypeError: Cannot read property 'length' of undefined how can i resolve this error?

below is my code:

    <!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
    <script type="text/javascript">
            var app = angular.module('plunker', ['nvd3']);
            angular.module('plunker').controller('discreteBarChartCtrl', function($scope,$http){
                $scope.myjson=[];
                $http({
                        method : "GET",
                        url : "http://localhost/slim/myjs.php/getjson",
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                        }).then(function mySucces(response) {
                        $scope.myjson=response.data;
                        //console.log($scope.myjson);
                        },function myError(response) {
                        $scope.myjson=response.statusText;
                });
                $scope.options = {
                    chart: {
                        type: 'discreteBarChart',
                        height: 450,
                        margin : {
                            top: 20,
                            right: 20,
                            bottom: 50,
                            left: 55
                        },
                        width:600,
                        yDomain:[0,200],
                        x: function(d){return d.day;},
                        y: function(d){return d.second;},
                        showValues: true,
                        valueFormat: function(d){
                            return d3.format(',f')(Math.abs(d));
                        },
                        duration: 500,
                        xAxis: {
                            axisLabel: 'Days'

                        },
                        yAxis: {
                            axisLabel: 'Y Axis',
                            axisLabelDistance:10,
                            tickFormat: function(d){
                                return d3.format(',f')(Math.abs(d));
                            },
                            valueFormat: function(d){
                                return d3.format(',f')(Math.abs(d));
                            }
                        }
                    }

                };

            });
    </script>

  </head>

  <body ng-controller="discreteBarChartCtrl">
    <nvd3 options="options" data="[{ key: 'Cumulative Return', values: myjson.mydata }]">

    </nvd3>    
  </body>

</html>

my $http json response is like:

{"mydata":[{"day":1,"second":14},{"day":2,"second":5},{"day":3,"second":85},{"day":4,"second":15},{"day":5,"second":50},{"day":6,"second":35},{"day":7,"second":55},{"day":8,"second":39},{"day":9,"second":105},{"day":10,"second":115},{"day":11,"second":55},{"day":12,"second":25}]}

来源：https://stackoverflow.com/questions/38635193/how-to-resolve-an-error-like-typeerror-cannot-read-property-length-of-undefi

标签

angularjs

angular-nvd3