This article is outdated, you can access the most current version here:
Description
It is very important to present data in an understandable and "visible" way, and that is why Dashboards and Graphs are heavily present in data-based platforms. HeatMap is a very attractive graphical presentation of data with individual values contained in a matrix and presented as colors (the color gradient changes w.r.t value).
Apps gives the possibility to present data in a HeatMap format, for which the declaration is made in the "config" property of the element of interest. The data for the HeatMap has to be provided by the user. It can be raw or FRT-generated.
Raw data Example
{
"id": "raw_data",
"origin": "raw",
"config": {
"schema": "table",
"data": [
{
"x": 0,
"y": 0,
"value": 10
},
{
"x": 1,
"y": 0,
"value": 92
},
{
"x": 1,
"y": 1,
"value": 15
},
{
"x": 0,
"y": 1,
"value": 88
},
{
"x": 0,
"y": 2,
"value": 23
},
{
"x": 1,
"y": 2,
"value": 77
},
{
"x": 0,
"y": 3,
"value": 100
},
{
"x": 1,
"y": 3,
"value": 0
}
]
}
}The example above could present the performance (in numerical measure) of two individuals (Alexander & Marie) along the first two days of a specific week.
JSON
"version": "0.1",
"screens": [
{
"layout": "layout1",
"conditions": {
"minScreenWidth": 0
}
}
],
"layouts": [
{
"id": "layout1",
"type": "fixedGrid",
"config": {
"dim": {
"x": 24,
"y": 24
},
"containers": [
{
"id": "chartVis",
"pos": {
"x": 1,
"y": 5
},
"size": {
"w": 24,
"h": 12
}
}
]
},
"cellPadding": "5px",
"placements": [
{
"containerId": "chartVis",
"elementId": "chartVis"
}
]
}
],
"datasources": [
{
"id": "raw_data",
"origin": "raw",
"config": {
"schema": "table",
"data": [
{
"x": 0,
"y": 0,
"value": 10
},
{
"x": 1,
"y": 0,
"value": 92
},
{
"x": 1,
"y": 1,
"value": 15
},
{
"x": 0,
"y": 1,
"value": 88
},
{
"x": 0,
"y": 2,
"value": 23
},
{
"x": 1,
"y": 2,
"value": 77
},
{
"x": 0,
"y": 3,
"value": 100
},
{
"x": 1,
"y": 3,
"value": 0
}
]
}
}
],
"elements": [
{
"id": "chartVis",
"type": "highcharts",
"source": "raw_data",
"config": {
"chart": {
"type": "heatmap",
"marginTop": 40,
"marginBottom": 80,
"plotBorderWidth": 1
},
"title": {
"text": "Discounts used",
"align": "center",
"verticalAlign": "top",
"y": 25,
"symbolHeight": 280
},
"xAxis": {
"columnName": "x",
"categories": [
"Alexander",
"Marie"
]
},
"yAxis": {
"columnName": "y",
"categories": [
"Monday",
"Tuesday",
"Wednesday",
"Thrusdays"
],
"title": null
},
"colorAxis": {
"min": 0,
"minColor": "#96ccc9",
"maxColor": "#376276"
},
"legend": {
"align": "right",
"layout": "vertical",
"margin": 0,
"verticalAlign": "top",
"y": 25,
"symbolHeight": 280
},
"series": [
{
"name": "value"
}
],
"tooltip": {}
}
}
],
"pages": [],
"endpoints": [],
"syncSets": [],
"partials": [],
"customElementPacks": [],
"customHooks": []
}Here we target each cell of the heatmap with its coordinates X & Y
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article