Angular2 and simpleheat plugin

177
March 30, 2018, at 6:57 PM

I am trying to get work this NPM plugin (http://mourner.github.io/simpleheat/) with my angular2 app. It still doesn't work, but I think that everything is right but heatmap is not rendering.

My full repository with problem is there: https://github.com/b4rtt/nebula

heatmap.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { simpleheat } from 'simpleheat';
@Component({
  selector: 'app-heatmap',
  templateUrl: './heatmap.component.html',
  styleUrls: ['./heatmap.component.css']
})
export class HeatmapComponent implements OnInit {
  @ViewChild("myCanvas") myCanvas: ElementRef;
  context: CanvasRenderingContext2D;
  constructor() {
  }
  ngOnInit() {
  }
  ngAfterViewInit() {
    let canvas = this.myCanvas.nativeElement;
    var data = [[38, 20, 1], [38, 690, 1], [48, 30, 1]];
    this.context = canvas.getContext("2d");
    var ctx = this.context;
    //test draw
    ctx.clearRect(0, 0, 400, 400);
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 20, 20);

    //doesn't work ?? Why?
    var heat = simpleheat(ctx);
    heat.data(data);
    heat.draw(100);
  }
}

heatmap.component.html

<canvas #myCanvas id="canvas" width="500" height="500"></canvas>

Anyone could help me what is wrong there?

Thank you

Answer 1

There were a couple of errors in your code;

  1. You cannot import libraries that don't have type definitions so what you need to do is add the library to the .angular-cli.json file and declare the variable inside the component (or globally)
  2. You were using ngAfterViewInit, but not implementing it
  3. Simpleheat expects an id of the canvas element or a reference to it
  4. The default route is not resolving to anything, which shows a blank page

After fixing all the above, the heapmap is showed.

Rent Charter Buses Company
READ ALSO
react await doensn&#39;t wait when using onSubmit instead of onClick

react await doensn't wait when using onSubmit instead of onClick

In my login-page, I wanted to make ENTER key presses work apart from just clicking the "login" button, so I made the button be of type "submit" and give the form the method "onSubmit" as shown below:

207
Creating list item dynamically in chrome extension

Creating list item dynamically in chrome extension

I am new to jqueryI am making a chrome extension which gets some DOM element from - say for example, any price of product from flipkart

167
JS plugin / Ruby gem for document viewer - 1 page at a time

JS plugin / Ruby gem for document viewer - 1 page at a time

We have a requirement for reading uploaded files (stored on S3) in browser which can be of pdf, doc, ppt, txt typeThe exact need is to have a reader which opens just 1 page at a time and has previous/next button for navigating pages

166