Angular -dimple error TypeError: Cannot read property '_hasCategories' from null
I am trying to build a chart with tables using dimple.js I need to do this with angular directives so I am using angular-dimple
here is what I have coded to run the example for example:
<script type="text/javascript">
var app = angular.module("dimpleTestApp", ['angular-dimple']);
app.controller('myCtrl', ['$scope', 'dataService', function($scope, dataService) {
dataService.getData().then(function(response) {
$scope.graphData = response.data;
console.log($scope.graphData);
});
}])
.service('dataService', ['$http', function($http) {
return {
getData: function() {
return $http.get('data.json');
}
};
}]);
</script>
</head>
<body ng-app='dimpleTestApp'>
<div ng-controller="myCtrl">
<graph data="graphData" orientation="horizontal">
<x-axis field="Month"></x-axis>
<y-axis field="Sales"></y-axis>
<stacked-bar field="storeId" value="2"></stacked-bar>
</graph>
</div>
</body>
but I am getting this error when running this code:
TypeError: Cannot read property '_hasCategories' of null
at null.<anonymous> (http://dimplejs.org/dist/dimple.v2.0.0.min.js:1:10314)
at Array.forEach (native)
at _getSeriesData (http://dimplejs.org/dist/dimple.v2.0.0.min.js:1:9714)
at draw (http://dimplejs.org/dist/dimple.v2.0.0.min.js:1:20275)
at draw (http://localhost/angular-dimple/bower_components/angular-dimple/lib/angular-dimple.js:175:15)
at addBar (http://localhost/angular-dimple/bower_components/angular-dimple/lib/angular-dimple.js:428:25)
at Object.fn (http://localhost/angular-dimple/bower_components/angular-dimple/lib/angular-dimple.js:433:11)
at g.$get.g.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js:110:464)
at g.$get.g.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js:113:468)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js:73:183)
can someone tell me what is wrong with this app and how can i do it.
source to share
I solved this by delving deeper into the angular-simple library.
There was a mistake in their documentation using elements x
and y
, while in the example they mentioned x-axis
and y-axis
, so when I changed it to fix it, it worked.
Here's the modified code:
<graph data="graphData" orientation="horizontal">
<x field="Month"></x>
<y field="Sales"></y>
<stacked-bar field="storeId" ></stacked-bar>
</graph>
source to share