In this tutorial, we will show you how to visualize real-time updates using RxJs Websocket and the official Highcharts Angular wrapper. You can access the entire project by clicking on this GitHub link.
Remark
In this article, random data are used to update the chart. There is no implementation of server-side code.
There are two main parts to create this project:
The first part is to set up an Angular project. For that, follow the standard instructions in this Angular guideline: setting up the local environment and workspace.
The second part is to set up an Angular project with RxJsWebSocket and Highcharts by going through these three simple steps:
Step 1
As we will use the default protocol WSS(WebSocket protocol), the first step in the configuration project is to import the WebSocket import {webSocket}
from the rxjs/webSocket
package.
By the way, if you are not familiar with WSS, here is a short explanation of what happens when there is a subscription to a socket:
The rxjs pipe is a method that is used for composing operators. The Emitted values, that are received on subscription, are simply pushed in an array and assigned to data property, which is part of chartoption
, in app.component.ts
.
import { Component, OnInit } from '@angular/core'; import * as Highcharts from 'highcharts'; import { webSocket } from 'rxjs/webSocket'; import { of , Subscription } from 'rxjs'; import { concatMap, delay } from 'rxjs/operators'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'Angular-RxJsWebSocket-HighCharts'; rate: any; rate$: Subscription; Highcharts: typeof Highcharts = Highcharts; chardata: any[] = []; chartOptions: any; subject = webSocket('wss://ws.coincap.io/prices?assets=bitcoin') ngOnInit() { this.rate = this.subject.pipe( concatMap(item => of (item).pipe(delay(1000))) ).subscribe(data => { this.rate = data; this.chardata.push(Number(this.rate.bitcoin)) this.chartOptions = { series: [{ data: this.chardata, }, ], chart: { type: "line", zoomType: 'x' }, title: { text: "linechart", }, }; }) } }
Step 2
Once the project configuration is done; we have to access the Highcharts library to visualize the data update. To achieve that, we have to include the official Highcharts Angular wrapper (highcharts-angular
), then import the Highcarts module:
- To install
highcharts-angular
and the Highcharts library, just run the following instruction:npm install highcharts-angular highcharts
. - To import the package go to
app.module.ts
file, and import the moduleHighchartsChartModule
from thehighcharts-angular
package.
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HighchartsChartModule } from 'highcharts-angular'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, HighchartsChartModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {}
Step 3
The last step is to initialize the chart data and options by adding the highcharts-chart
directive and some property binding into app.component.html
:
<highcharts-chart *ngIf="chartOptions" [Highcharts]="Highcharts" [options]="chartOptions" style="width: 100%; height: 400px; display: block;" ></highcharts-chart>
And here is the final result:
As you can see on the GIF below, the line chart gets the WebSocket URL data once the connection is made. Whenever a new message comes from the server, WebSocketSubject will emit that message a value in the stream the chart’s data is updated and displayed.
Feel free to share your experience with Live data using RxJs WebSocket, HighCharts, and Angular in the comment section below.
Comments
Alex Rey | 2 years ago
Excellent tutorial. My graph is updated every time a new tweet appears. Thanks
Want to leave a comment?
Comments are moderated. They will publish only if they add to the discussion in a constructive way. Please be polite.