AngularJS - How to use datas from model to create graph

Question

how can I use data (in angular 1.5) from the model to get the percentage for each class based on the number of students (count)? With those datas I have to build a donught graph representing for each class the percentage of students compared to the total of school students..

"payload": {
    "Schools": [{
            "Sections": [{
                    "Name": "Class",
                    "Value": "2A"
                }, {
                    "Name": "Count",
                    "Value": 29
                }
            ]
        }, {
            "Sections": [{
                "Name": "Class",
                "Value": "3C",
            }, {
                "Name": "Count",
                "Value": 31

            }]
        }, {
            "Sections": [{
                "Name": "Class",
                "Value": "1B",
            }, {
                "Name": "Count",
                "Value": 27

            }]
        }
    ],
      "masterCategory": "School members",
      "totalStudents": 87
    }
}

my problem is not the graph, my problem is the way to associate each data to the related value.. — Zaits3v
– Zaits3v, Commented Feb 24, 2017 at 22:38
if this is not about graphs, please update your question title, as it's asking how to create a graph in angular. If you need to know how to go from a list of name/value pairs to a list of name/percentage pairs, this is not really an angular question. — tavnab
– tavnab, Commented Feb 24, 2017 at 22:53
In your Sections arrays, will the "Class" element always be first, and the "Count" element always second? — tavnab
– tavnab, Commented Feb 24, 2017 at 22:55
I'm sorry man, I'm new to the angular world.. For your second question the answer is yes! :) — Zaits3v
– Zaits3v, Commented Feb 24, 2017 at 22:59

K Scandrett · Accepted Answer · 2017-02-24 22:50:49Z

2

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
  $scope.records = {
    "Schools": [{
      "Sections": [{
        "Name": "Class",
        "Value": "2A"
      }, {
        "Name": "Count",
        "Value": 29
      }]
    }, {
      "Sections": [{
        "Name": "Class",
        "Value": "3C",
      }, {
        "Name": "Count",
        "Value": 31

      }]
    }, {
      "Sections": [{
        "Name": "Class",
        "Value": "1B",
      }, {
        "Name": "Count",
        "Value": 27

      }]
    }],
    "masterCategory": "School members",
    "totalStudents": 87
  }

});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

  <h1 ng-repeat="x in records.Schools">{{x.Sections[0].Value}} = {{(x.Sections[1].Value/records.totalStudents)*100 | number : 0}}%</h1>

</body>

</html>

edited Feb 24, 2017 at 22:50

K Scandrett

16.6k4 gold badges43 silver badges69 bronze badges

answered Feb 24, 2017 at 22:39

abbas-ak

6423 silver badges13 bronze badges

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

5 Comments

Zaits3v Over a year ago

This is something I wanted! How can I get x.Sections[0].Value and x.Sections[1].Value inside the controller?^^

abbas-ak Over a year ago

angular.forEach($scope.records.Schools, function(value, key) { console.log(value.Sections[0].Value + ': ' + value.Sections[1].Value + ': ' + $scope.records.totalStudents); });

Zaits3v Over a year ago

With those datas I have to build a donught graph representing for each class the percentage of students compared to the total of school students..

abbas-ak Over a year ago

Can u try below d3 js url meanwhile if you need I will try the same: bl.ocks.org/mbostock/3887193

Zaits3v Over a year ago

If you can.. It Will be great :D if you want try shaping it! :)

Collectives™ on Stack Overflow

AngularJS - How to use datas from model to create graph

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related