Ishan Bagchi for Byte-Sized News

Posted on Nov 8

Real-Time Chart Updates: Using WebSockets To Build Live Dashboards

#javascript #programming #webdev #react

Imagine you're glued to your laptop, watching the final seconds of a live auction. Bids shoot up every second. You're sweating, hovering over the button, waiting for the latest price. But instead of seeing updates instantly, you keep smashing refresh like it's 2007. By the time the price changes, someone else has already won.

That used to be the reality of real-time data on the web.

Before WebSockets, the browser had one way to stay updated: keep asking the server every few seconds. Polling. It worked, but barely. It was wasteful, slow, and honestly, a little embarrassing for the modern web.

Then WebSockets showed up in 2011 and flipped the script. A persistent connection. Two-way communication. Real-time data without spammy refresh loops. Suddenly the web could behave more like a trading terminal and less like a fax machine.

If you're building dashboards, analytics tools, gaming UIs, IoT displays, or anything that needs to update the moment data changes, WebSockets become your best friend.

Let’s walk through how this works and how you can get started.

Why Real-Time Matters

A dashboard that updates once every 10 seconds isn’t a dashboard — it’s a slideshow.

The modern expectation is instant feedback. Crypto charts moving by the millisecond. Social analytics ticking up in real time. Live order books, multiplayer game states, collaborative editors… the web feels alive now.

To keep up, we need tech that streams information continuously, not drip-feeds it through constant HTTP requests.

That’s where WebSockets shine. You open one connection and keep it open. No more “Hey server, any updates? No? Okay see you in 3 seconds.”

How WebSockets Actually Work

The simplest way to explain it:

Browser knocks on server’s door saying: “Let’s stay connected.”
Server agrees.
Now both can talk whenever they want — no repeated knocking.

It’s basically a WhatsApp call between client and server instead of sending texts every few seconds asking “You there?”

A Tiny Example

Let's keep this simple and build the smallest real-time setup we can — no frameworks, no fancy tooling. Just a server sending numbers and a browser receiving them. Once you see the basic flow, scaling it up becomes way less intimidating.

Backend (Node.js)

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', socket => {
  console.log('Client connected');

  setInterval(() => {
    const price = (Math.random() * 100).toFixed(2);
    socket.send(JSON.stringify({ price }));
  }, 1000);
});

Frontend

const socket = new WebSocket('ws://localhost:8080');

socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  updateChart(data.price);
};

Cool, so now we've got a data stream. Next question — what do we do with it? Most of the time, we’re not printing raw numbers to the console… we’re visualizing them.

Updating Charts in Real-Time

Now comes the fun part — charts.

Libraries like:

Chart.js
Highcharts
Plotly
Recharts (if you're working in React)
Apache ECharts

All support dynamic updates.

Example using Chart.js:

function updateChart(price) {
  myChart.data.labels.push(Date.now());
  myChart.data.datasets[0].data.push(price);

  if (myChart.data.labels.length > 100) {
    myChart.data.labels.shift();
    myChart.data.datasets[0].data.shift();
  }

  myChart.update('none');
}

A couple of pro tips you’ll thank yourself for later:

Trim old data — browsers don't love 10,000 live points sitting around.
Skip animations for real-time speed.
Sync with requestAnimationFrame if updates are rapid.

But What Happens When The Connection Drops?

Because it will drop. Networks aren't perfect, servers restart, people switch Wi-Fi.

Reconnect logic saves you here:

function connect() {
  const socket = new WebSocket('ws://localhost:8080');

  socket.onclose = () => {
    console.log('Disconnected. Reconnecting...');
    setTimeout(connect, 2000);
  };

  socket.onerror = () => socket.close();
}

connect();

Silent recovery = happy users.

Security Matters Too

A persistent connection means persistent risks if you're careless. Keep things safe:

Use wss:// instead of ws://
Validate tokens before opening a socket
Sanitize incoming messages (browser can receive data too!)
Disconnect inactive or abusive clients
Never trust client input — ever

WebSockets give power. Power attracts trouble.

Optimizing Data Flow

Real-time doesn’t mean “blast the browser 1000 times a second”. Be thoughtful:

Send only changes, not entire data dumps
Consider binary formats like Protocol Buffers, MessagePack, FlatBuffers
Compress where it makes sense
Batch updates if single-tick precision isn’t needed

Real-time is more about perception than raw throughput.

If a user can't tell the difference between 50 updates/second and 5 updates/second, choose 5.

Less noise, more clarity.

Wrapping Up

WebSockets took the web from “refresh to see updates” to “updates arrive before you blink”. With a small learning curve and a massive payoff, they're one of those tools every modern developer should have in their kit.

The moment you see your first chart move in real time without a refresh, it's hard to go back.

Build something live. Stream something. Turn data into motion. It's a little addictive — in a good way.

DEV Community