How to create bar chart using progress bar in AngularJS?

Question

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.

angularjs has nothing to do with charts specifically, consider using third party tools like c3.js, highcharts, etc.. — A.T.
– A.T., Commented Jun 6, 2016 at 10:19
If i use html to create progress bar chart using value from angular function. Then ? — Kalaiyarasi M
– Kalaiyarasi M, Commented Jun 6, 2016 at 10:22
then it only going to cost you a lot of efforts, you need to write lot of javascript code and css unnecessarily — A.T.
– A.T., Commented Jun 6, 2016 at 10:26

Pritoj · Accepted Answer · 2016-06-06 10:51:43Z

1

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/

answered Jun 6, 2016 at 10:51

Pritoj

634 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

El'Magnifico · Accepted Answer · 2016-06-06 11:19:36Z

0

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

edited Jun 6, 2016 at 11:19

answered Jun 6, 2016 at 10:21

El'Magnifico

8288 silver badges15 bronze badges

5 Comments

Kalaiyarasi M Over a year ago

If i use html to create progress bar chart using value from angular function. Then ?

El'Magnifico Over a year ago

@KalaiyarasiM, I updated the answer. Check the plunker to see if it is close to want you are trying to achieve.

Kalaiyarasi M Over a year ago

I am getting version angularjs 1.2.20 and in above it is using angular 1.4. So I am getting error while i mention ["chart.js"].

Kalaiyarasi M Over a year ago

" Error: [ng:areq] Argument 'BarController' is not a function, got undefined "

El'Magnifico Over a year ago

@KalaiyarasiM, I am not sure if angularjs version is going to be a problem with Angular-ChartJS because It has been tested on 1.2.x. The error you are getting shows that you are probably declaring your angular module wrongly. Check this stackoverflow answer stackoverflow.com/a/25895387/4092170

Collectives™ on Stack Overflow

How to create bar chart using progress bar in AngularJS?

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related