1. Home
  2. Forum
  3. Angular - EJ 2
  4. Heatmap

Heatmap

I was trying this example, but the data is NOT rendered and i see no error

Bubble HeatMap in Angular HeatMap component


import { HeatMap, ITooltipEventArgs, BubbleTooltipData } from '@syncfusion/ej2-heatmap';

                         
       [titleSettings]='titleSettings' [paletteSettings]='paletteSettings' [cellSettings]='cellSettings' [legendSettings]='legendSettings' (tooltipRender)='tooltipRender($event)'>
       


public dataSourceH:Object[] =             [
  { 'Year': '2017', 'Jan-Feb': [4,39], 'Mar-Apr': [3,8], 'May-Jun': [1,3], 'Jul-Aug': [1,10], 'Sep-Oct': [4,4], 'Nov-Dec': [2,15]},
  { 'Year': '2016', 'Jan-Feb': [4,28], 'Mar-Apr': [5,92], 'May-Jun': [5,73], 'Jul-Aug': [3,1], 'Sep-Oct': [3,4], 'Nov-Dec': [4,126]},
  { 'Year': '2015', 'Jan-Feb': [4,45], 'Mar-Apr': [5,152], 'May-Jun': [0,44], 'Jul-Aug':[4,54], 'Sep-Oct': [5,243], 'Nov-Dec': [2,45]}
  ];
  public dataSourceSettings: Object = {
      isJsonData: true,
      adaptorType: 'Table',
      xDataMapping: 'Year',
  };

  public titleSettings: Object = {
      text: 'Commercial Aviation Accidents and Fatalities by year 2012 - 2017',
      textStyle: {
          size: '15px',
          fontWeight: '500',
          fontStyle: 'Normal',
          fontFamily: 'Segoe UI'
      }
  };
  public xAxis: Object = {
      labels: ['2017', '2016', '2015'],
  };
  public yAxis: Object = {
      labels: ['Jan-Feb', 'Mar-Apr', 'May-Jun', 'Jul-Aug', 'Sep-Oct', 'Nov-Dec'],
  };
  public paletteSettings: Object = {
          palette: [
          { color: '#C06C84'},
          { color: '#6C5B7B'},
          { color: '#355C7D'}
      ],
      type: "Gradient"
  };
  public cellSettings: Object = {
      border: {
          width: 1
      },
      tileType: 'Bubble',
      bubbleType: 'SizeAndColor'
  };
  public legendSettings: Object = {
      visible: true,
  };
  
  public tooltipRender(args: ITooltipEventArgs): void {
  args.content = ['Year ' + ' : ' + args.xLabel + '
' + 'Months ' + ' : ' + args.yLabel + '
'
          + 'Accidents ' + ' : ' + (args.value as BubbleTooltipData[])[0].bubbleData + '
' + 'Fatalities ' + ' : '
          + (args.value as BubbleTooltipData[])[1].bubbleData];
};



3 Replies 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team June 30, 2020 09:55 AM UTC

Hi Vin,  
 
Greetings from Syncfusion support. 
 
We have checked your reported query with Heatmap component. But, we were unable to reproduce it. We suspect that your reported issue may be occurred due to the datasource not properly mapped to the Heatmap component.  
 
Refer the below code snippet. 
 
      <ejs-heatmap id='container' style="display:block;" [dataSource]='dataSourceH' [dataSourceSettings]='dataSourceSettings' [xAxis]='xAxis' [yAxis]='yAxis' 
       [titleSettings]='titleSettings' [paletteSettings]='paletteSettings' [cellSettings]='cellSettings' [legendSettings]='legendSettings' > 
        </ejs-heatmap> 
 
public dataSourceH:Object[] =             [ 
  { 'Year': '2017', 'Jan-Feb': [4,39], 'Mar-Apr': [3,8], 'May-Jun': [1,3], 'Jul-Aug': [1,10], 'Sep-Oct': [4,4], 'Nov-Dec': [2,15]}, 
  { 'Year': '2016', 'Jan-Feb': [4,28], 'Mar-Apr': [5,92], 'May-Jun': [5,73], 'Jul-Aug': [3,1], 'Sep-Oct': [3,4], 'Nov-Dec': [4,126]}, 
  { 'Year': '2015', 'Jan-Feb': [4,45], 'Mar-Apr': [5,152], 'May-Jun': [0,44], 'Jul-Aug':[4,54], 'Sep-Oct': [5,243], 'Nov-Dec': [2,45]} 
  ]; 
 
Refer the sample link below. 
 
 
To know more about the Heatmap component, refer the below links. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
 
Regards,  
Sowmiya.P 



VI vin July 3, 2020 05:14 PM UTC

I used the example provided, Still getting the error

ERROR TypeError: Cannot read property '0' of undefined
    at HeatMapComponent.push../node_modules/@syncfusion/ej2-heatmap/src/heatmap/heatmap.js.HeatMap.isHeatmapRect (heatmap.js:565)
    at HeatMapComponent.push../node_modules/@syncfusion/ej2-heatmap/src/heatmap/heatmap.js.HeatMap.mouseAction (heatmap.js:984)
    at HeatMapComponent.push../node_modules/@syncfusion/ej2-heatmap/src/heatmap/heatmap.js.HeatMap.heatMapMouseMove (heatmap.js:974)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:26247)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
    at invokeTask (zone.js:1693)
    at HTMLElement.globalZoneAwareCallback (zone.js:1719)



SP Sowmiya Padmanaban Syncfusion Team July 6, 2020 10:37 AM UTC

Hi Vin,  
 
We have checked your reported problem with Heatmap component. We suspect that your reported issue may be occurred due to service was not properly imported  in Heatmap component. Refer the below code snippet to import the service of Heatmap component.  
 
[App.Module.ts] 

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
 
import { AppComponent } from './app.component'; 
import { HeatMapModule} from '@syncfusion/ej2-angular-heatmap'; 
import { LegendService, AdaptorService, TooltipService} from '@syncfusion/ej2-angular-heatmap'; 
 
@NgModule({ 
  declarations: [ 
    AppComponent 
  ], 
  imports: [ 
    BrowserModule,HeatMapModule 
  ], 
  providers: [ LegendService, AdaptorService, TooltipService], 
  bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Refer the below screenshot. 
 

Refer the below angular application link: 
 
 
If the issue still persist, could you please share the following details. It will help us to resolve your issue at the earliest. Or else share the convenient timing for web meeting. We will help you resolve your issue in the live meeting session. 
 
1.     Share the Heatmap package version you have used in your application. 
 
2.     Share the package.json file. 
 
3.     If possible, replicate the issue in attached sample and share it to us. 
 
4.     Share the issue replicating video footage. 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
Loader.
Up arrow icon