Span annotation on future data

[holger1414]

There seems to be no way to add span annotation on future data. For example Nordpool graphs.

Something like this

[cataseven]

Hi @holger1414 can you give an example for above chart? What would the start and end time for this graph? You mean spesific manual start and end date?

[holger1414]

I use it to show EV charging period.

apex charts code looks like this:

type: custom:config-template-card
variables:
  - Number(states['input_number.alexela_elektri_hind_aktuaalne'].state)
  - Number(states['sensor.alexela_elektri_hind_aktuaalne_aarmuslik'].state)
  - Number(states['input_number.laadimise_lavend'].state)
  - |
    (() => {
      const timeStr = states['sensor.ioniq_5_ev_off_peak_start_time'].state;
      if (!timeStr || timeStr === 'unknown') return 0;
      const parts = timeStr.split(':');
      const startSek = (parseInt(parts[0]) * 3600) + (parseInt(parts[1]) * 60);
      const msSudaooni = new Date().setHours(0,0,0,0);
      // Kui algusaeg on enne kella 10 hommikul, eeldame et see on järgmine päev
      const lisaPaev = (startSek < 36000) ? 86400000 : 0;
      return msSudaooni + (startSek * 1000) + lisaPaev;
    })()
  - |
    (() => {
      const timeStr = states['sensor.ioniq_5_ev_off_peak_end_time'].state;
      if (!timeStr || timeStr === 'unknown') return 0;
      const parts = timeStr.split(':');
      const loppSek = (parseInt(parts[0]) * 3600) + (parseInt(parts[1]) * 60);
      const msSudaooni = new Date().setHours(0,0,0,0);
      // Lõppaeg (peak end) on tavaliselt hommikul, seega lisame 24h
      return msSudaooni + (loppSek * 1000) + 86400000;
    })()
entities:
  - input_number.alexela_elektri_hind_aktuaalne
  - sensor.alexela_elektri_hind_aktuaalne_aarmuslik
  - input_number.laadimise_lavend
  - sensor.ioniq_5_ev_off_peak_start_time
  - sensor.ioniq_5_ev_off_peak_end_time
card:
  type: custom:apexcharts-card
  graph_span: 14h
  apex_config:
    chart:
      height: 240px
    legend:
      show: false
    tooltip:
      enabled: true
    annotations:
      xaxis:
        - x: ${vars[3]}
          x2: ${vars[4]}
          opacity: 0.2
  experimental:
    color_threshold: true
  header:
    title: Nordpool öö
    show: false
  span:
    start: day
    offset: +20h
  now:
    show: true
    label: AEG
  series:
    - entity: sensor.alexela_elektri_hind_aktuaalne
      stroke_width: 1
      curve: stepline
      color: 07b2f5
    - entity: sensor.nordpool_tunni_hinnad
      type: column
      curve: stepline
      group_by:
        func: last
        duration: 5min
      data_generator: |
        return [
          ...entity.attributes.raw_today.map((entry) => [new Date(entry.start).getTime(), entry.value]),
          ...entity.attributes.raw_tomorrow.map((entry) => [new Date(entry.start).getTime(), entry.value])
        ];
      stroke_width: 0
      opacity: 0.9
      float_precision: 3
      show:
        extremas: true
      color_threshold:
        - value: 0
          color: "#0264f7"
          opacity: 1
        - value: ${vars[2]}
          color: "#07a30e"
          opacity: 1
        - value: ${vars[0]}
          color: "#ffce08"
          opacity: 1
        - value: ${vars[1]}
          color: "#b50c09"
          opacity: 1
  yaxis:
    - decimals: 4
      show: true
      min: 0
grid_options:
  columns: 36
  rows: 3
visibility:
  - condition: state
    entity: binary_sensor.nordpool_homme
    state: "on"

sorry for the formating. I can not figure out why it looses formatting despite using "code"

[cataseven]

@holger1414 Please try update 2.24

You will be able to input manual date time and also jinja template

[holger1414]

I does exactly what I asked for :)

but something happens after automatic refresh

and then this. Fonts streched etc.

Whithout any input from me.
I have flushed the cache several times.

Also something else happened after ver 2.20

before

after

Third graph disappears.

[cataseven]

Can you send yaml code of the third chart? Is it long teem data or regular sensor entity?

[holger1414]

Third chart YAML

`type: custom:statistics-graph-chart-card
card_icon_position: left
show_grid: true
show_tooltip: true
show_tooltip_total: false
show_legend: false
show_y_axis: true
show_y2_axis: true
show_y_axis_label: false
show_x_axis: true
show_x_ticks: false
show_y_ticks: false
logarithmic: false
animate_graph: false
stacked: false
sparkline: false
scroll_mode: scrollbar
show_interval_picker: true
interval_picker_position: center
interval_options:

• 24H
• 3D
• 7D
• 14D
  show_attribute_list: false
  attribute_list_position: center
  hours_to_show: 168
  points_per_hour: 2
  auto_scale_points: true
  height: 150
  update_interval: 60
  show_full_period: false
  bar_spacing: 4
  datetime_format: system
  tooltip_sync: true
  energy_date_sync: false
  show_date_picker: false
  date_picker_position: top
  align_header: left
  state_layout: default
  group_by: interval
  chart_mode: timeline
  entities:
• entity: sensor.auto_100km_hind
  name: 100km/€
  icon: null
  icon_color: null
  color: "#f6d32d"
  y_axis: secondary
  graph_type: line
  line_width: 2.5
  points_per_hour: null
  show_state: true
  show_state_last: false
  state_adaptive_color: false
  show_graph: true
  show_in_legend: false
  show_points: false
  point_colors: null
  show_line: true
  show_fill: true
  gradient: true
  smooth: false
  decimals: 2
  aggregate_func: avg
  number_format: system
  datetime_format: system
  trend_period_hours: 1
  show_trend_icon: false
  rise_fall_colors:
  enabled: false
  increase: "#2ecc71"
  decrease: "#e74c3c"
  stable: "#95a5a6"
  color_thresholds:
  enabled: false
  values: []
  show_extrema: always
  show_average: false
  name_size: null
  icon_size: null
  state_size: 24px
  state_color: null
  trend_icon_size: null
  attribute: null
  value_factor: 0
  fixed_value: false
  state_map: null
  align_state: left
  tap_action: null
  upper_bound: ~2
  annotations: []
  cache: true
  compare_with: false
  state_map: null
  grid_options:
  columns: full
  `

Yes, it is LTD.

[cataseven]

Can you also download and send csv file?

[holger1414]

history (1).csv