Pie Charts Using JavaScript

Madan Bhintade
8y
6.3k
0
1

Blog

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 guage 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 below steps for our use case.

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>
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. });
Open index.html in browser and see how 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().