I am trying to import a JSON array of integers into scope.data in order to use it for creating D3 bars. However, I am facing issues as the array is not being utilized properly by D3 bars even though it is displayed when using {{data}} in the HTML. Can someone please assist me with this problem?
angular.module('myApp', [])
//.controller('SalesController', ['$scope', function($scope, $http){
.controller('SalesController', function($scope, $http) {
/* $http.get('js/todos2.json')
.then(function(res){
$scope.data = res.data;
});*/
/*$http({method: 'GET', url: 'js/todos2.json'}).success(function(data)
{
$scope.data = data; // response data
});*/
$http.get('js/todos2.json').success(function(data) {
$scope.data = data;
});
/*$scope.data = [Math.random(),12,6,8,15];*/
/*$scope.data = 7*/
$scope.text = ('klopm');
//parseInt(data)
}).directive('bars', function ($parse) {
return {
restrict: 'E',
replace: true,
template: '<div id="chart"></div>',
scope:{data: '=data'},
link: function (scope, element, attrs) {
var data = scope.data;
function drawBars() {
var chart = d3.select('#chart')
.append("div").attr("class", "chart")
.selectAll('div')
.data(data[0]).enter()
.append("div")
.transition().ease("elastic") //had la ligne bantli zayda na9ssa b3da pr l'affichage il faut savoir a quoi sert
.style("width", function(d) { return d + "%"; })
.text(function(d) { return d + "%"; });
}
drawBars();
}
};
});