Angular 14 – Real-time analytics and monitoring

Real-time analytics and monitoring are becoming increasingly important in today’s fast-paced business environment. With the ability to track and analyze data in real-time, companies can make more informed decisions, improve their operations, and provide better customer experiences.

In this tutorial, we will explore the process of building an advanced real-time analytics and monitoring system in an Angular application using a combination of technologies such as Socket.io, Chart.js and Angular-Google-Charts.

To follow along with this tutorial, you will need the following:

• A basic understanding of data analytics and monitoring
• Familiarity with Angular, Socket.io and Chart.js
• A code editor (Visual Studio Code is recommended)

Setting up the environment

To begin, we will set up the environment by creating a new Angular application using the Angular CLI.

ng new analytics-app

This command will create a new Angular application in a directory called “analytics-app”.

Next, we will install the Socket.io and Chart.js library using npm.

npm install socket.io-client chart.js

Collecting and Streaming Data

Once the environment is set up, we can start collecting and streaming data. In this example, we will be streaming data from a mock server, but in real-world scenarios, the data could be coming from various sources such as IoT devices, mobile apps, or social media platforms.

To collect and stream data, we will use the Socket.io library, which allows us to easily connect to a server and receive real-time data updates.

First, we will create a new service that will handle the Socket.io connection and data streaming.

ng generate service socket

This command will create a new service called “SocketService” in the “src/app” directory.

Open the src/app/socket.service.ts file and import the Socket.io library.

import { Injectable } from '@angular/core';
import * as io from 'socket.io-client';

@Injectable({
  providedIn: 'root'
})
export class SocketService {
  private socket;

  constructor() { }

  setupSocketConnection() {
    this.socket = io('http://localhost:3000');
  }

  getData() {
    this.socket.on('data', (data) => {
      console.log(data);
    });
  }
}

In this example, the setupSocketConnection() method is used to connect to the server and the getData() method is used to listen for data updates.

In order to use this service in your component, you need to import the service in the component and create an instance of the service in the constructor of the component.

import { SocketService } from './socket.service';

export class AppComponent {
    constructor(private socketService: SocketService) {
        this.socketService.setupSocketConnection();
        this.socketService.getData();
    }
}

Displaying Data

Once the data is collected and streamed, we can display it in real-time using the Chart.js library.

First, we need to install the Angular-Google-Charts library by running the following command:

npm install @agm/core

Then, we need to import the library in the src/app/app.module.ts file.

import { GoogleChartsModule } from 'angular-google-charts';

@NgModule({
  imports: [
    GoogleChartsModule.forRoot()
  ],
  ...
})
export class AppModule { }

Next, in the analytics component, we will create a variable that will hold the data and options for the chart.

chartData = [    ['Year', 'Sales', 'Expenses'],
    ['2004', 1000, 400],
    ['2005', 1170, 460],
    ['2006', 660, 1120],
    ['2007', 1030, 540]
  ];
  chartOptions = {
    title: 'Company Performance',
    curveType: 'function',
    legend: { position: 'bottom' }
  };

Finally, in the template of the analytics component, we will use the google-chart component to display the data.

<google-chart [data]="chartData" [options]="chartOptions"></google-chart>

In this example, we have used a simple data and options for demonstration purpose, but in real-world scenarios, you can use the data received from the server to dynamically update the chart and present the data in a meaningful way.

Conclusion

In this tutorial, we have learned how to create an advanced real-time analytics and monitoring system in an Angular application using a combination of technologies such as Socket.io, Angular-Google-Charts.

The example provided is a basic implementation of how to display the data in a real-time using the Angular-Google-Charts library, but the possibilities are endless, you can use this to create a more sophisticated and meaningful visual representation of the data received. Additionally, this system can be used in various fields such as e-commerce, finance, and many more.