Heatmap Plugin

Overview

A heatmap plugin chart represents data values through color coding and shading. Often used with larger data sets, they are useful for identifying patterns, areas of concentration, and/or data variance. Our heatmap plugin maps are customizable. They can be modified to display data according to color, brightness, size, blur amount, and more. We explain how to configure your heatmap plugin in detail, and include examples.

Object

In your chart object, add another object called heatmap. In this case, a radar chart will be used as an underlay. Use heatmap.setdata to give the plugin some data to display. Without further modification, a basic density map with a simple simple math function looks like this:

https://app.zingsoft.com/demos/embed/ZXOJ9E6H
https://app.zingsoft.com/demos/embed/ZXOJ9E6H
{ 
  type: 'radar',
  heatmap: {},
}
...,
var MAX = 100;
var aData = [];
zingchart.bind('zc', 'load', function() {
  var l, k, v;
  var iMaxPoints = 512;
  for (l=0;l<iMaxPoints;l++) {
    k = 5 * Math.round(((iMaxPoints-l)%355) / 5);
    v = 5 * Math.round((l%100) / 5);
    aData.push([k, v, MAX]);
  }
  zingchart.exec('zc', 'heatmap.setdata', {
    data : aData
  });    
});

Data

To enter the data into the Heatmap, use heatmap.setdata to set the data attribute. The data attribute accepts a data set in the form of a series of arrays. Each array contains a key, value, and maximum integer, provided in the following format.

data: [[key1, val1, max1], [key2, val2, max2], ..., [keyN, valN, maxN]]

TODO: Give link to the graph object doc page.

The heatmap plugin supports multiple ways to arrange its data. To fit the data to the radar chart, use the graph object and set keyScale and valScale. For more information on the graph object, please visit (TODO).

https://app.zingsoft.com/demos/embed/IKJ1NV5P
https://app.zingsoft.com/demos/embed/IKJ1NV5P
{
  type : 'radar',
  heatmap : {
    graph : {
      keyScale : 'scale-k',
      valScale : 'scale-v'
    }
  },
}

Specific Properties

TODO: List the different properties that you can modify to change the look and feel of the density map.

You can modify how your heatmap displays your data. Using different attributes such as brushType, size, composite, and others, the data can be made to fit any style.

Brush Type

Use the brushType attribute to modify what shape the heatmap is painted with. The brushType value options include: circle and square. (TODO: There may be more.)

https://app.zingsoft.com/demos/embed/DA8T69KQ
https://app.zingsoft.com/demos/embed/DA8T69KQ
{
  type : 'radar',
  heatmap : {
    graph : {
      keyScale : 'scale-k',
      valScale : 'scale-v'
    },
    brushType: 'square'
  },
}

Size

Use the size attribute to modify how large each painted shape is. The size value options include: 40px, 30, 50%, etc. (TODO: There may be more.)

https://app.zingsoft.com/demos/embed/88LVKOJJ
https://app.zingsoft.com/demos/embed/88LVKOJJ
{
  type : 'radar',
  heatmap : {
    graph : {
      keyScale : 'scale-k',
      valScale : 'scale-v'
    },
    brushType: 'circle',
    size: '10px'
  },
}

Composite

Use the composite attribute to allow for the blending of the shapes together. This creates the classic heatmap look. The color shifts more towards red the greater the number of stacked shapes are present. The composite value options include: true and false.

https://app.zingsoft.com/demos/embed/EGOZM359
https://app.zingsoft.com/demos/embed/EGOZM359
{
  type : 'radar',
  heatmap : {
    graph : {
      keyScale : 'scale-k',
      valScale : 'scale-v'
    },
    brushType: 'circle',
    size: '10px',
    composite: true
  },
}

Blur

Use the blur attribute to increase or decrease the amount of blur that appears around each shape. Increasing this will increase the amount of surface area each shape takes up. The blur value options include: 40px, 30, 50%, etc. (TODO: There may be more.)

https://app.zingsoft.com/demos/embed/BH0PR2UJ
https://app.zingsoft.com/demos/embed/BH0PR2UJ
{
  type : 'radar',
  heatmap : {
    graph : {
      keyScale : 'scale-k',
      valScale : 'scale-v'
    },
    brushType: 'circle',
    size: '10px',
    composite: true,
    blur: '70px'
  }
}

Further Customization

Further customize your heatmap plugin by configuring a few important features. These make it easier to highlight exactly what you want to display.

Alpha

With heatmap plugin charts, you'll most likely want to find a balance between the underlay and the heatmap itself. The alpha attribute causes the heatmap to become semi-transparent. The value options for it include any value between 0.0 being transparent to 1.0 being solid. By default, the alpha attribute is set to 0.5.

https://app.zingsoft.com/demos/embed/X7H2IZ7I
https://app.zingsoft.com/demos/embed/X7H2IZ7I
{
  type : 'radar',
  heatmap : {
    graph : {
      keyScale : 'scale-k',
      valScale : 'scale-v'
    },
    brushType: 'circle',
    size: '10px',
    composite: true,
    blur: '70px',
    alpha: 1
  }
}

Tooltip

The tooltip object makes the heatmap plugin much easier to read. It displays the numerical value of each point on the heatmap. More information on the tooltip is available here.

https://app.zingsoft.com/demos/embed/9LFYLVES
https://app.zingsoft.com/demos/embed/9LFYLVES
type : 'radar',
  heatmap : {
    graph : {
      keyScale : 'scale-k',
      valScale : 'scale-v'
    },
    brushType: 'circle',
    size: '10px',
    composite: true,
    blur: '70px',
    alpha: 1,
    tooltip: {
    	decimals: 1
    }
  }
}

Live Updating

Heatmap plugins can be brought to life using window.setInterval. With a more involved math function that updates the heatmap every 15 miliseconds, you can achieve a visual look like the following.

https://app.zingsoft.com/demos/embed/VGMQ7NPX
https://app.zingsoft.com/demos/embed/VGMQ7NPX
type : 'radar',
  heatmap : {
    graph : {
      keyScale : 'scale-k',
      valScale : 'scale-v'
    },
    brushType: 'circle',
    size: '10px',
    composite: true,
    blur: '70px',
    alpha: 1
  }
}
...,
var MAX = 100;
var aData = [];
zingchart.bind('zc', 'load', function() {
  window.setInterval(function() {
      var l, k, v;
      var iMaxPoints = 512;
      if (aData.length === 0) {
          for (l=0;l<iMaxPoints;l++) {
            k = 5 * Math.round(ZC._r_(0, 355) / 5);
            v = 5 * Math.round(ZC._r_(10, 100) / 5);
            aData.push([k, v, MAX*Math.random()]);
          }
      } else {
          for (l=aData.length-1;l>=0;l--) {
            aData[l][2] = Math.min(MAX, aData[l][2] - (MAX/19) + (MAX/20)*Math.random());
            if (aData[l][2] <= 0) {
              aData.splice(l, 1);
            }
          }
          for (l=0;l<iMaxPoints-aData.length;l++) {
            k = 5 * Math.round(ZC._r_(0, 355) / 5);
            v = 5 * Math.round(ZC._r_(10, 100) / 5);
            aData.push([k, v, MAX*Math.random()]);
          }
      }
      zingchart.exec('zc', 'heatmap.setdata', {
        data : aData
      });    
  }, 15);
});

Other Chart Underlays

Most chart types can be used as underlays. The following types are compatible with the heatmap plugin: null, area, bar, boxplot, bubble-pie, bubble, bullet, calendar, funnel, gauge, piano, heatmap, line, nestedpie, pareto, radar, range, scatter, stock, venn, and waterfall.

Mixed Charts Using Null

https://app.zingsoft.com/demos/embed/A5FO1O34
https://app.zingsoft.com/demos/embed/A5FO1O34

Map Using Null

https://app.zingsoft.com/demos/embed/PUG10N1W
https://app.zingsoft.com/demos/embed/PUG10N1W

Mixed Maps Using Null

https://app.zingsoft.com/demos/embed/KXKKBDER
https://app.zingsoft.com/demos/embed/KXKKBDER

Summary

Got a question about how heatmap plugins work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.