Pie-Charts
You might have seen these days a lot of pie-charts, gauges, and doughnuts in either website dashboards or mobile apps. Following are some of the examples just to give you an idea,
Process
In this blog, we will actually build some of these gauges and charts using n3-charts.js.
n3-charts
n3-Charts are built on top of D3.js and AngularJS. It used AngularJS directive and data bindings to display such charts. This directive actually detects the change in data and updates the gauge accordingly.
Use Case – Showing a CPU Performance in a gauge chart
We will be using a very famous example of visualizing CPU performance using pie-charts.js. This CPU performance indicator will be shown as a gauge indicator with % values with the help of this library.
Now let's follow the below steps for our use case.
  1. Create index.html and copy paste below code:
    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5. <title>Pi Chart Samples</title>
    6. <meta charset="utf-8">
    7. <meta name="viewport" content="width=device-width, initial-scale=1">
    8. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    9. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    10. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    11. </head>
    13. <body ng-app="chartapp" ng-controller="MainController">
    14. <div class="container">
    15. <div class="page-header">
    16. <h2>
    17. Pi Chart Samples</h2>
    18. </div>
    19. <div class="row">
    20. <div class="col-lg-4">
    21. <div class="panel panel-default">
    22. <div class="panel-heading">
    23. <span class="glyphicon glyphicon-equalizer"></span>CPU Performance
    24. </div>
    25. <div class="panel-body">
    26. <div style="height: 200px;">
    27. <pie-chart data="data" options="options"></pie-chart>
    28. </div>
    29. </div>
    30. </div>
    31. </div>
    32. </div>
    35. <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
    36. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
    37. <script src="pie-chart.min.js"></script>
    38. <script src="app.js" type="text/javascript"></script>
    39. </body>
    41. </html>
    In above code base, you will notice, references for D3.js, angular.min.js, and pie-chart.js
    As a standard, I am displaying my chart in a bootstrap panel.
    To generate and render pie-chart, the following directive is important,
    1. <pie-chart data="data" options="options"></pie-chart>
  2. Behind this index.html, we have our AngularJS based implementation in our app.js.
    Refer our app.js as below,
    1. var chartapp = angular.module('chartapp', ['n3-pie-chart']);
    2. chartapp.controller('MainController', function($scope) {
    3. $scope.options = {
    4. thickness: 5,
    5. mode: "gauge",
    6. total: 100
    7. };
    8. $scope.data = [{
    9. label: "CPU",
    10. value: 20,
    11. color: "#ff7f0e",
    12. suffix: "%"
    13. }];
    14. //Function added to appear our guage chart as if it is showing data real time.
    15. setInterval(function() {
    16. $scope.data[0].value = parseInt((0.5 + Math.random() * 0.5) * 100);
    17. $scope.$apply();
    18. }, 2000);
    20. });
  3. Open index.html in a browser and see how the gauge indicator is showing CPU performance in a very elegant manner. We also have added a flavor of real-time to this gauge using setInterval().
    CPU Performance
So this way we can visualize our data with such gauges and make it more intuitive along with passing the intended message to users in real-time.