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


i using angular nvd3 discrete bar chart, fetching values $http , showing in discrete bar chart, chart showing value getting error typeerror: cannot read property 'length' of undefined how can resolve error?

below 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 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}]} 


Comments

Popular posts from this blog

magento2 - Magento 2 admin grid add filter to collection -

Android volley - avoid multiple requests of the same kind to the server? -

Combining PHP Registration and Login into one class with multiple functions in one PHP file -