Angular and Chart.js is popular combination when creating any data visualization application. The first one can handle a very large throughput of data and the later is capable of rendering the plots in real-time, thanks to Canvas API. In this post I will guide you through the process of creating a real-time chart using Angular and Chart.js
Before starting to write any code, make sure you have the following:
The first step required is to create a new Angular project. As mentioned in prerequisites, I am using Angular CLI to do so and I highly advise you to do the same. Open a terminal window, navigate to desired directory and execute the command:
ng new angular-charts --routing=true --styling=scss
This command creates a new Angular project called angular-charts in directory of the same name. Additionally, I have added two optional flags — routing
adds the router module to the app and styling
sets the extensions of style sheets used.
With the project created, open it up in your IDE of choice — I will be using Visual Studio Code for this.
The next step of this tutorial is to add a service layer. I have marked this step with asterisk, because it is optional. If you already have one, or you don’t need one, then feel free to skip this section.
Let’s start this section with generating a service that will give access to real-time data source using Observable
. To generate a service, use the following command:
ng generate service sse
After executing the command, and SseService
gets created and that’s where the service layer code will be placed. For this tutorial I am using SSE or Server Sent Events data source, tutorial on which you can find here. If you need more explanation, don’t hesitate to read that tutorial. To avoid repetition in this post, I will just paste in the following:
import { Injectable, NgZone } from "@angular/core";
import { Observable } from "rxjs";
@Injectable({
providedIn: "root"
})
export class SseService {
constructor(private _zone: NgZone) {}
getServerSentEvent(url: string): Observable<any> {
return Observable.create(observer => {
const eventSource = this.getEventSource(url);
eventSource.onmessage = event => {
this._zone.run(() => {
observer.next(event);
});
};
eventSource.onerror = error => {
this._zone.run(() => {
observer.error(error);
});
};
});
}
private getEventSource(url: string): EventSource {
return new EventSource(url);
}
}
The next step is to hook in Chart.js library into our Angular project. There are couple ways to do so, but I will use a dedicated package, called Ng2-Charts. This package exposes a much nicer API while retaining all the required functionality. In my case, I add the following dependencies to my package.json
file:
"chart.js": "^2.9.3",
"ng2-charts": "^2.3.0",
After modifying the package.json
file, don’t forget to run either npm install
or yarn
depending on your package manager.
Going further, we have to add an HTML template that will render the chart. In the case of this tutorial, you can place it anywhere you fancy — the code is single HTML tag with custom properties which we will explore in next step. I place it in a component HTML template called count-events.component.html
. The HTML template should include the following:
<canvas
width="600"
height="400"
[datasets]="countEventsData"
[chartType]="countEventsChartType"
[labels]="countEventsLabels"
[colors]="countEventsColors"
[options]="countEventsOptions"
></canvas>
I have placed my chart is count-events folder, therefore all variables are prepended with those. In the canvas
tag we specify height, width and variable configuration, which will be placed in corresponding .ts
file.
#typescript #charts #angular #frontend #javascript