CODEWITHSUNDEEP
angularjs
Kalaiyarasi M
Kalaiyarasi M

Reputation: 93

How to create bar chart using progress bar in AngularJS?

I am new to AngularJS and I am trying to create a bar chart using progress bar in AngularJS for my below value.

My response will be :

var json_response =  {

  "data": [
    {
      "standard": "Ist",
      "max_students": 20,
      "available_students": 8
    },
    {
      "standard": "IInd",
      "max_students": 15,
      "available_students": 10
    },
    {
      "standard": "IIIrd",
      "max_students": 50,
      "available_students": 22
    }
  ]
}

I need to use above response and display it in a form of vertical bar chart.

Upvotes: 1

Views: 1819

Answers (2)

El'Magnifico
El'Magnifico

Reputation: 818

You want to check Angular-ChartJS out. It gives you a lot of options to create your charts using angular directives.

You could do something like this: 

angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
  $scope.labels = [];
  var students_data = [];
  var available_students_data = [];

  angular.forEach(json_response["data"], function(data) {
    $scope.labels.push(data["standard"]);
    students_data.push(data["max_students"]);
    available_students_data.push(data["available_students"]);
  });

  $scope.series = ['max_students', 'available_students'];
  $scope.data = [students_data, available_students_data];
});

And in your html you just have this :

<div ng-controller="BarCtrl">
  <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"> chart-series="series"
  </canvas>
</div>

Check this plunker

Upvotes: 0

Pritoj
Pritoj

Reputation: 63

If you just want progress bars you can use ui-bootstrap progressbar

Here's a fiddle with an example https://jsfiddle.net/pritojs/uub4tw7d/3/

Upvotes: 1

Related Questions