User tracking Heatmap using heatmap.js

We will be using heatmap.js api to render the heatmap canvas on top of the webpage.

However we will create the logic for generating the data to be used with heatmap.js.

Lets jump right into it:

First we need to have the mousemove event handler:

document.onmousemove = handler;

Lets write the handler:

let mousePos;

function handler(event) {
  var dot, eventDoc, doc, body, pageX, pageY;

  event = event || window.event; 

  //capturing the x anf y coordinates of the mouse pointer
  if (event.pageX == null && event.clientX != null) {
    eventDoc = ( && || document;
    doc = eventDoc.documentElement;
    body = eventDoc.body;
    event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
    event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);

  //save the coordinates in a globale variable
  mousePos = {
    x: event.pageX,
    y: event.pageY

Now lets create a function which will retrieve the last mouse position and add the coordinates in localstorage

let coordinates = []
function getMousePosition() {
  var pos = mousePos;
  if (pos){
    coordinates.push({x: pos.x, y: pos.y});
  localStorage.setItem('coordinates', JSON.stringify(coordinates));

Let’s invoke this function repeatedly in finite intervals so that we can uniformly capture the mouse coordinates in the page

setInterval(getMousePosition, 100);  //capture the user mouse position each 100ms

Now that we have the raw data, an array of coordinates objects in our local storage, now lets write the logic to group the unique coordinates and calculate the count of each unique coordinate

function getGroupedData() {
  var positions = JSON.parse(localStorage.getItem('coordinates'));
  var grouped = [];, index) {
    var filtered = positions.filter(function(obj) {
      return (obj.x == pos.x && obj.y == pos.y)
    var group = {
      value: filtered.length
    if (grouped.indexOf({x:group.x,y:group.y})==-1) {
  localStorage.setItem('heatMap', JSON.stringify(grouped));

Now lets create a init function and put all the good stuff we have discussed earlier so that the capturing of coordinates can be triggered:

function init() {
  // initiate the local storage to blank
  localStorage.setItem('coordinates', JSON.stringify([])); 
  localStorage.setItem('heatMap', JSON.stringify([]));

  document.onmousemove = handler;
  setInterval(getMousePosition, 100);

Time to include the generation code in the webpage

var heatMap = require('./Heatmap');

install heatmap.js through npm

npm install heatmap.js --save-dev

Invoke the heatMap.js to create a heatmap overlay:

var h337= require('heatmap.js');

	var heatmap = h337.create({
	  container: document.getElementById('root')

	  max: 5,
	  data: JSON.parse(localStorage.getItem('heatMap'))

The result:

Screen Shot 2016-04-14 at 9.50.30 PM

Full code:

Posted in HTML5, Web Technology Tagged with: , , , , , ,
One comment on “User tracking Heatmap using heatmap.js
  1. Nishant says:

    Interesting post!

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts

Hit Counter provided by technology news