Skip to content

Heat Map

The Heat Map allows the visualization of data in a Cartesian plane of two dimensions, which is especially useful to detect variations of the data values in a certain time range or in the relation of two attributes.

A Heat Map can be obtained with the following code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// Define the metrics to be used
let metrics = [];
let metric = cf.Metric('commission', 'sum');
const countMetric = cf.Metric('count');

// define attribute to group by
let groups = [];
let group = cf.Attribute('venuecity')
                .limit(25)
                .sort('asc', 'venuecity');
let group2 = cf.Attribute('saletime')
                .limit(12)
                .func('MONTH')
                .sort('desc', 'saletime');

metrics.push(metric);
metrics.push(countMetric);
groups.push(group);
groups.push(group2);

let color = cf.Color().theme('dark');

let myChart = cf.provider('Elasticsearch')
                .source('ticket_sales')
                .groupby(...groups)
                .metrics(...metrics)
                .graph('Heat Map')
                .set('legend', 'right')
                .set('color', color)
                .element('chart');

Previous code will render a Heat Map like follow: HM

As you can see in the previous heat map example, two groups are used, the common thing is that the groups are organized in an ascending or descending way using their own attributes as criterion of order. If not, due to the bidimentional nature of the data no specific behavior is guaranteed.

Sometimes, we have to specify custom margins for the Heat Map if group labels are very large. See the Grid documentation for information on how to specify these custom margins.

The Heat Map chart includes interactive legend support. By default it is disabled but it can be enabled by using the configuration property ‘legend’ with values true, ‘left’ or ‘right’