Article Content

  1. Highcharts Element
  2. Highcharts Heatmap Element


Highcharts Element

type = "highcharts"

The Highcharts element is used to display any highcharts based visualization. There is no additional processing done on the configuration currently. You directly pass in the highcharts configuration object which is passed as is to the highcharts module. Any configuration is possible for example in the official highcharts editor. To get the configuration object, go to "Customize" and "Preview Options". This is the config object that you can paste to the config of the element. To find out more about highcharts visit Highcharts API.


Properties

Property
Type
Description
Example Value
id
string
The unique id assigned to the element. This is defined by the user and used to refer to the element in layouts.
"myElementId"
source
string
The id of the datasource which should be used for retrieving the data.
"frtDataSource1"
config
string
The actual Highcharts config. It can either be completely copy-pasted (including mock-data), or you can remove the data part, and instead use the source (configured outside of the highcharts config). Make sure that the column names inside the series object are matching the column names in the configured datasource.

Also make sure that the configured columns are of correct type (series can usually only be numeric columns). This is currently an error which is quite hard to find. If you open the developer console and see a highcharts error 14, than this suggests that you have wrong column types in the configured datasource.
{
  "title": {
    "text": "My Chart"
  },
  "subtitle": {
    "text": "My Untitled Chart"
  },
  "exporting": {},
  "chart": {
    "type": "area",
    "polar": false
  },
  "plotOptions": {
    "series": {
      "dataLabels": {
        "enabled": true
      },
      "animation": false
    }
  },
  "series": [
    {
      "name": "My Value",
      "columnName": "table_column",
      "turboThreshold": 0
    }
  ],
  "data": {
    "csv": "\"row\";\"val\"\n0;24",
    "googleSpreadsheetKey": false,
    "googleSpreadsheetWorksheet": false
  },
  "yAxis": {
    "title": {}
  }
}


Example

  "elements": [
    {
      "id": "myHighchartsElement",
      "type": "highcharts",
      "config": {
        "chart": {
          "type": "line",
          "polar": false,
          "width": null,
          "height": null
        },
        "plotOptions": {
          "series": {
            "dataLabels": {
              "enabled": true
            },
            "animation": false
          }
        },
        "title": {
          "text": "Fruit Consumption"
        },
        "xAxis": {
          "categories": [
            "Apples",
            "Bananas",
            "Oranges"
          ]
        },
        "yAxis": {
          "title": {
            "text": "Fruit eaten"
          }
        },
        "series": [
          {
            "name": "Jane",
            "columnName": "table_column1",
            "data": [
              1,
              0,
              4
            ]
          },
          {
            "name": "John",
            "columnName": "table_column2",
            "data": [
              5,
              7,
              3
            ]
          }
        ]
      }
    }
    // .. more elements
  ]



Highcharts Heatmap Element

type = "highcharts"

This is the config object that you can paste to the config of the element to generate a Heatmap.


Properties

Property
Type
Description
Example Value
id
string
The unique id assigned to the element. This is defined by the user and used to refer to the element in layouts.
"myElementId"
source
string
The id of the datasource which should be used for retrieving the data.
"rawDataSource"
config
string
The actual Highcharts Heatmap config. It can either be completely copy-pasted (including mock-data), or you can remove the data part, and instead use the source (configured outside of the highcharts config). Make sure that the column names inside the series object are matching the column names in the configured datasource.

Also make sure that the configured columns are of correct type (series can usually only be numeric columns). This is currently an error which is quite hard to find. If you open the developer console and see a highcharts error 14, than this suggests that you have wrong column types in the configured datasource.
Heatmap with Mock Data
  "chart": {
    "type": "heatmap",
    "marginTop": 40,
    "marginBottom": 80,
    "plotBorderWidth": 1
  },
  "title": {
    "text": "Discounts used by customers",
    "style": {}
  },
  "xAxis": {
    "categories": [
      "Alexander",
      "Marie",
      "Maximilian",
      "Sophia",
      "Lukas"
    ]
  },
  "yAxis": {
    "categories": [
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday"
    ],
    "title": null
  },
  "colorAxis": {
    "min": 0,
    "minColor": "#96ccc9",
    "maxColor": "#376276"
  },
  "legend": {
    "align": "right",
    "layout": "vertical",
    "margin": 0,
    "verticalAlign": "top",
    "y": 25,
    "symbolHeight": 280
  },
  "tooltip": {}


Example of full Heatmap config with mock data

  "elements": [
       {
         "id": "chart-middle",
         "type": "highcharts",
         "source": "raw_testSource",
         "config": {
           "chart": {
           "type": "heatmap",
           "marginTop": 40,
           "marginBottom": 80,
           "plotBorderWidth": 1
         },
         "title": {
           "text": "Discounts used by customers",
           "style": {}
         },
         "xAxis": {
           "categories": [
             "Alexander",
             "Marie",
             "Maximilian",
             "Sophia",
             "Lukas"
          ]
        },
        "yAxis": {
          "categories": [
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday"
          ],
          "title": null
        },
        "colorAxis": {
          "min": 0,
          "minColor": "#96ccc9",
          "maxColor": "#376276"
        },
        "legend": {
          "align": "right",
          "layout": "vertical",
          "margin": 0,
          "verticalAlign": "top",
          "y": 25,
          "symbolHeight": 280
        },
        "tooltip": {}
      }
    }
    // .. more elements
  ]