Phoenix Phoenix - 17 days ago 5
AngularJS Question

Connect an Angular Bar chart to endpoint data

I am new to Angular Charts and don't have a clue how to to connect the endpoint JSON data to the graph. I followed the instructions in AngularCharts to populate the bar chart with rough data.
HTML :

<div class="row">
<div class="span12">
<div class="widget widget-nopad">
<div class="widget-header">
<i class="icon-list-alt"></i>
<h3> Skills</h3>
</div>
<!-- /widget-header -->
<div class="widget-content" style="padding:5px;" ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels" chart-series="series">

</canvas></div>
</div>
</div>


</div>


Controller :

myApp.controller('BarCtrl', ['$scope', 'reportServices', function ($scope, reportServices) {
reportServices.getSkillsReport().then(function (result) {

$scope.data = result.data;

$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.series = ['Series A', 'Series B'];

$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];


});
}]);


The output of the endpoint is :

{
".Net": 4,
"Java": 3,
"JavaScript": 5,
"ASP.NET": 2,
"Banking": 2,
"Personal Skills": 6
}


Can someone please show me how to connect this data to the current default bar chart? Also I don't want the second series of bar in the chart.

Answer

Suppose, your endpoint object is myobject :

var myobject = { ".Net": 4, "Java": 3, "JavaScript": 5, "ASP.NET": 2,"Banking": 2,"Personal Skills": 6}

$scope.labels = [];
$scope.series = ['Series A'];

$scope.data = []; 
$scope.datavalues = [];

for(i in myobject) {
   $scope.labels.push(i)
   $scope.datavlues.push(myobject[i])
}
$scope.data = [$scope.datavalues]