Realtime Data Visualization: Plotly, Firebase & Angular Charts Tutorial

Introduction

In today's data-driven world, visualizing information in real-time is crucial for many applications. This blog post will guide you through combining the power of PlotlyJS, Angular, and Firebase to create dynamic charts that respond to live data. We'll explore building a basic 2D line chart, a 3D topographical chart, and a ternary chart that stays synchronized with a real-time Firebase backend.

1. Setting Up PlotlyJS

The first step is to integrate PlotlyJS into your Angular project. Install the library using npm:

npm install plotly.js --save

Next, include PlotlyJS in the scripts section of your angular.json (formerly angular-cli.json) file. Keep in mind that Plotly is a large library. To reduce your bundle size, consider importing only the specific modules you need from the node_modules directory.

Finally, add the Plotly class to your typings.d.ts file to ensure TypeScript recognizes it.

2. Creating a Static 2D Line Chart

Let's start with a simple, static line chart to understand the fundamentals of Plotly. In your HTML, create a div with a template reference variable:

<div #chart></div>

In your component's TypeScript file, use ViewChild and ElementRef to access the div element. Then, define the data and style for the chart and use Plotly to render it.

The code will look something like this:

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import * as Plotly from 'plotly.js';

@Component({
selector: 'app-line-chart',
template: '<div #chart></div>'
})
export class LineChartComponent implements AfterViewInit {
@ViewChild('chart') el: ElementRef;

ngAfterViewInit() {
const element = this.el.nativeElement;
const data = [{ x: [1, 2, 3, 4, 5], y: [2, 3, 1, 5, 4], type: 'line' }];
const layout = { title: 'Basic Line Chart' };

Plotly.newPlot(element, data, layout);
}
}

This will render a basic line chart with interactive features like zooming and saving as an image.

3. Building a 3D Topographical Chart with Firebase Data

Now, let's create a 3D chart using data from Firebase. First, create a service that uses AngularFire to fetch your dataset as a Firebase list observable. The dataset in the video example consists of arrays representing the elevation of a mountain at various points. Then, in the component, subscribe to this data in ngOnInit. Format the data for a 3D surface chart (setting the data as the z-axis) and apply styling options. Finally, use Plotly.plot to render the chart.

The example in the transcript does a take(1) to only get the first emission, assuming the data won't change in this example. For truly real-time data that updates, you'd omit the take(1).

4. Creating a Real-Time Ternary Chart

The final example demonstrates a chart that updates dynamically based on real-time data. The example uses a ternary chart to visualize user rankings based on abilities as an analyst, designer, and developer. First, add a function to your Firebase service that allows updating data. Then, in your component, subscribe to the data in ngOnInit. Each time new data arrives, purge the existing chart and redraw it with the updated information. The video suggests a button that when clicked will randomize the data in Firebase to trigger an update.

When creating the chart, map each category to an array of values. Then, use Plotly to create the ternary chart with appropriate styling.

Conclusion

This blog post covered using PlotlyJS with Angular and Firebase to create real-time, interactive data visualizations. We explored building a static line chart, a 3D topographical chart from Firebase data, and a real-time ternary chart. By following these steps, you can create powerful and dynamic dashboards for your applications.