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
// 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.keyword') .limit(25) .sort('asc', 'venuecity.keyword'); let group2 = cf.Attribute('saletime') .limit(12) .func('MONTH') .sort('asc', '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('color', color) .element('chart');
Previous code will render a Heat Map like follow:
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.
We can use the following properties to configure the Heat Map Chart:
- legend: allows to define if the legend is shown, by default it is false
- showValues: allows to define if the internal values of each element are displayed, by default it is false