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 ExampleThe 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
          }
        ]
      }
    }
  ],
  "elements": [
    {
      "id": "chartVis",
      "type": "highcharts",
      "source": "raw_data",
      "config": {
        "chart": {
          "type": "heatmap",
          "marginTop": 40,
          "marginBottom": 80,
          "plotBorderWidth": 1
        },
        "title": {
          "text": "Test HeatMap",
          "align": "center",
          "verticalAlign": "top",
          "y": 25,
          "symbolHeight": 280
        },
        "xAxis": {
          "categories": [
            "Alexander",
            "Marie"
          ]
        },
        "yAxis": {
          "categories": [
            "Monday",
            "Tuesday"
          ],
          "title": null
        },
        "colorAxis": {
          "min": 0,
          "minColor": "#96ccc9",
          "maxColor": "#376276"
        },
        "legend": {
          "align": "right",
          "layout": "vertical",
          "margin": 0,
          "verticalAlign": "top",
          "y": 25,
          "symbolHeight": 280
        },
        "tooltip": {}
      }
    }
  ]
}


Here we target each cell of the heatmap with its coordinates X & Y