This article is outdated, you can access the most current version here: https://doc.onedata.de/apps/apps-docs/odml-documentation/AppBuilder/elements/HighchartsElement.html
Article Content
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
]
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