` element. As you can see, you created a local reference for the div element (`#chart`). You will use this reference in your component class while configuring D3.
This component will not use the `MarketStatusService` to fetch data. Instead, it will accept the data as input. The goal of this approach is to make the `market-chart` component reusable. For this, the component will have an `Input` field and the value to this field will be passed from the `app-root` component. The component will use the `ngOnChanges` lifecycle hook to render the chart whenever there is a change in the data. It will also use the `OnPush` change detection strategy to ensure that the chart is re-rendered only when the input changes.
So, open the file `market-chart.component.ts` and add the following code to it:
```typescript
import {ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, ViewChild} from '@angular/core';
import * as d3 from 'd3';
import {MarketPrice} from '../market-price';
@Component({
selector: 'app-market-chart',
templateUrl: './market-chart.component.html',
styleUrls: ['./market-chart.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MarketChartComponent implements OnChanges {
@ViewChild('chart')
chartElement: ElementRef;
parseDate = d3.timeParse('%d-%m-%Y');
@Input()
marketStatus: MarketPrice[];
private svgElement: HTMLElement;
private chartProps: any;
constructor() { }
ngOnChanges() { }
formatDate() {
this.marketStatus.forEach(ms => {
if (typeof ms.date === 'string') {
ms.date = this.parseDate(ms.date);
}
});
}
}
```
Now, the `MarketChartComponent` class has everything required to render the chart. In addition to the local reference for the div (`chartElement`) and the lifecycle hook, the class has a few fields that will be used while rendering the chart. The `parseDate` method converts string values to Date objects and the private fields `svgElement` and `chartProps` will be used to hold the reference of the SVG element and the properties of the chart respectively. These fields will be quite useful to re-render the chart.
Now, the most complex part of the tutorial. Add the following method to the `MarketChartComponent` class:
```typescript
buildChart() {
this.chartProps = {};
this.formatDate();
// Set the dimensions of the canvas / graph
var margin = { top: 30, right: 20, bottom: 30, left: 50 },
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Set the ranges
this.chartProps.x = d3.scaleTime().range([0, width]);
this.chartProps.y = d3.scaleLinear().range([height, 0]);
// Define the axes
var xAxis = d3.axisBottom(this.chartProps.x);
var yAxis = d3.axisLeft(this.chartProps.y).ticks(5);
let _this = this;
// Define the line
var valueline = d3.line
()
.x(function (d) {
if (d.date instanceof Date) {
return _this.chartProps.x(d.date.getTime());
}
})
.y(function (d) { console.log('Close market'); return _this.chartProps.y(d.close); });
// Define the line
var valueline2 = d3.line()
.x(function (d) {
if (d.date instanceof Date) {
return _this.chartProps.x(d.date.getTime());
}
})
.y(function (d) { console.log('Open market'); return _this.chartProps.y(d.open); });
var svg = d3.select(this.chartElement.nativeElement)
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
// Scale the range of the data
this.chartProps.x.domain(
d3.extent(_this.marketStatus, function (d) {
if (d.date instanceof Date)
return (d.date as Date).getTime();
}));
this.chartProps.y.domain([0, d3.max(this.marketStatus, function (d) {
return Math.max(d.close, d.open);
})]);
// Add the valueline2 path.
svg.append('path')
.attr('class', 'line line2')
.style('stroke', 'green')
.style('fill', 'none')
.attr('d', valueline2(_this.marketStatus));
// Add the valueline path.
svg.append('path')
.attr('class', 'line line1')
.style('stroke', 'black')
.style('fill', 'none')
.attr('d', valueline(_this.marketStatus));
// Add the X Axis
svg.append('g')
.attr('class', 'x axis')
.attr('transform', `translate(0,${height})`)
.call(xAxis);
// Add the Y Axis
svg.append('g')
.attr('class', 'y axis')
.call(yAxis);
// Setting the required objects in chartProps so they could be used to update the chart
this.chartProps.svg = svg;
this.chartProps.valueline = valueline;
this.chartProps.valueline2 = valueline2;
this.chartProps.xAxis = xAxis;
this.chartProps.yAxis = yAxis;
}
```
Refer to the comments added before every section in the above method to understand what the code is doing. Also, if you have any specific doubt, just leave a comment.
Now, you will have to change the `ngOnChanges` function (still in your `MarketChartComponent` class) to call this method:
```typescript
ngOnChanges() {
if (this.marketStatus) {
this.buildChart();
}
}
```
Now, you need to insert this component in the `app-root` component to see the chart. So, open the `app.component.html` file and replace its content with:
``` html
```
Then, you have to replace the content of the `app.component.ts` file with the following code:
```typescript
import {Component} from '@angular/core';
import {MarketStatusService} from './market-status.service';
import {Observable} from 'rxjs';
import {MarketPrice} from './market-price';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
marketStatus: MarketPrice[];
marketStatusToPlot: MarketPrice[];
set MarketStatus(status: MarketPrice[]) {
this.marketStatus = status;
this.marketStatusToPlot = this.marketStatus.slice(0, 20);
}
constructor(private marketStatusSvc: MarketStatusService) {
this.marketStatusSvc.getInitialMarketStatus()
.subscribe(prices => {
this.MarketStatus = prices;
});
}
}
```
Save these changes and run the application using the `ng serve` command (or `npm start`). Now, head to the [http://localhost:4200/](http://localhost:4200) URL and you will see a page with a chart similar to the following image:
### Adding Real-Time Capabilities to the D3 Chart
Now that you have the chart rendered on the page, you can make it receive the market updates from Socket.IO to make it real-time. To receive these updates, you need to add a listener to the Socket.IO endpoint in the `market-status.service.ts` file. So, open this file and replace its code with:
```typescript
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {MarketPrice} from './market-price';
import { Subject, from } from 'rxjs';
import * as socketio from 'socket.io-client';
@Injectable({
providedIn: 'root'
})
export class MarketStatusService {
private baseUrl = 'http://localhost:3000';
constructor(private httpClient: HttpClient) { }
getInitialMarketStatus() {
return this.httpClient.get(`${this.baseUrl}/api/market`);
}
getUpdates() {
let socket = socketio(this.baseUrl);
let marketSub = new Subject();
let marketSubObservable = from(marketSub);
socket.on('market', (marketStatus: MarketPrice) => {
marketSub.next(marketStatus);
});
return marketSubObservable;
}
}
```
The new method, `getUpdates`, does three important things:
- it creates a manager for the Socket.IO endpoint at the given URL;
- it creates a RxJS `Subject` and gets an `Observable` from this subject. This observable is returned from this method so consumers can listen to the updates;
- The call to the `on` method on the Socket.IO manager adds a listener to the `market` event. The callback passed to this method is called whenever the Socket.IO endpoint publishes something new.
Now, you have to make the `AppComponent` class consume the `getUpdates()` method. So, open the `app.component.ts` file and modify the constructor as shown below:
```typescript
constructor(private marketStatusSvc: MarketStatusService) {
this.marketStatusSvc.getInitialMarketStatus()
.subscribe(prices => {
this.MarketStatus = prices;
let marketUpdateObservable = this.marketStatusSvc.getUpdates(); // 1
marketUpdateObservable.subscribe((latestStatus: MarketPrice) => { // 2
this.MarketStatus = [latestStatus].concat(this.marketStatus); // 3
}); // 4
});
}
```
In the above snippet, the statements marked with the numbers are the new lines added to the constructor. Observe the statement labeled with 3. This statement creates a new array instead of updating the field `marketStatus`. This is done to let the consuming `app-market-chart` component know about the change when you have an update.
The last change you will need to do to see the chart working in real time is to make the flowing data hit the chart. To do this, open the `market-chart.component.ts` file and add the following method to the `MarketChartComponent` class:
```typescript
updateChart() {
let _this = this;
this.formatDate();
// Scale the range of the data again
this.chartProps.x.domain(d3.extent(this.marketStatus, function (d) {
if (d.date instanceof Date) {
return d.date.getTime();
}
}));
this.chartProps.y.domain([0, d3.max(this.marketStatus, function (d) { return Math.max(d.close, d.open); })]);
// Select the section we want to apply our changes to
this.chartProps.svg.transition();
// Make the changes to the line chart
this.chartProps.svg.select('.line.line1') // update the line
.attr('d', this.chartProps.valueline(this.marketStatus));
this.chartProps.svg.select('.line.line2') // update the line
.attr('d', this.chartProps.valueline2(this.marketStatus));
this.chartProps.svg.select('.x.axis') // update x axis
.call(this.chartProps.xAxis);
this.chartProps.svg.select('.y.axis') // update y axis
.call(this.chartProps.yAxis);
}
```
The comments added in the snippet explain what you are doing in this method. Now, you have to make the `ngOnChanges` method call this new method. So, change the `ngOnChanges()` method in the `MarketChartComponent` class as shown below:
```typescript
ngOnChanges() {
if (this.marketStatus && this.chartProps) {
this.updateChart();
} else if (this.marketStatus) {
this.buildChart();
}
}
```
Now, if you run the application, you will see an error on the browser console saying `global is not defined`.
This is because Angular CLI 6 removed the global object and SocketIO uses it. To fix this problem, add the following statement to the `polyfills.ts` file:
```typescript
(window as any).global = window;
```
With this, all the changes are done. Save all your files and run the applications again. You can move into the `server` directory in one terminal and issue `node index.js` to run your backend API, then move to the `angular-d3-chart` directory and issue `npm start` to run the Angular application.
Now, if you head to (`http://localhost:4200`)[http://localhost:4200], you will see your nice chart with real-time data flowing into it every 5 seconds.
Awesome, right?
## Conclusion
As you saw in this tutorial, the web has capabilities that allow you to build very rich applications. Your real-time chart, for example, adds a huge value to your app because there the user knows that they will have the latest data without having to refresh the page or performing any action. This kind of interactivity improves your users' experiences and will contribute to their happiness.
WDYT? Ready to add some real-time data to the web?