How To Visualize Real-Time Data [creating charts using Socket.io]

visualize real time data with Socket.io

There’s no doubt that we live in a world where immediacy is essential, experiences are defined by the ‘right here, right now.

As a result, our reaction to any event is – “Are we getting this in real time?” From wildfires raging across California to Keisha’s stellar Grammy performance, or your next Facebook update – today, ‘real-time’ commands value like nothing else.

Real-time data is information that is delivered immediately after collection, with zero (or near-zero) lag. Imagine a live sports broadcast – you’ve bet 50 bucks based on how they’re playing because you were equipped with the data in real time.

This information on the day after the match would be useless.

The same theory applies to stock markets, crisis response scenarios, infrastructure maintenance, and more. The possibilities are limitless, making real-time data the new oil for modern businesses.

So how do we access data and interact with it, in real time?

Via real-time charts. Also called data-streaming charts (because these are almost like live video feeds), they are automatically updated after every ‘n’ seconds. No page refreshes are required, and the new data is fetched straight from the server.

Whenever the user looks at the chart, he has access to the latest and most relevant information.

Data flows into real-time charts via WebSockets.
An internet communication protocol that lets the client and the server talk to each other in real time, this keeps data moving both ways (in other words persistent connection).

Because the server can also fetch information from the client, you could also set up an event-based system. The server and the client can both react to triggers received on the connection.

Socket.IO is a utility built on WebSocket that makes it easy to integrate real-time information into Node.js applications (linking server-side data to the client).

Here’s how it works:

Socket.IO uses Node.js’ asynchronous and event-based approaches. You could listen to a connection event, fire up a function when a new user connects to the server, emit a message (primarily an event) over a socket, and much more.

Countless companies and developers use it. It found its way into instant messaging, real-time analytics and monitoring, streaming platforms and document collaboration. From Slack to Snapchat, and Fox TV, you name it and Socket.IO is probably powering it.

So how do we create a real-time chart using Socket.IO?

Let’s dive in – in this tutorial, we’re using PubNub as our data source. This is a global Data Stream Network and Infrastructure-as-a-Service company that pioneers in real-time technologies.

They use a Publish/Subscribe model for real-time data streaming and device signaling. As a result, you can establish and maintain persistent socket connections to any device and also push data to global audiences in less than ¼ of a second.

There are 3 steps you’d need to perform:

  • First, we incorporate all the requisite components – Socket.IO, PubNub, FusionCharts, Webpack, and Nodemon.
  • Then, we create all the files required.
  • Finally, we start the server to render the chart.

Note: A basic knowledge of HTML, JavaScript, and Node.js would be helpful.

Part 1

1. Socket.IO: Socket.IO will work with a web server that we’ll build using Express.
To start developing with Socket.IO, you need to have Node and npm (node package manager) installed.
Open your terminal and enter the following commands to create a new folder:
mkdir test-project

Navigate to the project folder ( cd test-project) and type the following command in the terminal:
npm init

It will ask you some questions about your project; answer them accordingly.

This will create a package.json configuration file. Now, we need to install Express and Socket.IO. To install these and save them to package.json file, enter the following command in your terminal, into the project directory:
npm install --save express socket.io

2. PubNub: For creating a real-time chart we will fetch data from PubNub. Install PubNub via npm, using the command given below:
npm install --save pubnub

3. FusionCharts: Now it’s time to install FusionCharts using the following command:
npm install --save fusioncharts

4. Webpack: Currently the FusionCharts library is not ES6 compatible so we will use webpack to bundle the file. So first we will install the webpack using the following command:
npm install --save webpack

To fulfill our motive behind using the webpack, we need to add the line shown below in our package.json inside the scripts:
"bundle": "webpack src/src.js dist/bundle.js"

The above line will bundle the JS file present inside the src folder and will create a bundle.js file inside the dist folder.

Now, make sure that the code inside package.json looks like the code shown below:

The installation part of creating real-time charts using Socket.IO ends here.

Part 2

Now, create a file called app.js and enter the following code to set up an Express application along with Socket.IO:

(The tutorial uses data from PubNub to illustrate real-time market orders. Click here to learn how you can use PubNub with Node.js.)

We need an index.html file to serve. Create a new file called index.html and enter the following code in it:

As you can see in above code, apart from socket.io.js we have included another file named bundle.js.

We also need one more js file to make sure that the HTML file doesn’t become bulky – so we have created a file named src.js.

Using webpack, we have bundled that src.js file with the following command:
npm run bundle

This results in the bundle.js file inside a dist folder.

The above process is required to render FusionChart using Node.JS.

Below is the code written inside the src.js file:

The coding part of the process ends here.

Part 3

Now we will start our server using the following command:
node app.js

Now, check the url http://localhost:3000/. A beautiful real-time chart will be rendered on the screen, as shown below:

If you find any errors in your code or have trouble executing the above sample, click here to download the complete source code of the sample project we have created for this tutorial.

Leave a Comment