Adapting ApexCharts Card data_generator to the data format that has come with 2025.12.1

[mpw96]

📈

Something like this:

    data_generator: |
      return entity.attributes.timeseries.map((start, index) => {
        return [new Date(start["ts_utc"]*1000).getTime(), entity.attributes.timeseries[index]["val"]/1000.0]
      });

Now looks like this:

    data_generator: |
      return entity.attributes.timeseries.values.map((value, index) => {
        let sum_deltas = 0
        for (let i = 0; i < index; i++) {
          sum_deltas += entity.attributes.timeseries.deltas_in_minutes[i];
        }
        const timestamp_start = new Date(entity.attributes.timeseries.start_utc).getTime();
        const timestamp_at_index = timestamp_start + sum_deltas * 60 * 1000;
        return [timestamp_at_index, value/1000.0]
      });

Does anybody have shorter but still maintainable code?

[UDicke]

Thanks for that, I have no ideas, let alone a better one.

My card now looks like this.

type: custom:apexcharts-card
apex_config:
  chart:
    height: 400
  colorize_states: true
graph_span: 1.5d
span:
  start: hour
  offset: "+0"
now:
  show: true
  label: Jetzt
yaxis:
  - id: kwh
    min: 0
    apex_config:
      tickAmount: 5
  - id: euro
    min: 0.15
    max: 0.5
    opposite: true
    decimals: 4
    apex_config:
      tickAmount: 5
series:
  - entity: sensor.evcc_forecast_grid
    unit: Euro
    yaxis_id: euro
    name: Preis
    type: column
    color: blue
    data_generator: |
      return entity.attributes.timeseries.values.map((value, index) => {
        let sum_deltas = 0
        for (let i = 0; i < index; i++) {
          sum_deltas += entity.attributes.timeseries.deltas_in_minutes[i];
        }
        const timestamp_start = new Date(entity.attributes.timeseries.start_utc).getTime();
        const timestamp_at_index = timestamp_start + sum_deltas * 60 * 1000;
        return [timestamp_at_index, value/1000.0]
      });
    show:
      legend_value: true
      in_header: true
    stroke_width: 1
    float_precision: 4
  - entity: sensor.evcc_forecast_solar
    unit: kWh
    yaxis_id: kwh
    name: Solarprognose
    type: line
    color: yellow
    data_generator: |
      return entity.attributes.timeseries.values.map((value, index) => {
        let sum_deltas = 0
        for (let i = 0; i < index; i++) {
          sum_deltas += entity.attributes.timeseries.deltas_in_minutes[i];
        }
        const timestamp_start = new Date(entity.attributes.timeseries.start_utc).getTime();
        const timestamp_at_index = timestamp_start + sum_deltas * 60 * 1000;
        return [timestamp_at_index, value/1000.0]
      });
    show:
      legend_value: false
      in_header: false
    stroke_width: 2
    float_precision: 2
    extend_to: false

but the result is missing evcc_forecast_grid.

[UDicke]

Sorry, I took a closer look, a little bit beyond "copy paste" 😊, and now it works.
Datagenerator for evcc_forecast_grid:

    data_generator: |
      return entity.attributes.rates.values.map((value, index) => {
        let sum_deltas = 0
        for (let i = 0; i < index; i++) {
          sum_deltas += entity.attributes.rates.deltas_in_minutes[i];
        }
        const timestamp_start = new Date(entity.attributes.rates.start_utc).getTime();
        const timestamp_at_index = timestamp_start + sum_deltas * 60 * 1000;
        return [timestamp_at_index, value]
      });

Do you have any idea for having different colors above a value of some other sensor?
Alternative could be to add a horizontal line for that value.