Magento 1 Support is Ending This November! Migrate to Magento 2 Migrate Now!

How to implement heatmap.js with PHP?


882 total views

A heat map is nothing but a representation of data in the two-dimensional form which represents values by colors. A heat map can offer an appropriate and quick visual summary of the information to the viewer. The detailed heat maps lets the viewer understand the complex data sets.

Various things are available to show the heatmaps. Here in this article, we would discuss about heatmap.js and ways to implement it with the help of PHP.

Official site for heatmap.js
Simple Example:

Heatmap Survey Analysis Using PHP


For live Example:

In this example we can show earthquake impact on different areas using color and it can be easily understood by laymen.

Our Example

We have to implement it on hall map to show beacon impact on users, .i.e. how many users get notified by beacon.

We have added dynamic data to heatmap to show how many users pass from beacons.
It simply creates dynamic heatmaps based on the data you feed into it.

Heatmap Survey Analysis Using PHP

By looking at the above picture we easily understand where users visit most.


Firstly, we have to include heatmap.js

It has very simple configuration.

1 ) h337.create(configObject)

Returns a heatmapInstance.
Use h337.create to create heatmap instances. A Heatmap can be customized with the configObject.
The configObject parameter is required.

Possible configuration properties:

  • container (DOMNode) *required*
  • A DOM node where the heatmap canvas should be appended (heatmap will adapt to the node’s size)
  • backgroundColor (string) *optional*
  • A background color string in form of hexcode, color name, or rgb(a)
  • gradient (object) *optional*
  • An object that represents the gradient (syntax: number string [0,1] : color string), check out the example
  • radius (number) *optional*
  • The radius each datapoint will have (if not specified on the datapoint itself)
  • opacity (number) [0,1] *optional* default = .6
  • A global opacity for the whole heatmap. This overrides maxOpacity and minOpacity if set!
  • maxOpacity (number) [0,1] *optional*
  • The maximal opacity the highest value in the heatmap will have. (will be overridden if opacity set)
  • minOpacity(number) [0,1] *optional*
  • The minimum opacity the lowest value in the heatmap will have (will be overridden if opacity set)
  • onExtremaChange function callback
  • Pass a callback to receive extrema change updates. Useful for DOM legends.
  • blur (number) [0,1] *optional* default = 0.85
  • The blur factor that will be applied to all datapoints. The higher the blur factor is, the smoother the gradients will be
  • xField (string) *optional* default = “x”
  • The property name of your x coordinate in a datapoint
  • yField (string) *optional* default = “y”
  • The property name of your y coordinate in a datapoint
  • valueField (string) *optional* default = “value”
  • The property name of your y coordinate in a datapoint

Simple configuration with standard gradient

Heatmap Survey Analysis Using PHP

2 ) heatmapInstance
It return by h337.create
We have to add our data and all other customization in this.

It add data points to heatmap instance. It may be object or array.

Heatmap Survey Analysis Using PHP


3) heatmapInstance.setData(object)

Initializes a heatmap instance with a dataset. “min”, “max”, and “data” properties are required.
setData removes all previously existing points from the heatmap instance and re-initializes the datastore.

Heatmap Survey Analysis Using PHP










Related: How to Create Custom Library into CodeIgniter?


July 2017

Rashmi Dholakiya

You may also like