How to present Node-Red saving scheme in Lovelace APEX CHART

Can anyone help with this?
I want to create an APEX CHART for ON/OFF schemes that are generated in Node-Red in a Raspberry / Hassio / Docker environment.

The actually source is the ”Energy Cost Saver” i Node-Red.

Displaying retrospective schemes is easy, but I want to present the scheme for the coming 24 to 36 hours. APEX CHART can do this.
In node-red the scheme look like below, with a variable number of Java objects, denoting the schedule for the next 24 or 36 hours.

schedule: array[12]
[0 … 9]
0: object
time: “2022-03-26T00:00:00.000+01:00”
value: false
1: object
time: “2022-03-26T04:00:00.000+01:00”
value: true
2: object
time: “2022-03-26T06:00:00.000+01:00”
value: false
3: object
time: “2022-03-26T10:00:00.000+01:00”
value: true
…… etc etc …

I can transfer the data from Node-Red to Home Assistant via a Node Red “Node-RED Companion Integration Entity”. This Entity however has a length limit that cannot carry the whole schedule. The max length is about 256 (?) characters.
The information needed to regain the schedule is however, the start datetime and the value on/off for the next 24 – 36 hour.
For example the following coding is quite dense and carries the whole information:
Explained :
Start-datetime, value at start, value at start + 1 hour, value at start + 2 hours , etc.

Now we can transfer the information in a sensor, here called ‘sensor.vv_spareplan’, and use a template entity in configuration.yaml to reformat the information to a format that can be used by the APEX CHART generator to show a nice schedule for the coming 24 to 36 hours.
I have tried and failed a number of times. I think there must be a way to do this, but are lacking the knowledge.

For example I have tried this template to creates a sensor in “configuration.yaml” with attribute that can be used with APEX CHART data generator:

    friendly_name: "VVB_plan"
    value_template: "on"
      start: >
        {% set vv_plan_list = states('sensor.vv_spareplan').split(',') %}
        {{ vv_plan_list[0]}}
      schedule: >
        {% set vv_plan_list = states('sensor.vv_spareplan').split(',') %}
        {% set indent1 = '  - ' %}
        {% set indent2 = '   ' %}
        ' '
        {% for i in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14,15,16,17,18,19,20,21,22,23] %}

        {{indent1}}start: {{ i}}

        {{indent2}}value: {{ vv_plan_list[i+1] }}
        {% endfor %}

The resulting sensor in HA Develop Tools, States is:
start: “2022-03-26T00:00:00.000+01:00”
schedule: ’ ’

  • start: 0
    value: 0
  • start: 1
    value: 0
  • start: 2
    value: 0
  • start: 3
    value: 0
  • start: 4
    value: 1
    … etc etc …

The APEX CHART cannot render this, and I am struggling to find out how to solve this. I cannot get a line break right after “schedule:” without entering a line of text. I also don’t know if this would solve the problem.

Here is an example of a sensor that works OK with APEX CHART.


  • start: ‘2022-03-27T00:00:00+01:00’
    end: ‘2022-03-27T01:00:00+01:00’
    value: 2.31
  • start: ‘2022-03-27T01:00:00+01:00’
    end: ‘2022-03-27T03:00:00+02:00’
    value: 2.292

APEX CHART data generator for this sensor.
data_generator: |
return, index) => {
return [new Date(start[“start”]).getTime(), entity.attributes.raw_today[index][“value”]];

I have summed up some of the questions I have.

  • How do you build/populate a suitable sensor Entity template in jinja that will work with APEX CHART?

  • Is it enough to build a pure text looking OK with jinja?

  • The Jinja whitespace formatting is difficult, how to get a line shift right after the “schedule:”?

  • The Home Assistant APEX CHART documentation seems to prefer a format with datetime for every entry, not only a X-axis index. Can we create this with a jinja datetime function adding one hour for each entry?

  • How do you build a custom sensor data for HA? Is it ok if the pure text out of Jinja is following Python standards or should you go through JSON encoding?

To get to the result here the data have passed Red-Node Javascript; Template Jinja; HA yaml and maybe Python, quite challenging. Another way to solve the whole problem might be using MQTT, but I feel like I am close to a working solution.

Thankful for any hints/ Espen

I gave up this approach and created a Node-red → MQTT → Entity template → Apex Chart information flow instead, and this works fine.

1 Like

would you mind share your config?

1 Like

I too am struggling with this exact same issue, and are very interested in your code, if you would like to share :slight_smile: