How to get started easily with Syncfusion Angular 8 Heatmap?
The Essential JS2 Angular Heatmap component is used to visualize two-dimensional data, in which the values are represented in gradient or fixed colors. This KB article explains how to easily get started with EJ2 Heatmap component in Angular 8 project with minimal code.
Prerequisites
Before starting, the following tools and SDK needs to be installed in your machine:
- Node.js (v8.10.0 or above)
- Angular 8
- Angular CLI
Installation and application creation
You can install Angular CLI 8 using the following command.
npm install -g @angular/[email protected] |
If you need to follow and run the application in Angular 7 or earlier versions, replace the CLI command version with your preferred version and install it. |
npm install -g @angular/cli@<CLI VERSION> |
Create an Angular 8 application
ng new heatmap-angular8 cd heatmap-angular8 |
Install EJ2 Heatmap
npm install @syncfusion/ej2-angular-heatmap |
Serve the application
ng serve --open |
Your application will open in browser in the http://localhost:4200. Refer to the following screenshot for Angular 8 version.
Add Angular 8 Heatmap
You can add the Angular 8 Heatmap component using the `ejs-heatmap` tag. The attributes used within this tag allows you to define other functionalities of heatmap.
- Import HeatMapAllModule into app.module.ts file from the @syncfusion/ej2-angular-heatmap package.
[app.module.ts]
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';
import { AppComponent } from './app.component'; import { HeatMapAllModule } from '@syncfusion/ej2-angular-heatmap';
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HeatMapAllModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
- Add the Heatmap component in the template file.
[app.component.html]
<ejs-heatmap></ejs-heatmap> |
- Run the application using the following command, and you can see the following represented output of the EJ2 Angular Heatmap component.
ng serve –open |
Populate Heatmap with data
Now, by providing data, you can visualize and populate the following two-dimensional array data to the Heatmap.
[app.component.ts]
export class AppComponent { dataSource = [ [73, 39, 26, 39, 94, 0], [93, 58, 53, 38, 26, 68], [99, 28, 22, 4, 66, 90], [14, 26, 97, 69, 69, 3], [7, 46, 47, 47, 88, 6], [41, 55, 73, 23, 3, 79], [56, 69, 21, 86, 3, 33], [45, 7, 53, 81, 95, 79], [60, 77, 74, 68, 88, 51], [25, 25, 10, 12, 78, 14], [25, 56, 55, 58, 12, 82], [74, 33, 88, 23, 86, 59] ]; } |
[app.component.html]
<ejs-heatmap [dataSource]="dataSource"></ejs-heatmap> |
Axis labels
You can add axis labels to the Heatmap and format those labels using the xAxis and yAxis properties. Axis labels provide additional information about the data points populated in the Heatmap.
[]
export class AppComponent { dataSource = [ [73, 39, 26, 39, 94, 0], [93, 58, 53, 38, 26, 68], [99, 28, 22, 4, 66, 90], [14, 26, 97, 69, 69, 3], [7, 46, 47, 47, 88, 6], [41, 55, 73, 23, 3, 79], [56, 69, 21, 86, 3, 33], [45, 7, 53, 81, 95, 79], [60, 77, 74, 68, 88, 51], [25, 25, 10, 12, 78, 14], [25, 56, 55, 58, 12, 82], [74, 33, 88, 23, 86, 59] ]; xAxis = { labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'], }; yAxis = { labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'], } } |
[app.component.html]
<ejs-heatmap [dataSource]='dataSource' [xAxis]='xAxis' [yAxis]='yAxis'></ejs-heatmap> |
Summary
Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
