dashboard chart: set x-axis time manually

Andreas Meier

unread,

May 16, 2017, 4:55:55 AM5/16/17

to Node-RED

Hey guys,

I want to set the time of the x-axis in the ui-chart manually. Is that anyway possible?

steve rickus

unread,

May 16, 2017, 11:25:03 AM5/16/17

to Node-RED

It is possible, if you want to add all the chart data in one msg -- like showing historical data from a database query. If you are wanting to send multiple msgs with a single value and timestamp, that is not currently possible.

I just spent considerable time formatting my data into a json array that the chart could render -- so I will document that here, in case this helps someone...

Whenever the msg.payload is an array, it replaces all the data shown in the chart. So if you send an empty array you effectively clear the chart. To show a line chart with 2 lines, and 7 data points on each line (for example), the incoming msg.payload would look like this:

[
  {
    "key": "Line-1",
    "values": [
      {
        "x": "2017-05-08T00:00:00",
        "y": 0
      },
      {
        "x": "2017-05-09T00:00:00",
        "y": 1
      },
      {
        "x": "2017-05-10T00:00:00",
        "y": 2
      },
      {
        "x": "2017-05-11T00:00:00",
        "y": 3
      },
      {
        "x": "2017-05-12T00:00:00",
        "y": 2
      },
      {
        "x": "2017-05-13T00:00:00",
        "y": 0
      },
      {
        "x": "2017-05-14T00:00:00",
        "y": 1
      }
    ]
  },
  {
    "key": "Line-2",
    "values": [
      {
        "x": "2017-05-08T00:00:00",
        "y": 2
      },
      {
        "x": "2017-05-09T00:00:00",
        "y": 2
      },
      {
        "x": "2017-05-10T00:00:00",
        "y": 3
      },
      {
        "x": "2017-05-11T00:00:00",
        "y": 3
      },
      {
        "x": "2017-05-12T00:00:00",
        "y": 2
      },
      {
        "x": "2017-05-13T00:00:00",
        "y": 0
      },
      {
        "x": "2017-05-14T00:00:00",
        "y": 1
      }
    ]
  }
]

There may be other date formats that are recognized by the chart library and converted properly, but I'm not sure about that. There IS an option for formatting that date (e.g. to just show the time) on the ui_chart editor. It uses the moment.js library, and has many options for displays dates/times, but the x-axis values need to be valid javascript dates.

If your historical data is coming from a REST api or database query, you will most likely have to reformat the data structure to match the example above. For that I would use the change node, using a JSONata expression. In the next version of node-red, there is a tester built-in so you can see what your data will look like as you edit the expression (awesome!):

But for now, just go to try.jsonata.org and paste the json query results in the left-hand panel -- as you develop the expression in the upper-right panel, you will immediately see the results in the lower-right corner. Once you have the output correct, you can copy the expression from the exerciser back into the change node, replacing all "$$" references with "msg.payload", which is the root of the input to the change node.

--

Steve

Ross Newby

unread,

Sep 11, 2017, 5:44:29 PM9/11/17

to Node-RED

Hi, Im trying to achieve what Andreas wanted; specifying X and Y co-ords to a chart. Using just a function node and chart node, sending the msg.payload code specified by Steve, doesnt output anything to the chart. Any Ideas would be much appreciated :)

I'm attempting

Dave C-J

unread,

Sep 11, 2017, 7:01:30 PM9/11/17

to node...@googlegroups.com

There's a whole bunch of ongoing fixes/updates/improvements going into master around this area.