1

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
Kalaiyarasi M
  • 93
  • 2
  • 20
  • angularjs has nothing to do with charts specifically, consider using third party tools like c3.js, highcharts, etc.. – A.T. Jun 06 '16 at 10:19
  • If i use html to create progress bar chart using value from angular function. Then ? – Kalaiyarasi M Jun 06 '16 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. Jun 06 '16 at 10:26

2 Answers2

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/

Pritoj
  • 63
  • 4
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

El'Magnifico
  • 798
  • 6
  • 15
  • If i use html to create progress bar chart using value from angular function. Then ? – Kalaiyarasi M Jun 06 '16 at 10:23
  • @KalaiyarasiM, I updated the answer. Check the plunker to see if it is close to want you are trying to achieve. – El'Magnifico Jun 06 '16 at 11:15
  • 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 Jun 07 '16 at 06:27
  • " Error: [ng:areq] Argument 'BarController' is not a function, got undefined " – Kalaiyarasi M Jun 07 '16 at 06:47
  • @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 http://stackoverflow.com/a/25895387/4092170 – El'Magnifico Jun 08 '16 at 10:08