Real-Time Data Visualization Using Vue and Socket.io

The need for real-time applications cannot be over-emphasized. Real-time features can be applied on social media applications that need to update all connected users with new data all at once, on data visualization applications, on communication channels and so on.

Going real-time is about sending and updating data as fast as possible in an automated, synchronous and bi-directional manner. It communicates between endpoints and updates data at a speed almost unnoticeable by the user.

Developers are always in search of ways to better automate this process; this search gave rise to technologies like Pusher, PubNub and the likes; however, we’ll use Socket.io for the scope of this topic.

Create a Vue Project

First we have to create a Vue.js project with which we can demonstrate the implementation of our task scheduler. Without further ado, open a terminal window on your preferred directory and run the command below:

 vue create realtime-chart

If you don’t have Vue CLI installed globally, please follow this guide to do so and come back to continue with this lesson afterwards.

When you’re done bootstrapping your Vue application, change into the new Vue application directory and start the development server.

 cd realtime-chart
 npm run serve

This will serve your Vue application on localhost:8080. You can navigate to it on your browser and you should see your Vue application running.

Set up Node Server

Next, let’s set up our custom Node server. The logic behind our implementation is straightforward. We listen on an open connection on the server which sends us new values every 5 seconds. We then use these values to update the stock chart on the client.

Install dependencies
We need to install some dependencies for the packages we’ll need both for our server and the client. Open a terminal window in the projects root directory and run the commands below:

npm install --save chart.js express socket.io socket.io-client vue-chartjs

At this point your dependencies block in your package.json file should look exactly like this:

"dependencies": {
	"chart.js": "^2.8.0",
	"express": "^4.16.4",
	"socket.io": "^2.2.0",
	"socket.io-client": "^2.2.0",
	"vue": "^2.6.6",
	"vue-chartjs": "^3.4.0"
}

Now, create a server.js file in the project’s root directory and update it with the code below:

//server.js
    
const express = require("express");
const app = express();
const port = 4000;
const io = require("socket.io")(server);
    
const server = app.listen(`${port}`, function() {
  console.log(`Server started on port ${port}`);
});
    
function getRandomValue(){
    return Math.floor(Math.random() * (50 - 5 + 1)) + 5;
}
io.on("connection", socket => {
    setInterval(() => {
        socket.broadcast.emit("newdata", getRandomValue())
    }, 5000)
});

Here, we define a getRandomValue() function that returns a random integer. Then we open a Socket.io connection and emit a newdata event with the random integer we generated from the getRandomValue() function every 5 seconds. On the client, all we have to do is listen for this event and update our chart with these values.

Set up Chart on the Client

For data visualization on the client, we’ll use the Chart.js library. It lets you use charts without much hassle inside Vue. It’s perfect for people who need to get simple charts up and running as fast as possible. It abstracts the basic logic but exposes the Chart.js object to give you maximal flexibility.

Open the App.vue file in your project’s src directory and update it with the code below:

<template>
  <div class="small">
    <line-chart :chart-data="datacollection" id="mychart"></line-chart>
  </div>
</template>
    
<script>
import LineChart from "../LineChart.js";
import io from "socket.io-client";
var socket = io.connect("http://localhost:4000");
    
export default {
  components: {
    LineChart
  },
  data() {
    return {
      datacollection: null
    };
  },
  created() {
    this.getRealtimeData()
  },
  methods: {
    fillData(fetchedData) {
      this.datacollection = {
        labels: [this.getRandomChartValues(fetchedData), this.getRandomChartValues(fetchedData)],
        datasets: [
          {
            label: "Google Stock",
            backgroundColor: "#1A73E8",
            data: [this.getRandomChartValues(fetchedData), this.getRandomChartValues(fetchedData)]
          },
          {
            label: "Microsoft Stock",
            backgroundColor: "#2b7518",
            data: [this.getRandomChartValues(fetchedData), this.getRandomChartValues(fetchedData)]          }
        ]
      };
    },
    getRealtimeData() {
      socket.on("newdata", fetchedData => {
        this.fillData(fetchedData) 
      })
    },
    getRandomChartValues(number){
      return Math.floor(Math.random() * number)
    }
  }
};
</script>
<style>
.small {
  max-width: 600px;
  margin: 150px auto;
}
</style>

Here, we imported the LineChart component from a LineChart.js file which we have yet to create. We’ll use this component to customize the behavior of our chart. We then imported the Socket.io client library to maintain communication with our server.

In the applications methods object, we defined a fillData() method that will help us populate our chart with the data fetched from the server. Since we need different sets of values for different parts of the chart, we defined a getRandomChartValues() function that takes in the value we fetched from the server and multiplies it with a random number. This way, we can have different values for all the different parts of our charts.

In the getRealtimeData() method, we listen for the newdata socket event from the server, once received, we call the fillData() method with the fetchedData to populate our chart’s datacollection object.

You may have noticed that we imported a LineChart component from a file we’ve not created yet - let’s create it now. In the project’s root directory, create a new file LineChart.js and update it with the code below:

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
    
export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

Testing the Application

Now we are all set to try out our application. You can run the server in a separate terminal window in the projects root directory with:

node server
OR
nodemon server // if you have nodemon installed globally

Your Vue app is already running on localhost:8080 on the browser. Navigate to it and watch how the stock data updates with different values in real-time.

Conclusion

In this post, we have demonstrated how to implement real-time data visualization with Socket.io and Vue.js using the Chart.js library. There’s a lot more you can do with this application, you can extend this feature to work with real-time data APIs to monitor stock exchange rates and so on. Feel free to look up documentation on Socket.io, Vue.js and Chart.js to know more.