WebAppers

/ best free open source web resources /

Shopify

Real-time Heatmap with Javascript & HTML Canvas Element

Posted · Category: Charts, License Free

Patrick Wied has shown us how to generates a real-time heatmap with javascript and the HTMLCanvas element depending on the user’s mouse movement.

It is also possible to save the image data of the heatmap. You just have to use the getData function, which returns a (long) data-URL of your heatmap image, to get it. This is especially useful for subsequent serverside processing or saving the image on the client.

javascript-heatmap

Requirements: -
Demo: http://www.patrick-wied.at/static/heatmap/
License: License Free

3 Comments
  • http://www.patrick-wied.at Patrick Wied

    I think it would be nice to provide the link to the corresponding article which explains the key hooks of this example:
    http://letmein.at/js/real-time-heatmap-explained/

    Best regards,
    Patrick

  • http://www.patrick-wied.at Patrick Wied

    Hey guys, it’s me again.
    I wrote another article about an interesting approach on multi-user real-time heatmaps, you might wanna look at it:
    http://letmein.at/js/multi-user-real-time-heatmaps/

  • http://carmelosantana.com Carmelo Santana

    Now we need to store this data in a MySQL DB and use along with analytical data …

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons