How to setup a AngularJS NVD3 Graph

Mandy van Zetten
15-01-2018

What is NVD3?

NVD3 is a library/Extention for AngularJS to simplify the life of a developer who is required to make graphs. The library is a re-used version of NVD3 made for AngularJS which is based on D3 which we all know is difficult to configure.

How to set up NVD3.

First you need the NPM install command

npm install angular-nvd3

After you have downloaded the package you need to inject the package into your AngularJS code.

angular.module('myApp', ['nvd3'])
    .controller('myCtrl', function($scope){
        $scope.options = { /* JSON data */ };
        $scope.data = { /* JSON data */ }
    })

After the code is injected we can show it in our HTML

Once injected we can start molding the graph to our own preference, like do we want a bar or line graph, what color do we want it etc.
We do this by adding the options first like so:

angular.module('myApp', ['nvd3'])
    .controller('myCtrl', function($scope){
        $scope.options = { 
            "chart": {
                "type": "multiBarChart",
                "height": 450,
                "margin": {
                    "top": 20,
                    "right": 20,
                    "bottom": 45,
                    "left": 45
                },
                "clipEdge": true,
                "duration": 500,
                "stacked": true,
                "xAxis": {
                    "axisLabel": "X Axis",
                    "showMaxMin": false
                },
                "yAxis": {
                    "axisLabel": "Y Axis",
                    "axisLabelDistance": -20
                }
              }
           }
        };
        $scope.data = { /* JSON data */ }
    })

Here we have added options to the chart so it knows how to act once there is data added.
We have said that we want a ‘multiBarChart’ which means it will become a bar graph, we added a height and margin to tell the graph how much space it has.

Now that we have set up our graph we are going to add some Data to process.

        };
        $scope.data = generateData();

        function generateData() {
          var values = [];
          var values0 =[];
          var values1 = [];
          //change number of bars here by editing '90'//
          for (var h=0; h<90; h++) {
            //replace the y values with your own values//
            values.push({x: h, y: Math.random()+1});
            values0.push({x: h, y: Math.sqrt(h)/2});
            values1.push({x: h, y: Math.abs(h-18)})
          }

        return [{
          key: 'Sent',
          color: '#bcbd22',
          values: values
          },
          {
            key: 'Received',
            color: '#1f77b4',
            values: values0
          },
          {
            key: 'Spam',
            color: 'black',
            values: values1
          }
        ];
        }
    })

In the data you see I have added the key, color and value and that is basically all you need data wise to make your graph.

LEAVE A REPLY

you might also like