Real Time Linux Server Monitoring with Node.js and D3.js

Real Time Linux Server Monitoring with Node.js and D3.js

In this article I will describe how you can visualize the real time Memory and CPU usage of a Linux Server using and D3.js gauges.

Before we dive into the code, here is a little background on the Technology. is a javascript library that uses Sockets for fast real time communication. With you can create Server and  Client side sockets that will listen for events and transmit JSON formatted Data. In this tutorial we will use it for transmitting Linux Server Resource Usage data.

D3.js is a client side javascript library that allows you to visualize data with SVG (Scalable Vector Graphics) a text-based image format. With SVG you can specify what an image should look like by writing simple markup code, For example to draw a circle with SVG you can do so with the following code:

Example of the same Circle using D3.js

// Index.html


With D3.js we will visualize the Linux Resource Usage using Google Style Gauges as seen in the image above.

Getting Started
To get started install Node.js and on your Linux Server.
Note: These steps are for Ubuntu 14.04 and 1.4.5

wget -qO- | sudo bash -
sudo apt-get install -y nodejs
npm install --save

Creating sockets with allows you to create sockets with custom events and data. In the example code below I have created  Two custom events “total” and “server”. When a Socket request comes in these events will send the current CPU and Memory usage in Percentage and GB respectively.

var http = require('http').Server();
var io = require('')(http);
var os = require('os');
var cpu = require('./cpu.js');

// Listen for incoming socket requests on the special “connection” event
io.on('connection', function(socket){

// Log to console when a user is connected

  console.log('a user connected');

  // Create the “total” event”  and send the total memory data
     socket.on('total', function(){        

                var data = {'totalMemory':os.totalmem()};
                 io.emit('total', data);


   // Create a “server” event and emit real time cpu and memory usage
     socket.on('server', function(){

        cpu().then(function(cpuPercentage) {            

                var data = {'freeMemory':os.freemem(), 'cpu':cpuPercentage};
                 io.emit('server', data);



http.listen(443, function(){
  console.log('listening on *:443');


To calculate the current CPU usage Percentage you will need to Subtract the CPU idle time from the Total CPU time for a particular interval and then convert it into a percentage. I have added this code in a separate file called CPU.js and then imported. The code for CPU.js is as follows:

// Explanation at

var os = require("os");

//Create function to get CPU information
function cpuAverage() {

  //Initialise sum of idle and time of cores and fetch CPU info
  var totalIdle = 0, totalTick = 0;
  var cpus = os.cpus();


    //Total up the idle time of the core
    totalIdle += cpu.times.idle;

  //Return the average Idle and Tick times
  return {idle: totalIdle / cpus.length,  total: totalTick / cpus.length};

//Grab first CPU Measure
var startMeasure = cpuAverage();

module.exports = function () {

    var promise = new Promise(function (resolve, reject) { 

//Set delay for second Measure
 setTimeout(function() { 

  //Grab second Measure
  var endMeasure = cpuAverage(); 

  //Calculate the difference in idle and total time between the measures
  var idleDifference = endMeasure.idle - startMeasure.idle;
  var totalDifference = -;

  //Calculate the average percentage CPU usage
  var percentageCPU = 100 - ~~(100 * idleDifference / totalDifference);


  //Output result to console
 // console.log(percentageCPU + "%");

}, 100);


return promise;

// complete code at

Note: Besides connect, message and disconnect, you can emit any custom events

D3.js Gauges
You will need to use a web framework to serve D3.js and HTML code. For this tutorial I have used Express.js for it’s ease of use. You will need to modify the index.js file with the following code after installing express.js.

npm install --save express@4.10.2

// Serving a single web page with Express
// index.js

var express = require('express');
var app = require('express')();
var http = require('http').Server(app);

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');

http.listen(5001, function(){
  console.log('listening on *:5001');



Linux Resource Monitor

On starting the server with the command “ node index.js” you should see a page with the header “Linux Resource Usage” at http://localhost:5001.

Google Style Gauges
Tomer Doron has already made available a nice example of Google Style Gauges at I am going to tweak his example to serve real time Linux and Memory usage.

// main.js
// Initialize a socket
var socket = io();
var gauges = [];

function createGauge(name, label, min, max)	{

    var config = {
					size: 220,
					label: label,
					min: undefined != min ? min : 0,
					max: undefined != max ? max : 100,
					minorTicks: 5

				var range = config.max - config.min;
				config.yellowZones = [{ from: config.min + range*0.75, to: config.min + range*0.9 }];
				config.redZones = [{ from: config.min + range*0.9, to: config.max }];

				gauges[name] = new Gauge(name + "GaugeContainer", config);

function createGauges()

        // Get the Total Memory and Create the Memory Gauge      

        socket.emit('total', {});   

        socket.on('total', function(data){

            createGauge("memory", "Memory", 0, Math.round(data.totalMemory/(1024*1024*1024)));            


		// Create the CPU gauge with the default range
		createGauge("cpu", "CPU");


function updateGauges()	{

             socket.emit('server', {});

             socket.on('server', function(data){            

             var freeMemory = data.freeMemory/(1024*1024*1024);                   

             var usedMemory = 2 - freeMemory.toFixed(2);


             var cpuPercentage = data.cpu;

             for (var key in gauges)

                   if (key == "memory") {


					} else {

                    gauges[key].redraw(cpuPercentage); }



			 // Create the Gauges and Update them every 5 seconds
			function initialize()

				setInterval(updateGauges, 5000);
// Index.html

    Linux  Resource Monitor

Refresh the Page and You should see the Memory and CPU gauges.Linux Memory Visual with D3.js and


Video of the working app.

Complete code is available at

In depth guides on Linux Memory and CPU resource calculation are available at:

Troubleshooting Linux Memory Usage

How Linux CPU usage is calculated
Ref :

Follow me

Leo G

Is a Linux Hobbyist and Enthusiast. He Strongly believes in OpenSource Software and would like you to view and download his software at
Follow me