Implementing real-time data visualization charts
We are living in a world of data, and by visualizing data within our system and enabling interaction and exploration, we enable our users to get a deeper understanding of complex datasets. One of the ways we can achieve this is by using charts. Charts can empower users to uncover hidden patterns and insights within their data.
How to do it…
In this recipe, we will visualize food recipe orders over a period of a year, by subscribing to the WebSocket connection, and observe live changes as data arrives.
Step 1 – Connecting to RxJS WebSocket
In our RecipesService class, we will establish a connection to WebSocket and open a topic for orders data that we can subscribe to:
import { webSocket, WebSocketSubject } from ‘rxjs/webSocket’;
export class RecipesService {
private socket$!: WebSocketSubject<Message>;
public orders$!: Observable<Message>;
constructor() {}
connect(...
