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

Prerequisites

Before starting to write any code, make sure you have the following:

  • Node.js — I use version 13.2.0
  • Angular CLI — I use version 8.3.20
  • 10 minutes of free time

Creating new Angular project

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.

Adding a service layer*

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);
  }
}

Hooking up the Chart.js

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.

Adding HTML template

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

Using Angular and Chart.js to build real-time charts
38.75 GEEK