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:
- <!DOCTYPE html>
- <html lang="en">
-
- <head>
- <title>Pi Chart Samples</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
- </head>
-
- <body ng-app="chartapp" ng-controller="MainController">
- <div class="container">
- <div class="page-header">
- <h2>
- Pi Chart Samples</h2>
- </div>
- <div class="row">
- <div class="col-lg-4">
- <div class="panel panel-default">
- <div class="panel-heading">
- <span class="glyphicon glyphicon-equalizer"></span>CPU Performance
- </div>
- <div class="panel-body">
- <div style="height: 200px;">
- <pie-chart data="data" options="options"></pie-chart>
- </div>
- </div>
- </div>
- </div>
- </div>
-
-
- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
- <script src="pie-chart.min.js"></script>
- <script src="app.js" type="text/javascript"></script>
- </body>
-
- </html>
As a standard, I am displaying my chart in a bootstrap panel.
To generate and render pie-chart, the following directive is important,
- <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,
- var chartapp = angular.module('chartapp', ['n3-pie-chart']);
- chartapp.controller('MainController', function($scope) {
- $scope.options = {
- thickness: 5,
- mode: "gauge",
- total: 100
- };
- $scope.data = [{
- label: "CPU",
- value: 20,
- color: "#ff7f0e",
- suffix: "%"
- }];
-
- setInterval(function() {
- $scope.data[0].value = parseInt((0.5 + Math.random() * 0.5) * 100);
- $scope.$apply();
- }, 2000);
-
- });
- 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().
![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 at real time.