Anyone have an ApexChart with a templated Span Offset?

[mbarne36]

Hi.
I have an Apexchart for energy usage. I wanted to add buttons to be able to dynamically scroll back through historical data by changing the Offset using a template that picks up a helper value. I’ve used the Custom:Card_Templater to allow the Span Offset to become Span Offset_Template.

The good news is that it works. My Helper Buttons allow me to wind back through historical days of energy usage.

The problem is that when the dashboard is shown, for about 2 seconds ApexCharts complains that Offset value is not valid. Its as if card-templater takes 2 seconds to work out that we’re trying to pull offset from a helper via a template.

Anyone have this working seamlessly without an error being thrown for 2 seconds every tim the graph is shown?

thanks

type: custom:card-templater
entities:
  - input_text.graph_helper_offset_days
  - input_text.graph_helper_offset_title

card:
  type: custom:apexcharts-card
  graph_span: 24h
  update_interval: 10m
  span:
    start: day
    offset_template: '{{ states(''input_text.graph_helper_offset_days'') }}'

[vingerha]

This is mine, offset is on series-level

 - type: vertical-stack
          cards:
            - type: custom:card-templater
              card:
                type: custom:apexcharts-card
                graph_span: 30h
                header:
                  show: true
                  title: Conso ELEC temps réel
                  show_states: true
                  colorize_states: true
                series:
                  - entity: sensor.linky_daily
                    curve: smooth
                    color: '#df6366'
                    offset_template: '-{{ states(''input_number.offset_days'') }}d'
                    type: column
                    opacity: 0.6
                    stroke_width: 1
                    statistics:
                      type: state
                  - entity: sensor.linky_daily
                    curve: smooth
                    offset_template: '-{{ states(''input_number.offset_days_2'') }}d'
                    color: green
                    type: column
                    opacity: 0.1
                    stroke_width: 0.2
                    statistics:
                      type: state
              entities:
                - entity: input_number.offset_days_2
                - entity: input_number.offset_days

[mbarne36]

Hi… oh thats very interesting. so you are doing things pretty much identically, but you’re using the Offset in the series not at the chart level… and you don’t get an error pop up when you load the graph for 2 seconds ?.. I am going to try that… nice once, and fingers crossed. thanks @vingerha

[vingerha]

The error indeed pops-up but very briefly, cannot make a screenshot. I think it error’s on the template as it first has no value, then gets the value from the input_number…guesswork only

[mbarne36]

oh poo :-(.

[mbarne36]

Thanks @vingerha, but using your method gives the same result. I get a 2-3 second error while the card-templatar “works out” what the value should be.

Its almost as if its a weakness of card-templatar in that we want it to resolve the “_template” into a (valid) default value while it resolves it from the watched entities.

Anyone else trying this sort of thing ?
thanks

[vingerha]

Try to change the input text to input number, depending on what is in the entities itwas slower I remember…
And I also believe it is related to the template card…will try tthe other card config-template tomorrow

[michaelblight (Michael)]

Have you tried ‘cheating’ and putting in a zero, such that it sees the value as “-0” before card templater does its magic? ie.

offset_template: '-0{{ states(''input_number.offset_days'') }}d'

[vingerha]

@michaelblight

“-0”

Just tried that, makes it actually slower for me

I tried with the other template card, this seems nicer, at least not error and same response …

        - type: vertical-stack
          cards:
            - type: custom:config-template-card
              card:
                type: custom:apexcharts-card
                graph_span: 30h
                header:
                  show: true
                  title: >-
                    ${'-' + parseInt(states['input_number.offset_days'].state)
                    +'d'}
                  show_states: true
                  colorize_states: true
                series:
                  - entity: sensor.linky_daily
                    curve: smooth
                    color: '#df6366'
                    offset: ${'-' + states['input_number.offset_days'].state +'d'}
                    type: column
                    opacity: 0.6
                    stroke_width: 1
                    statistics:
                      type: state
                  - entity: sensor.linky_daily
                    curve: smooth
                    offset: ${'-' + states['input_number.offset_days_2'].state +'d'}
                    color: green
                    type: column
                    opacity: 0.1
                    stroke_width: 0.2
                    statistics:
                      type: state
              entities:
                - input_number.offset_days_2
                - input_number.offset_days

[mbarne36]

I’ll try that tonight, thanks @vingerha and @michaelblight

[mbarne36]

ok, boom. so the moral of the story is that both card-templatar and config-template-card are great, BUT, card-templatar throws a visible error when the dashboard is loaded for 2-3 seconds while the graphs are loaded and the template is evaluated. config-template-card DOES NOT. It is slick and seamless
Thanks to @vingerha and @michaelblight for commenting and assisting. I now have beautiful graphs that seamlessly and dynamically update to scrolling offset values.

[Homergy]

Your dashboards look awsome, are you willing to share your code?

[rodgers86]

Hello!!

I’ve got this working, except I currently have to refresh home assistant after changing the input_select or input_number (I’ve tried both methods)

How do you force the chart to refresh?

[vingerha]

With me that started working with the inut_number(s) in the entities section

[tvds (Tim)]

That looks pretty neat
Willing to share the code and the config of the helpers? Great idea to have one helper for the graph name (date).