How To Build Realtime Charts With JavaScript and WebSocket

Build a live chart using WebSockets in Javascript and NodeJS.

Welcome to another PieSocket tutorial, today we are going to build a live chart using WebSockets in Javascript.

Following is how the graph will look

Realtime Graph Using WebSocket in Javascript

There will be backend server needed for this and we will use NodeJS, you can use almost any programming language for the backend and the process remains almost the same.

We will use PieSocket Channels – a managed WebSocket SDK, which makes it easy to build and scale realtime applications. If you choose to use some other programming language than Node for the backend, for example PHP. Have a look at PieSocket Docs, and replace the backend code for publishing the graph data.

Lets begin by creating an empty direcotory

Create another directory inside it, lets call it public.

Create a file, index.html inside public directory. This will be the file where we place our Javascript code for frontend.

Look into the head section of index.html, notice we have included two JavaScript libraries, ChartJS and PieSocketJS.

ChartJS

ChartJS is a beautiful graphing library for JavaScript. It can be used with ReactJS, VueJS, AngularJS and almost any Javascript frontend library to create beautiful realtime graphs.

PieSocketJS

PieSocketJS is client-side SDK provided by PieSocket, it is used to build serverless realtime applications.

We can now proceed to add a static chart into our frontend file. Add the following code snippet into body of the index.html file.

This will add a static chart to our frontend. No worries if the configurations in the script do not make sense, you can refer to ChartJS docs later and figure them out as needed. For now just copy and paste the give code.

To check the results of the html file and see how the frontend looks, you can open it within a browser by right clicking on it.

We finish the frontend part of the code by adding following code snippet into the script tag of the index.html file.

There are two parts in the code we pasted above. The first part initialises PieSocket javascript client library with a demo API key, taken from this websocket tester. You should replace the API key with your own API key from PieSocket.

Next part of the code subscribes to a Channel “piesocket-realtime-chart” and once the subscription in ready, it registers a callback which will be triggered everytime an event named “chart-data” is published from the backend. This is where we update the chart.

With this our frontend code is ready and we can proceed to create the backend code which will publish updated chart data every second to make our chart dynamic.

Initialise node into the directory realtime-charts by running

Complete the prompt that follow and once its done, install following dependencies.

Express is a lightweight node web-server. PieSocket-NodeJS is the server-side SDK for PieSocket Channels.

We have installed all we need, its time to write the backend code. Create a file server.js into the same directory and add following code to it.

This creates a express web-server which will run on port 3000 and server static files from the public directory we created earlier.

Include PieSocket-NodeJS into your project by adding the following at the very top of server.js

Remember to replace the demo API key and secret with your own.

Next, we will add the code responsible for publishing chart-data every second to the frontend.

Add the following code to the bottom of server.js

The complete server.js file should look like this

Run the server.js code

Open http://localhost:3000/ in your browser and you should see a beautiful, magical realtime graph dancing for you. You can change the type of chart, add whatever data you would like to it. See ChartJS documentation to learn more about how to customise your chart.

This project is available on Github: https://github.com/piesocket/realtime-charts-javascript

Thanks for reading, hope it helps, leave a comment if you liked this tutorial.