This article describes how to design Area Range and Line Charts in APPS with the help of the Highcharts-Editor.
The ODML configuration used here can be found at the end of the article. It can also be copied and pasted to the App Builder.
Important
Please do only upload the columns that should be displayed within the final graph to the Highcharts-Editor, as it is pretty complex to get rid of unnecessary columns in the editor and they will otherwise mess up your JSON!
Within APPS it doesn't matter how many unnecessary columns are in the dataset.
Example
In APPS it is no problem (unused columns are not displayed at all as they are not mentioned in the graphs JSON):
In the Highcharts-Editor it can be hard to get rid of:
Configuration
Within the Highcharts-Editor:
1. Go to the "Templates" tab and then navigate to "Combinations > Arearange and line"
2. Within the "Customize Chart" tab, select: "Simple" > "Data Series"
- Choose column for range: "[column_name]" (in the example we use "range")
- Choose Series type: "arearange"
3. Go to Advanced > Series > Series[2] and delete "Series[2]:" (or delete in JSON)
Result
JSON
"version": "0.1",
"screens": [
{
"layout": "layout1",
"conditions": {
"minScreenWidth": 0
}
}
],
"layouts": [
{
"id": "layout1",
"type": "fixedGrid",
"config": {
"dim": {
"x": 24,
"y": 24
},
"containers": [
{
"id": "titlePos",
"pos": {
"x": 1,
"y": 1
},
"size": {
"w": 24,
"h": 4
}
},
{
"id": "chart1",
"pos": {
"x": 1,
"y": 5
},
"size": {
"w": 24,
"h": 8
}
}
]
},
"cellPadding": "5px",
"placements": [
{
"containerId": "titlePos",
"elementId": "welcomeTitle"
},
{
"containerId": "chart1",
"elementId": "chartVis"
}
]
}
],
"datasources": [
{
"id": "raw_testSource",
"origin": "raw",
"config": {
"schema": "table",
"data": [
{
"day": 1,
"range": 12,
"yHigh": 18,
"avg": 15
},
{
"day": 2,
"range": 14,
"yHigh": 22,
"avg": 18
},
{
"day": 3,
"range": 15,
"yHigh": 24,
"avg": 19.5
},
{
"day": 4,
"range": 18,
"yHigh": 26,
"avg": 22
},
{
"day": 5,
"range": 22,
"yHigh": 24,
"avg": 23
},
{
"day": 6,
"range": 27,
"yHigh": 38,
"avg": 32.5
},
{
"day": 7,
"range": 24,
"yHigh": 33,
"avg": 28.5
},
{
"day": 8,
"range": 19,
"yHigh": 27,
"avg": 23
},
{
"day": 9,
"range": 15,
"yHigh": 32,
"avg": 23.5
},
{
"day": 10,
"range": 13,
"yHigh": 28,
"avg": 20.5
}
]
}
}
],
"elements": [
{
"id": "welcomeTitle",
"type": "html",
"config": {
"html": "<h1>Hello World!</h1>"
}
},
{
"id": "chartVis",
"type": "highcharts",
"source": "raw_testSource",
"config": {
"title": {
"text": "My Arearange linechart"
},
"subtitle": {
"text": "Red shows range and light-blue shows the average"
},
"exporting": {},
"chart": {
"type": "line"
},
"series[0]": {
"type": "arearange"
},
"series": [
{
"name": "avg",
"type": "line",
"color": "red"
},
{
"name": "range",
"type": "arearange"
},
{
"name": "yHigh",
"showInLegend": false
}
],
"yAxis": {},
"xAxis": {},
"tooltip": {
"shared": true
},
"credits": {
"enabled": false
},
"pane": {
"background": []
},
"responsive": {
"rules": []
}
}
}
]
Related Articles
Labels in Highcharts
Design minimalistic Charts
Data Separator within a Chart