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