Dynamic range for x-axis in highcharts time-series

Apps (Frontend) Apps Builder
1

Dear community,

how can I dynamically change the x-range for a time-series in apps?

I’ve found the “xAxis” property in the highcharts documentation with min and max values but don’t know how to set it properly (neither manually nor dynamically) (xAxis.min | Highcharts Stock JS API Reference)

2

OK, I might be be missing something here but how about neither setting min nor max in the first place? The plot then should scale its axis according to the min and max values stemming from the data… At least this is the default behavior I’ve experienced so far.
Can you post your current code to make it easier to comprehend?

3

Oh, and on the manuall setting bounds thing: As far as my experience goes, highcharts expects “time values” as milliseconds unix epoch.

4

Thanks for the reply. The major problem is that when not specifying min and max, the data simply gets cut off so I currently have to manually filter to the desired time window in the workflow.

The raw data is sampled every 5 minutes, and the displayed data cuts off after 100 samples (8 hours and 15 minutes)

This is the element configuration:

    {
      "id": "time-series chart",
      "type": "highcharts",
      "source": "cache time-series pivot",
      "config": {
        "chart": {
          "type": "line"
        },
        "title": {
          "text": "Cache Time Series"
        },
        "series": [],
        "$series": {
          "type": "object",
          "value": "[{\"name\": {{filters.filter_chart.col_name.values | list?separator=},{\"name\": }} }]"
        }
      }
    }

Tried the following settings, but the display simply stays blank

"xAxis": {
          "min":1614164400,
          "max": 1614250800
        }

The timestamps correspond to 2021-02-24 12:00:00 and 2021-02-25 12:00:00

5

Have you tried adding "type": "datetime" to your xAxis definition? Seems to me as if your visualization is unaware of the axis type. When you have OD timestamps as x values, they might moreover be interpreted as simple strings and therefore your visualization might stop after 100 samples (100 sounds like a likely default threshold…).
For an App of mine, I was able to have a dynamic scaling on my axis (actually yAxis in my case but inverted plot) when I chose milliseconds unix time for the timestamp data (e.g. 1614222003000 for Thu Feb 25 2021 03:00:03 GMT+0000, your min and max values seem to be seconds unix time BTW) and datetime as axis type.

6

Also note, that a zoomable visualization might come in handy if you have both high resolution and long interval for your data points.
My config back then was as follows (plotting time spans from start to end on an inverted bar chart):

 "config": {
    "chart": {
      "type": "columnrange",
      "inverted": true,
      "zoomType": "xy"
    },
    "data": {
      "dateFormat": "MM-dd hh:mm"
    },
    "grouping": true,
    "connectNulls": true,
    "title": {
      "text": ""
    },
    "xAxis": {
      "type": "category",
      "title": "Schedule",
      "opposite": true,
      "uniqueNames": true,
      "visible": true,
      "labels": {
        "align": "left",
        "title": {
          "enabled": false
        },
        "useHTML": true,
        "reserveSpace": true,
        "style": {
          "font": "12pt \"Arial Narrow\"",
          "color": "rgb(0,0,0)",
          "textOverflow": "ellipsis"
        }
      }
    },
    "yAxis": {
      "title": {
        "text": "Execution Times"
      },
      "dateTimeLabelFormats": {
        "millisecond": "%H:%M:%S.%L",
        "second": "%H:%M:%S",
        "minute": "%H:%M",
        "hour": "%H:%M",
        "day": "%e. %b",
        "week": "%e. %b",
        "month": "%b '%y",
        "year": "%Y"
      },
      "type": "datetime"
    },
    "tooltip": {
      "headerFormat": "",
      "pointFormat": "<b>{point.name}:</b><br/> {point.low:%H:%M:%S} - {point.high:%H:%M:%S}",
      "shared": false,
      "followPointer": true
    },
    "plotOptions": {
      "columnrange": {
        "grouping": false,
        "colorByPoint": true
      }
    },
    "legend": {
      "enabled": false
    },
    "series": [
      {
        "name": "Schedule",
        "columnName": "schedule_name",
        "minPointLength": 10,
        "type": "columnrange"
      },
      {
        "name": "start",
        "columnName": "start_time",
        "type": "columnrange"
      },
      {
        "name": "end",
        "columnName": "end_time",
        "type": "columnrange"
      }
    ]
  }

Yielded the following (both-axis-zoomable) visualization:

image
image1235×1001 69.8 KB

1 Like
7

Shame on me. The cut-off of the data had nothing to do with the chart configuration.

It’s now working. Thanks @Flogge

8
9

Thanks for the highcharts config, it’s really valuable to me as it gives me several insights into how to properly configure a columnrange chart.