Looking for chart not with timedate in x-axis

[derSchreifritz]

hi,
how can I get a chart to display 2 sensor values against each other, as in xy. I guess it’s called scatter chart. I only find the possibility to have date/time on the x axis. I would like to monitor my heatpump efficiency (COP) at various outside temperatures and get a chart that looks somewhat like these:


I don’t have much knowledge of programming. I looked at apexcharts, plotly and influxdb/grafana, but without breakthrough.

[tom_l]

The reason this is not easy to do is that your two sensors are very likely not time correlated.

e.g.

Sensor 1 last updated at 10:10:15, and before that 10:09:45
Sensor 2 last updated at 10:10:30, and before that 10:10:00

Which points from Sensor 1 correlate to Sensor 2?

[derSchreifritz]

thanks, good point. I want to measure every 12 hours, so there is a sensor that takes the average temperature and one for the COP every 12 hours. I made another sensor that collects both values a few seconds later, but I don’t know how to format and process that further:

- trigger:
    - platform: time_pattern
      hours: /12
      minutes: 1 
      seconds: 5
   sensor:  
    - name: cop 6 hourly vs temp
      unit_of_measurement: cop, °C
      state: >
             {{ (states('sensor.cop_12_hourly')|float(0))}}, {{ (states('sensor.average_temp_last_12hrs')|float(0)) }}

Probably looks horrible, and the mixed “unit of measement” doesn’t get anywhere.
I managed to install the scatter plugin into grafana for a start.

[michaelblight (Michael)]

Have you had a look at ApexCharts? The HA integration is very much driven by the x-axis being time, but you can use “apex_config” to override anything and “data_generator” to provide the pairs of points. However, getting sensible pairs of points from HA might be tricky as Tom points out.

[derSchreifritz]

is the sensor above a good start? Is that a usable correlation of the 2 source sensors?
I looked at apexcharts, but can’t get it work yet, as I can’t find examples for “apex_config” or “data_generator” that help.
With the above shown sensor, I made up this in apexcharts, but its obviously my madeup copy/paste language that it doesn’t understand:

type: custom:apexcharts-card
chart_type: scatter
apex_config:
  xaxis: numeric
header:
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
series:
  - entity: sensor.cop_6_hourly_vs_temp
data_generator: |
  return entity.attributes.cop.map((cop, index) => {
    return [new Date(cop).getTime(), entity.attributes.°C[index]];
  });
xaxis: cop
yaxis: °C

more hints appreciated.

[ChecksumDK]

Did you succeed with xaxis as numeric?
my code is

type: custom:apexcharts-card
apex_config:
  chart:
    height: 400px
  xaxis:
    title: C
    min: 1
    max: 30
    decimals: 0
    type: numeric
    labels:
      style:
        colors: '#FFc0d3'
header:
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
series:
  - entity: sensor.be2013_battery_level
    data_generator: |
      const data = [];
      data.push([5, 19])
      data.push([4, 22])
      data.push([3, 26])
      data.push([2, 30])
      data.push([1, 22])
      return data.reverse();

apex charts simply show current day as a number even though my data_generator inputs a simple data series with 2 integers.