Looking for chart not with timedate in x-axis

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:
Screenshot 2022-10-25 at 16-56-16 Field Assessment of Cold Climate Air Source Heat Pumps - 1_700.pdf
I don’t have much knowledge of programming. I looked at apexcharts, plotly and influxdb/grafana, but without breakthrough.

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


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?

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
    - 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.

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.

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
  xaxis: numeric
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
  - 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.

Did you succeed with xaxis as numeric?
my code is

type: custom:apexcharts-card
    height: 400px
    title: C
    min: 1
    max: 30
    decimals: 0
    type: numeric
        colors: '#FFc0d3'
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
  - 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.