How to create a horizontal bar chart with a single column composed of multicolored parts

plotly.js
1

Hi, I have been using Plotly (JS) for some time to display data in a line chart. I have a device that sends me data every 10 minutes about the battery status of the device. I would need to create a graph that just has an X axis and the time the data was sent on it. The graph should look like a horizontal bar. The column will be made up of individual strips that will be colored according to the data received e.g. if the battery is more than 3.7V the strip will be colored green, if it is less than 3.7V it will be colored yellow and if it is less than 3.3V the strip will be red. Can anyone advise me how to do this? I’ve searched variously on the internet, but I can’t find anything …

2

Hey @masterboy welcome to the forums.

Are you referring to something like this?

Maybe you could add some more information.

3

Yes, this is what I am looking for. The X axis should be the timeline and the Y axis will have colored bars corresponding to the measured battery voltage value. The battery voltage is converted to values from 0 to 100% using a simple formula. The individual strips are then coloured according to this value, so that at 0% the colour is red and at 100% the colour is green. For the other values, a colour transition is made between green and red.

Currently my chart looks like this:

Snímek obrazovky 2023-10-18 v 6.58.21
Snímek obrazovky 2023-10-18 v 6.58.21848×608 51.3 KB

The second graph where the battery status is plotted I would like to replace with the above mentioned graph. I am attaching the code of my graph below.

<!DOCTYPE html>
<html lang="cs">
 <head>
  <title>Metheus</title>
  <script src="plotly.js"></script>
  <meta charset="UTF-8" />
 </head>
 <body>
  <div id="chart" style="display: block; margin: auto; width: 900px; height: 650px;"></div>
  <script>

var temp = {
    x: ['2023-10-16 19:00:00', '2023-10-16 19:10:00', '2023-10-16 19:20:00', '2023-10-16 19:30:00', '2023-10-16 19:40:00', '2023-10-16 19:50:00', '2023-10-16 20:00:00', '2023-10-16 20:10:00', '2023-10-16 20:20:00', '2023-10-16 20:30:00', '2023-10-16 20:40:00', '2023-10-16 20:50:00', '2023-10-16 21:00:00', '2023-10-16 21:10:00', '2023-10-16 21:20:00', '2023-10-16 21:30:00', '2023-10-16 21:40:00', '2023-10-16 21:50:00', '2023-10-16 22:00:00', '2023-10-16 22:10:00', '2023-10-16 22:20:00', '2023-10-16 22:30:00', '2023-10-16 22:40:00', '2023-10-16 22:50:00', '2023-10-16 23:00:00', '2023-10-16 23:10:00', '2023-10-16 23:20:00', '2023-10-16 23:30:00', '2023-10-16 23:40:00', '2023-10-16 23:50:00', '2023-10-17 00:10:00', '2023-10-17 00:20:00', '2023-10-17 00:30:00', '2023-10-17 00:40:00', '2023-10-17 00:50:00', '2023-10-17 01:00:00', '2023-10-17 01:10:00', '2023-10-17 01:20:00', '2023-10-17 01:30:00', '2023-10-17 01:40:00', '2023-10-17 01:50:00', '2023-10-17 02:00:00', '2023-10-17 02:10:00', '2023-10-17 02:20:00', '2023-10-17 02:30:00', '2023-10-17 02:40:00', '2023-10-17 02:50:00', '2023-10-17 03:00:00', '2023-10-17 03:10:00', '2023-10-17 03:20:00', '2023-10-17 03:30:00', '2023-10-17 03:40:00', '2023-10-17 03:50:00', '2023-10-17 04:00:00', '2023-10-17 04:10:00', '2023-10-17 04:20:00', '2023-10-17 04:30:00', '2023-10-17 04:40:00', '2023-10-17 04:50:00', '2023-10-17 05:00:00', '2023-10-17 05:10:00', '2023-10-17 05:20:00', '2023-10-17 05:30:00', '2023-10-17 05:40:00', '2023-10-17 05:50:00', '2023-10-17 06:00:00', '2023-10-17 06:10:00', '2023-10-17 06:20:00', '2023-10-17 06:30:00', '2023-10-17 06:40:00', '2023-10-17 06:50:00', '2023-10-17 07:00:00', '2023-10-17 07:10:00', '2023-10-17 07:20:00', '2023-10-17 07:30:00', '2023-10-17 07:40:00', '2023-10-17 07:50:00', '2023-10-17 08:00:00', '2023-10-17 08:10:00', '2023-10-17 08:20:00', '2023-10-17 08:30:00', '2023-10-17 08:40:00', '2023-10-17 08:50:00', '2023-10-17 09:00:00', '2023-10-17 09:10:00', '2023-10-17 09:20:00', '2023-10-17 09:30:00', '2023-10-17 09:40:00', '2023-10-17 09:50:00', '2023-10-17 10:00:00', '2023-10-17 10:10:00', '2023-10-17 10:20:00', '2023-10-17 10:30:00', '2023-10-17 10:40:00', '2023-10-17 10:50:00', '2023-10-17 11:00:00', '2023-10-17 11:10:00', '2023-10-17 11:20:00', '2023-10-17 11:30:00', '2023-10-17 11:50:00', '2023-10-17 12:00:00', '2023-10-17 12:10:00', '2023-10-17 12:20:00', '2023-10-17 12:30:00', '2023-10-17 12:40:00', '2023-10-17 12:50:00', '2023-10-17 13:00:00', '2023-10-17 13:10:00', '2023-10-17 13:20:00', '2023-10-17 13:30:00', '2023-10-17 13:40:00', '2023-10-17 13:50:00', '2023-10-17 14:00:00', '2023-10-17 14:10:00', '2023-10-17 14:20:00', '2023-10-17 14:30:00', '2023-10-17 14:40:00', '2023-10-17 14:50:00', '2023-10-17 15:00:00', '2023-10-17 15:10:00', '2023-10-17 15:20:00', '2023-10-17 15:40:00', '2023-10-17 15:50:00', '2023-10-17 16:00:00', '2023-10-17 16:10:00', '2023-10-17 16:20:00', '2023-10-17 16:30:00', '2023-10-17 16:40:00', '2023-10-17 16:50:00', '2023-10-17 17:00:00', '2023-10-17 17:10:00', '2023-10-17 17:20:00', '2023-10-17 17:30:00', '2023-10-17 17:40:00', '2023-10-17 17:50:00', '2023-10-17 18:00:00', '2023-10-17 18:10:00', '2023-10-17 18:20:00', '2023-10-17 18:30:00', '2023-10-17 18:40:00', '2023-10-17 18:50:00', '2023-10-17 19:00:00', '2023-10-17 19:10:00', '2023-10-17 19:20:00', '2023-10-17 19:30:00', '2023-10-17 19:40:00', '2023-10-17 19:50:00', '2023-10-17 20:00:00', '2023-10-17 20:10:00', '2023-10-17 20:30:00', '2023-10-17 20:40:00', '2023-10-17 20:50:00', '2023-10-17 21:00:00', '2023-10-17 21:10:00', '2023-10-17 21:20:00', '2023-10-17 21:30:00', '2023-10-17 21:40:00', '2023-10-17 21:50:00', '2023-10-17 22:00:00', '2023-10-17 22:10:00', '2023-10-17 22:20:00', '2023-10-17 22:30:00', '2023-10-17 22:50:00', '2023-10-17 23:10:00', '2023-10-17 23:20:00', '2023-10-17 23:30:00', '2023-10-17 23:40:00', '2023-10-18 00:00:00', '2023-10-18 00:10:00', '2023-10-18 00:20:00', '2023-10-18 00:30:00', '2023-10-18 00:40:00', '2023-10-18 00:50:00', '2023-10-18 01:00:00', '2023-10-18 01:10:00', '2023-10-18 01:20:00', '2023-10-18 01:30:00', '2023-10-18 01:40:00', '2023-10-18 01:50:00', '2023-10-18 02:00:00', '2023-10-18 02:10:00', '2023-10-18 02:20:00', '2023-10-18 02:30:00', '2023-10-18 02:40:00', '2023-10-18 02:50:00', '2023-10-18 03:00:00', '2023-10-18 03:10:00', '2023-10-18 03:20:00', '2023-10-18 03:30:00', '2023-10-18 03:40:00', '2023-10-18 03:50:00', '2023-10-18 04:00:00', '2023-10-18 04:10:00', '2023-10-18 04:30:00', '2023-10-18 04:40:00', '2023-10-18 04:50:00', '2023-10-18 05:00:00', '2023-10-18 05:10:00', '2023-10-18 05:20:00', '2023-10-18 05:30:00', '2023-10-18 05:40:00', '2023-10-18 05:50:00', '2023-10-18 06:00:00', '2023-10-18 06:10:00', '2023-10-18 06:20:00', '2023-10-18 06:30:00', '2023-10-18 06:40:00'],   
    y: [23.0, 22.8, 22.9, 22.7, 22.6, 22.5, 22.5, 22.4, 22.4, 22.3, 22.3, 22.3, 22.2, 22.1, 22.1, 22.0, 21.9, 22.0, 22.0, 21.8, 21.9, 21.9, 21.8, 21.7, 21.8, 21.7, 21.6, 21.7, 21.6, 21.7, 21.5, 21.6, 21.5, 21.5, 21.4, 21.4, 21.4, 21.4, 21.4, 21.4, 21.2, 21.3, 21.3, 21.3, 21.2, 21.2, 21.0, 21.2, 21.1, 21.1, 21.1, 21.1, 21.0, 21.0, 21.0, 20.9, 21.0, 20.9, 20.8, 21.0, 20.9, 20.9, 20.8, 20.8, 20.8, 20.7, 20.7, 20.8, 20.8, 20.6, 20.7, 20.7, 20.6, 20.8, 20.7, 20.7, 18.4, 18.0, 17.6, 17.4, 17.6, 17.6, 17.3, 17.3, 17.5, 17.5, 17.5, 17.6, 17.4, 17.4, 17.8, 18.1, 18.0, 18.0, 18.2, 18.4, 18.8, 18.6, 19.5, 20.9, 22.4, 22.5, 23.8, 24.1, 23.2, 23.8, 23.6, 23.4, 23.8, 24.0, 23.1, 23.3, 23.4, 22.6, 23.1, 22.2, 22.8, 22.6, 22.6, 22.6, 22.4, 22.0, 22.7, 23.0, 22.9, 22.7, 22.7, 22.6, 22.5, 22.5, 22.5, 22.4, 22.2, 22.2, 22.1, 22.1, 22.2, 22.1, 22.0, 22.0, 22.1, 22.0, 21.9, 21.8, 21.7, 21.8, 21.8, 21.7, 21.7, 21.6, 21.5, 21.6, 21.5, 21.4, 21.4, 21.3, 21.4, 21.2, 21.2, 21.3, 21.2, 21.2, 21.1, 21.0, 21.0, 21.0, 21.0, 20.9, 20.8, 20.8, 20.9, 20.8, 20.8, 20.8, 20.7, 20.6, 20.6, 20.5, 20.7, 20.6, 20.6, 20.5, 20.5, 20.5, 20.5, 20.5, 20.4, 20.4, 20.4, 20.4, 20.3, 20.4, 20.2, 20.3, 20.2, 20.3, 20.2, 20.2, 20.2, 20.1, 20.1, 20.1, 20.1, 20.1, 13.9, 15.8, 15.5], 
//    name: 'Teplota [°C]',
    type: 'scatter',
    mode: 'lines', 
    line: {
        color: 'rgb(255, 0, 0)',
        width: 1
    },
    xaxis: 'x',
    yaxis: 'y1',
    connectgaps: false,
//    hovertemplate: '%{y}°C<extra></extra>'
    hovertemplate: 'Temperature: %{y:.1f}°C<extra></extra>'
//    hovertemplate: 'Temperature:<br>%{x|%d.%m.%Y %H:%M}<br>%{y:.1f}°C<extra></extra>'
//    hovertemplate: '%{x|%d.%m.%Y %H:%M}: %{y:.1f}°C<extra></extra>'
//    hovertemplate: 'Date: %{x|%d.%m.%Y %H:%M}<br>' + 'Temperature: %{y:.1f}°C<extra></extra>'
};

var hum = {
    x: ['2023-10-16 19:00:00', '2023-10-16 19:10:00', '2023-10-16 19:20:00', '2023-10-16 19:30:00', '2023-10-16 19:40:00', '2023-10-16 19:50:00', '2023-10-16 20:00:00', '2023-10-16 20:10:00', '2023-10-16 20:20:00', '2023-10-16 20:30:00', '2023-10-16 20:40:00', '2023-10-16 20:50:00', '2023-10-16 21:00:00', '2023-10-16 21:10:00', '2023-10-16 21:20:00', '2023-10-16 21:30:00', '2023-10-16 21:40:00', '2023-10-16 21:50:00', '2023-10-16 22:00:00', '2023-10-16 22:10:00', '2023-10-16 22:20:00', '2023-10-16 22:30:00', '2023-10-16 22:40:00', '2023-10-16 22:50:00', '2023-10-16 23:00:00', '2023-10-16 23:10:00', '2023-10-16 23:20:00', '2023-10-16 23:30:00', '2023-10-16 23:40:00', '2023-10-16 23:50:00', '2023-10-17 00:10:00', '2023-10-17 00:20:00', '2023-10-17 00:30:00', '2023-10-17 00:40:00', '2023-10-17 00:50:00', '2023-10-17 01:00:00', '2023-10-17 01:10:00', '2023-10-17 01:20:00', '2023-10-17 01:30:00', '2023-10-17 01:40:00', '2023-10-17 01:50:00', '2023-10-17 02:00:00', '2023-10-17 02:10:00', '2023-10-17 02:20:00', '2023-10-17 02:30:00', '2023-10-17 02:40:00', '2023-10-17 02:50:00', '2023-10-17 03:00:00', '2023-10-17 03:10:00', '2023-10-17 03:20:00', '2023-10-17 03:30:00', '2023-10-17 03:40:00', '2023-10-17 03:50:00', '2023-10-17 04:00:00', '2023-10-17 04:10:00', '2023-10-17 04:20:00', '2023-10-17 04:30:00', '2023-10-17 04:40:00', '2023-10-17 04:50:00', '2023-10-17 05:00:00', '2023-10-17 05:10:00', '2023-10-17 05:20:00', '2023-10-17 05:30:00', '2023-10-17 05:40:00', '2023-10-17 05:50:00', '2023-10-17 06:00:00', '2023-10-17 06:10:00', '2023-10-17 06:20:00', '2023-10-17 06:30:00', '2023-10-17 06:40:00', '2023-10-17 06:50:00', '2023-10-17 07:00:00', '2023-10-17 07:10:00', '2023-10-17 07:20:00', '2023-10-17 07:30:00', '2023-10-17 07:40:00', '2023-10-17 07:50:00', '2023-10-17 08:00:00', '2023-10-17 08:10:00', '2023-10-17 08:20:00', '2023-10-17 08:30:00', '2023-10-17 08:40:00', '2023-10-17 08:50:00', '2023-10-17 09:00:00', '2023-10-17 09:10:00', '2023-10-17 09:20:00', '2023-10-17 09:30:00', '2023-10-17 09:40:00', '2023-10-17 09:50:00', '2023-10-17 10:00:00', '2023-10-17 10:10:00', '2023-10-17 10:20:00', '2023-10-17 10:30:00', '2023-10-17 10:40:00', '2023-10-17 10:50:00', '2023-10-17 11:00:00', '2023-10-17 11:10:00', '2023-10-17 11:20:00', '2023-10-17 11:30:00', '2023-10-17 11:50:00', '2023-10-17 12:00:00', '2023-10-17 12:10:00', '2023-10-17 12:20:00', '2023-10-17 12:30:00', '2023-10-17 12:40:00', '2023-10-17 12:50:00', '2023-10-17 13:00:00', '2023-10-17 13:10:00', '2023-10-17 13:20:00', '2023-10-17 13:30:00', '2023-10-17 13:40:00', '2023-10-17 13:50:00', '2023-10-17 14:00:00', '2023-10-17 14:10:00', '2023-10-17 14:20:00', '2023-10-17 14:30:00', '2023-10-17 14:40:00', '2023-10-17 14:50:00', '2023-10-17 15:00:00', '2023-10-17 15:10:00', '2023-10-17 15:20:00', '2023-10-17 15:40:00', '2023-10-17 15:50:00', '2023-10-17 16:00:00', '2023-10-17 16:10:00', '2023-10-17 16:20:00', '2023-10-17 16:30:00', '2023-10-17 16:40:00', '2023-10-17 16:50:00', '2023-10-17 17:00:00', '2023-10-17 17:10:00', '2023-10-17 17:20:00', '2023-10-17 17:30:00', '2023-10-17 17:40:00', '2023-10-17 17:50:00', '2023-10-17 18:00:00', '2023-10-17 18:10:00', '2023-10-17 18:20:00', '2023-10-17 18:30:00', '2023-10-17 18:40:00', '2023-10-17 18:50:00', '2023-10-17 19:00:00', '2023-10-17 19:10:00', '2023-10-17 19:20:00', '2023-10-17 19:30:00', '2023-10-17 19:40:00', '2023-10-17 19:50:00', '2023-10-17 20:00:00', '2023-10-17 20:10:00', '2023-10-17 20:30:00', '2023-10-17 20:40:00', '2023-10-17 20:50:00', '2023-10-17 21:00:00', '2023-10-17 21:10:00', '2023-10-17 21:20:00', '2023-10-17 21:30:00', '2023-10-17 21:40:00', '2023-10-17 21:50:00', '2023-10-17 22:00:00', '2023-10-17 22:10:00', '2023-10-17 22:20:00', '2023-10-17 22:30:00', '2023-10-17 22:50:00', '2023-10-17 23:10:00', '2023-10-17 23:20:00', '2023-10-17 23:30:00', '2023-10-17 23:40:00', '2023-10-18 00:00:00', '2023-10-18 00:10:00', '2023-10-18 00:20:00', '2023-10-18 00:30:00', '2023-10-18 00:40:00', '2023-10-18 00:50:00', '2023-10-18 01:00:00', '2023-10-18 01:10:00', '2023-10-18 01:20:00', '2023-10-18 01:30:00', '2023-10-18 01:40:00', '2023-10-18 01:50:00', '2023-10-18 02:00:00', '2023-10-18 02:10:00', '2023-10-18 02:20:00', '2023-10-18 02:30:00', '2023-10-18 02:40:00', '2023-10-18 02:50:00', '2023-10-18 03:00:00', '2023-10-18 03:10:00', '2023-10-18 03:20:00', '2023-10-18 03:30:00', '2023-10-18 03:40:00', '2023-10-18 03:50:00', '2023-10-18 04:00:00', '2023-10-18 04:10:00', '2023-10-18 04:30:00', '2023-10-18 04:40:00', '2023-10-18 04:50:00', '2023-10-18 05:00:00', '2023-10-18 05:10:00', '2023-10-18 05:20:00', '2023-10-18 05:30:00', '2023-10-18 05:40:00', '2023-10-18 05:50:00', '2023-10-18 06:00:00', '2023-10-18 06:10:00', '2023-10-18 06:20:00', '2023-10-18 06:30:00', '2023-10-18 06:40:00'],   
    y: [40.0, 40.1, 40.2, 40.5, 40.7, 40.8, 41.1, 41.2, 41.3, 41.4, 41.8, 41.8, 42.0, 42.2, 42.3, 42.6, 42.5, 42.7, 42.7, 43.0, 42.9, 43.1, 43.2, 43.3, 43.4, 43.3, 43.6, 43.5, 43.8, 43.7, 43.9, 43.9, 44.0, 43.9, 44.1, 44.1, 44.1, 44.2, 44.2, 44.4, 44.3, 44.4, 44.5, 44.5, 44.2, 44.5, 44.4, 44.5, 44.6, 44.6, 44.8, 44.6, 44.9, 44.9, 44.8, 45.0, 44.9, 45.0, 45.0, 45.1, 45.0, 45.1, 45.2, 45.1, 45.3, 45.2, 45.2, 45.3, 45.1, 45.3, 45.1, 45.1, 45.3, 45.3, 45.3, 45.5, 47.0, 45.6, 44.2, 46.7, 45.6, 44.9, 45.1, 45.2, 44.8, 44.6, 44.6, 43.9, 44.0, 44.5, 43.9, 44.1, 43.9, 44.4, 44.0, 43.9, 42.9, 44.0, 40.3, 37.5, 34.8, 34.6, 33.4, 32.7, 33.2, 33.0, 33.1, 33.4, 33.9, 32.3, 33.8, 33.9, 33.7, 33.6, 34.2, 34.5, 34.3, 34.3, 33.6, 33.6, 34.5, 37.9, 38.8, 38.8, 39.0, 39.2, 39.2, 39.7, 39.7, 39.7, 40.0, 40.1, 40.2, 40.3, 40.4, 40.4, 40.5, 40.6, 40.8, 40.9, 41.0, 41.1, 41.3, 41.4, 41.4, 41.6, 41.8, 41.8, 42.0, 42.2, 42.2, 42.2, 42.4, 42.5, 42.7, 42.6, 42.8, 42.9, 42.9, 43.1, 43.1, 43.2, 43.2, 43.5, 43.4, 43.4, 43.6, 43.7, 43.8, 43.8, 43.8, 43.9, 43.9, 43.9, 44.0, 44.0, 43.9, 44.2, 44.1, 44.3, 44.3, 44.3, 44.4, 44.4, 44.3, 44.4, 44.5, 44.5, 44.4, 44.5, 44.5, 44.5, 44.8, 44.5, 44.7, 44.8, 44.8, 44.8, 44.7, 44.7, 44.8, 44.8, 44.8, 44.6, 47.0, 45.0, 45.7], 
//    name: 'Vlhkost [%]',
    type: 'scatter',
    mode: 'lines', 
    line: {
        color: 'rgb(0, 0, 255)',
        width: 1
    },
    xaxis: 'x',
    yaxis: 'y2',
    connectgaps: false,
//    hovertemplate: '%{y:.1f}%<extra></extra>'
    hovertemplate: 'Humidity: %{y:.1f}%<extra></extra>'
//    hovertemplate: 'Humidity:<br>%{x|%d.%m.%Y %H:%M}<br>%{y:.1f}%<extra></extra>'
//    hovertemplate: '%{x|%d.%m.%Y %H:%M}: %{y:.1f}%<extra></extra>'
//    hovertemplate: 'Date: %{x|%d.%m.%Y %H:%M}<br>' + 'Humidity: %{y:.1f}%<extra></extra>'
};

var press = {
    x: ['2023-10-16 19:00:00', '2023-10-16 19:10:00', '2023-10-16 19:20:00', '2023-10-16 19:30:00', '2023-10-16 19:40:00', '2023-10-16 19:50:00', '2023-10-16 20:00:00', '2023-10-16 20:10:00', '2023-10-16 20:20:00', '2023-10-16 20:30:00', '2023-10-16 20:40:00', '2023-10-16 20:50:00', '2023-10-16 21:00:00', '2023-10-16 21:10:00', '2023-10-16 21:20:00', '2023-10-16 21:30:00', '2023-10-16 21:40:00', '2023-10-16 21:50:00', '2023-10-16 22:00:00', '2023-10-16 22:10:00', '2023-10-16 22:20:00', '2023-10-16 22:30:00', '2023-10-16 22:40:00', '2023-10-16 22:50:00', '2023-10-16 23:00:00', '2023-10-16 23:10:00', '2023-10-16 23:20:00', '2023-10-16 23:30:00', '2023-10-16 23:40:00', '2023-10-16 23:50:00', '2023-10-17 00:10:00', '2023-10-17 00:20:00', '2023-10-17 00:30:00', '2023-10-17 00:40:00', '2023-10-17 00:50:00', '2023-10-17 01:00:00', '2023-10-17 01:10:00', '2023-10-17 01:20:00', '2023-10-17 01:30:00', '2023-10-17 01:40:00', '2023-10-17 01:50:00', '2023-10-17 02:00:00', '2023-10-17 02:10:00', '2023-10-17 02:20:00', '2023-10-17 02:30:00', '2023-10-17 02:40:00', '2023-10-17 02:50:00', '2023-10-17 03:00:00', '2023-10-17 03:10:00', '2023-10-17 03:20:00', '2023-10-17 03:30:00', '2023-10-17 03:40:00', '2023-10-17 03:50:00', '2023-10-17 04:00:00', '2023-10-17 04:10:00', '2023-10-17 04:20:00', '2023-10-17 04:30:00', '2023-10-17 04:40:00', '2023-10-17 04:50:00', '2023-10-17 05:00:00', '2023-10-17 05:10:00', '2023-10-17 05:20:00', '2023-10-17 05:30:00', '2023-10-17 05:40:00', '2023-10-17 05:50:00', '2023-10-17 06:00:00', '2023-10-17 06:10:00', '2023-10-17 06:20:00', '2023-10-17 06:30:00', '2023-10-17 06:40:00', '2023-10-17 06:50:00', '2023-10-17 07:00:00', '2023-10-17 07:10:00', '2023-10-17 07:20:00', '2023-10-17 07:30:00', '2023-10-17 07:40:00', '2023-10-17 07:50:00', '2023-10-17 08:00:00', '2023-10-17 08:10:00', '2023-10-17 08:20:00', '2023-10-17 08:30:00', '2023-10-17 08:40:00', '2023-10-17 08:50:00', '2023-10-17 09:00:00', '2023-10-17 09:10:00', '2023-10-17 09:20:00', '2023-10-17 09:30:00', '2023-10-17 09:40:00', '2023-10-17 09:50:00', '2023-10-17 10:00:00', '2023-10-17 10:10:00', '2023-10-17 10:20:00', '2023-10-17 10:30:00', '2023-10-17 10:40:00', '2023-10-17 10:50:00', '2023-10-17 11:00:00', '2023-10-17 11:10:00', '2023-10-17 11:20:00', '2023-10-17 11:30:00', '2023-10-17 11:50:00', '2023-10-17 12:00:00', '2023-10-17 12:10:00', '2023-10-17 12:20:00', '2023-10-17 12:30:00', '2023-10-17 12:40:00', '2023-10-17 12:50:00', '2023-10-17 13:00:00', '2023-10-17 13:10:00', '2023-10-17 13:20:00', '2023-10-17 13:30:00', '2023-10-17 13:40:00', '2023-10-17 13:50:00', '2023-10-17 14:00:00', '2023-10-17 14:10:00', '2023-10-17 14:20:00', '2023-10-17 14:30:00', '2023-10-17 14:40:00', '2023-10-17 14:50:00', '2023-10-17 15:00:00', '2023-10-17 15:10:00', '2023-10-17 15:20:00', '2023-10-17 15:40:00', '2023-10-17 15:50:00', '2023-10-17 16:00:00', '2023-10-17 16:10:00', '2023-10-17 16:20:00', '2023-10-17 16:30:00', '2023-10-17 16:40:00', '2023-10-17 16:50:00', '2023-10-17 17:00:00', '2023-10-17 17:10:00', '2023-10-17 17:20:00', '2023-10-17 17:30:00', '2023-10-17 17:40:00', '2023-10-17 17:50:00', '2023-10-17 18:00:00', '2023-10-17 18:10:00', '2023-10-17 18:20:00', '2023-10-17 18:30:00', '2023-10-17 18:40:00', '2023-10-17 18:50:00', '2023-10-17 19:00:00', '2023-10-17 19:10:00', '2023-10-17 19:20:00', '2023-10-17 19:30:00', '2023-10-17 19:40:00', '2023-10-17 19:50:00', '2023-10-17 20:00:00', '2023-10-17 20:10:00', '2023-10-17 20:30:00', '2023-10-17 20:40:00', '2023-10-17 20:50:00', '2023-10-17 21:00:00', '2023-10-17 21:10:00', '2023-10-17 21:20:00', '2023-10-17 21:30:00', '2023-10-17 21:40:00', '2023-10-17 21:50:00', '2023-10-17 22:00:00', '2023-10-17 22:10:00', '2023-10-17 22:20:00', '2023-10-17 22:30:00', '2023-10-17 22:50:00', '2023-10-17 23:10:00', '2023-10-17 23:20:00', '2023-10-17 23:30:00', '2023-10-17 23:40:00', '2023-10-18 00:00:00', '2023-10-18 00:10:00', '2023-10-18 00:20:00', '2023-10-18 00:30:00', '2023-10-18 00:40:00', '2023-10-18 00:50:00', '2023-10-18 01:00:00', '2023-10-18 01:10:00', '2023-10-18 01:20:00', '2023-10-18 01:30:00', '2023-10-18 01:40:00', '2023-10-18 01:50:00', '2023-10-18 02:00:00', '2023-10-18 02:10:00', '2023-10-18 02:20:00', '2023-10-18 02:30:00', '2023-10-18 02:40:00', '2023-10-18 02:50:00', '2023-10-18 03:00:00', '2023-10-18 03:10:00', '2023-10-18 03:20:00', '2023-10-18 03:30:00', '2023-10-18 03:40:00', '2023-10-18 03:50:00', '2023-10-18 04:00:00', '2023-10-18 04:10:00', '2023-10-18 04:30:00', '2023-10-18 04:40:00', '2023-10-18 04:50:00', '2023-10-18 05:00:00', '2023-10-18 05:10:00', '2023-10-18 05:20:00', '2023-10-18 05:30:00', '2023-10-18 05:40:00', '2023-10-18 05:50:00', '2023-10-18 06:00:00', '2023-10-18 06:10:00', '2023-10-18 06:20:00', '2023-10-18 06:30:00', '2023-10-18 06:40:00'],   
    y: [999.62, 999.67, 999.74, 999.78, 999.90, 999.97, 1000.04, 1000.06, 1000.11, 1000.09, 1000.22, 1000.24, 1000.16, 1000.41, 1000.52, 1000.55, 1000.62, 1000.61, 1000.65, 1000.70, 1000.76, 1000.83, 1000.87, 1000.95, 1000.84, 1000.78, 1000.89, 1000.83, 1000.72, 1000.67, 1000.69, 1000.71, 1000.73, 1000.73, 1000.56, 1000.70, 1000.85, 1000.82, 1000.76, 1000.78, 1000.78, 1000.72, 1000.77, 1000.72, 1000.41, 1000.62, 1000.57, 1000.52, 1000.64, 1000.62, 1000.67, 1000.67, 1000.74, 1000.77, 1000.69, 1000.62, 1000.71, 1000.64, 1000.60, 1000.67, 1000.67, 1000.69, 1000.69, 1000.65, 1000.62, 1000.68, 1000.68, 1000.60, 1000.68, 1000.67, 1000.73, 1000.72, 1000.80, 1001.01, 1000.99, 1001.04, 1001.18, 1001.22, 1001.30, 1001.37, 1001.42, 1001.45, 1001.49, 1001.50, 1001.56, 1001.60, 1001.57, 1001.54, 1001.49, 1001.40, 1001.46, 1001.51, 1001.50, 1001.46, 1001.38, 1001.24, 1001.39, 1001.30, 1001.28, 1001.04, 1000.92, 1000.77, 1000.51, 1000.45, 1000.19, 1000.11, 1000.02, 999.75, 999.75, 999.62, 999.42, 999.36, 999.27, 999.17, 998.97, 999.07, 998.80, 998.61, 998.64, 998.79, 998.75, 998.72, 998.59, 998.43, 998.52, 998.45, 998.42, 998.27, 998.10, 997.92, 997.90, 997.89, 998.02, 997.96, 997.98, 998.06, 998.24, 998.31, 998.44, 998.38, 998.30, 998.44, 998.36, 998.35, 998.35, 998.32, 998.26, 998.34, 998.35, 998.43, 998.44, 998.55, 998.54, 998.54, 998.45, 998.39, 998.44, 998.38, 998.30, 998.35, 998.34, 998.36, 998.25, 998.14, 998.14, 998.27, 998.23, 998.12, 998.04, 998.14, 998.06, 998.14, 998.23, 998.08, 998.18, 998.14, 998.01, 998.16, 998.09, 998.03, 998.00, 997.92, 997.84, 997.77, 997.64, 997.56, 997.49, 997.47, 997.63, 997.49, 997.43, 997.38, 997.32, 997.34, 997.23, 997.20, 997.07, 997.12, 997.04, 997.17, 997.17, 997.16, 997.08, 996.99, 997.14, 997.04, 997.02], 
//    name: 'Tlak [hPa]',
    type: 'scatter',
    mode: 'lines', 
    line: {
        color: 'rgb(0, 128, 0)',
        width: 1
    },
    xaxis: 'x',
    yaxis: 'y3',
    connectgaps: false,
//    hovertemplate: '%{y}hPa<extra></extra>'
    hovertemplate: 'Pressure: %{y:.1f}hPa<extra></extra>'
//    hovertemplate: 'Pressure:<br>%{x|%d.%m.%Y %H:%M}<br>%{y:.1f}hPa<extra></extra>'
//    hovertemplate: '%{x|%d.%m.%Y %H:%M}: %{y:.1f}hPa<extra></extra>'
//    hovertemplate: 'Date: %{x|%d.%m.%Y %H:%M}<br>' + 'Pressure: %{y:.1f}hPa<extra></extra>'
};

var batt = {
    x: ['2023-10-16 19:00:00', '2023-10-16 19:10:00', '2023-10-16 19:20:00', '2023-10-16 19:30:00', '2023-10-16 19:40:00', '2023-10-16 19:50:00', '2023-10-16 20:00:00', '2023-10-16 20:10:00', '2023-10-16 20:20:00', '2023-10-16 20:30:00', '2023-10-16 20:40:00', '2023-10-16 20:50:00', '2023-10-16 21:00:00', '2023-10-16 21:10:00', '2023-10-16 21:20:00', '2023-10-16 21:30:00', '2023-10-16 21:40:00', '2023-10-16 21:50:00', '2023-10-16 22:00:00', '2023-10-16 22:10:00', '2023-10-16 22:20:00', '2023-10-16 22:30:00', '2023-10-16 22:40:00', '2023-10-16 22:50:00', '2023-10-16 23:00:00', '2023-10-16 23:10:00', '2023-10-16 23:20:00', '2023-10-16 23:30:00', '2023-10-16 23:40:00', '2023-10-16 23:50:00', '2023-10-17 00:10:00', '2023-10-17 00:20:00', '2023-10-17 00:30:00', '2023-10-17 00:40:00', '2023-10-17 00:50:00', '2023-10-17 01:00:00', '2023-10-17 01:10:00', '2023-10-17 01:20:00', '2023-10-17 01:30:00', '2023-10-17 01:40:00', '2023-10-17 01:50:00', '2023-10-17 02:00:00', '2023-10-17 02:10:00', '2023-10-17 02:20:00', '2023-10-17 02:30:00', '2023-10-17 02:40:00', '2023-10-17 02:50:00', '2023-10-17 03:00:00', '2023-10-17 03:10:00', '2023-10-17 03:20:00', '2023-10-17 03:30:00', '2023-10-17 03:40:00', '2023-10-17 03:50:00', '2023-10-17 04:00:00', '2023-10-17 04:10:00', '2023-10-17 04:20:00', '2023-10-17 04:30:00', '2023-10-17 04:40:00', '2023-10-17 04:50:00', '2023-10-17 05:00:00', '2023-10-17 05:10:00', '2023-10-17 05:20:00', '2023-10-17 05:30:00', '2023-10-17 05:40:00', '2023-10-17 05:50:00', '2023-10-17 06:00:00', '2023-10-17 06:10:00', '2023-10-17 06:20:00', '2023-10-17 06:30:00', '2023-10-17 06:40:00', '2023-10-17 06:50:00', '2023-10-17 07:00:00', '2023-10-17 07:10:00', '2023-10-17 07:20:00', '2023-10-17 07:30:00', '2023-10-17 07:40:00', '2023-10-17 07:50:00', '2023-10-17 08:00:00', '2023-10-17 08:10:00', '2023-10-17 08:20:00', '2023-10-17 08:30:00', '2023-10-17 08:40:00', '2023-10-17 08:50:00', '2023-10-17 09:00:00', '2023-10-17 09:10:00', '2023-10-17 09:20:00', '2023-10-17 09:30:00', '2023-10-17 09:40:00', '2023-10-17 09:50:00', '2023-10-17 10:00:00', '2023-10-17 10:10:00', '2023-10-17 10:20:00', '2023-10-17 10:30:00', '2023-10-17 10:40:00', '2023-10-17 10:50:00', '2023-10-17 11:00:00', '2023-10-17 11:10:00', '2023-10-17 11:20:00', '2023-10-17 11:30:00', '2023-10-17 11:50:00', '2023-10-17 12:00:00', '2023-10-17 12:10:00', '2023-10-17 12:20:00', '2023-10-17 12:30:00', '2023-10-17 12:40:00', '2023-10-17 12:50:00', '2023-10-17 13:00:00', '2023-10-17 13:10:00', '2023-10-17 13:20:00', '2023-10-17 13:30:00', '2023-10-17 13:40:00', '2023-10-17 13:50:00', '2023-10-17 14:00:00', '2023-10-17 14:10:00', '2023-10-17 14:20:00', '2023-10-17 14:30:00', '2023-10-17 14:40:00', '2023-10-17 14:50:00', '2023-10-17 15:00:00', '2023-10-17 15:10:00', '2023-10-17 15:20:00', '2023-10-17 15:40:00', '2023-10-17 15:50:00', '2023-10-17 16:00:00', '2023-10-17 16:10:00', '2023-10-17 16:20:00', '2023-10-17 16:30:00', '2023-10-17 16:40:00', '2023-10-17 16:50:00', '2023-10-17 17:00:00', '2023-10-17 17:10:00', '2023-10-17 17:20:00', '2023-10-17 17:30:00', '2023-10-17 17:40:00', '2023-10-17 17:50:00', '2023-10-17 18:00:00', '2023-10-17 18:10:00', '2023-10-17 18:20:00', '2023-10-17 18:30:00', '2023-10-17 18:40:00', '2023-10-17 18:50:00', '2023-10-17 19:00:00', '2023-10-17 19:10:00', '2023-10-17 19:20:00', '2023-10-17 19:30:00', '2023-10-17 19:40:00', '2023-10-17 19:50:00', '2023-10-17 20:00:00', '2023-10-17 20:10:00', '2023-10-17 20:30:00', '2023-10-17 20:40:00', '2023-10-17 20:50:00', '2023-10-17 21:00:00', '2023-10-17 21:10:00', '2023-10-17 21:20:00', '2023-10-17 21:30:00', '2023-10-17 21:40:00', '2023-10-17 21:50:00', '2023-10-17 22:00:00', '2023-10-17 22:10:00', '2023-10-17 22:20:00', '2023-10-17 22:30:00', '2023-10-17 22:50:00', '2023-10-17 23:10:00', '2023-10-17 23:20:00', '2023-10-17 23:30:00', '2023-10-17 23:40:00', '2023-10-18 00:00:00', '2023-10-18 00:10:00', '2023-10-18 00:20:00', '2023-10-18 00:30:00', '2023-10-18 00:40:00', '2023-10-18 00:50:00', '2023-10-18 01:00:00', '2023-10-18 01:10:00', '2023-10-18 01:20:00', '2023-10-18 01:30:00', '2023-10-18 01:40:00', '2023-10-18 01:50:00', '2023-10-18 02:00:00', '2023-10-18 02:10:00', '2023-10-18 02:20:00', '2023-10-18 02:30:00', '2023-10-18 02:40:00', '2023-10-18 02:50:00', '2023-10-18 03:00:00', '2023-10-18 03:10:00', '2023-10-18 03:20:00', '2023-10-18 03:30:00', '2023-10-18 03:40:00', '2023-10-18 03:50:00', '2023-10-18 04:00:00', '2023-10-18 04:10:00', '2023-10-18 04:30:00', '2023-10-18 04:40:00', '2023-10-18 04:50:00', '2023-10-18 05:00:00', '2023-10-18 05:10:00', '2023-10-18 05:20:00', '2023-10-18 05:30:00', '2023-10-18 05:40:00', '2023-10-18 05:50:00', '2023-10-18 06:00:00', '2023-10-18 06:10:00', '2023-10-18 06:20:00', '2023-10-18 06:30:00', '2023-10-18 06:40:00'],   
    y: [78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 75, 77, 77, 77, 77, 77, 78, 77, 77, 78, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 74, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 74, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 77, 74, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 74, 73, 76, 76, 76, 73, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 73, 76, 76, 75, 76, 76, 76, 76, 76, 76, 76, 76, 76, 75], 
//    name: 'Baterie [%]', 
    type: 'scatter',
//    mode: 'lines', 
    line: {
        color: 'rgb(255, 0, 255)',
        width: 1
    },
    xaxis: 'x2',
    yaxis: 'y4',
    connectgaps: false,
//    hovertemplate: '%{y}%<extra></extra>'
    hovertemplate: 'Battery: %{y:.1f}%<extra></extra>'
//    hovertemplate: 'Battery:<br>%{x|%d.%m.%Y %H:%M}<br>%{y:.1f}%<extra></extra>'
//    hovertemplate: '%{x|%d.%m.%Y %H:%M}: %{y}%<extra></extra>'
//    hovertemplate: 'Date: %{x|%d.%m.%Y %H:%M}<br>' + 'Battery: %{y:}%<extra></extra>'
};

var data = [temp, hum, press, batt];

var layout = {
    title: 'Meteostation',
    showlegend: false,
    hovermode: 'x',
    xaxis: {
        domain: [0.11, 0.925],
        range: ['2023-10-16 19:00:00', '2023-10-18 07:00:00'],
        griddash: '1px',
        gridcolor: 'rgba(200, 200, 200, 0.5)',
        linewidth: 1,
        linecolor: 'rgba(200, 200, 200, 1)',
        tickcolor: 'rgba(0, 0, 0, 1)',
        tickmode: 'array',
        tickvals: ['2023-10-16 19:00:00', '2023-10-17 01:00:00', '2023-10-17 07:00:00', '2023-10-17 13:00:00', '2023-10-17 19:00:00', '2023-10-18 01:00:00', '2023-10-18 07:00:00'],
        ticktext: ['16.10.2023<br>19:00', '17.10.2023<br>01:00', '07:00', '13:00', '19:00', '18.10.2023<br>01:00', '07:00'],
        ticklen: 3,
        tickmode: 'array',
        showticklabels: true,
        fixedrange: true,
        hoverformat: '%d.%m.%Y - %H:%M',
        showspikes: true,
        spikedash: '1px',
        spikethickness: 1,
        spikecolor: 'rgba(0, 0, 0, 0.5)',
        spikemode: 'toaxis+across'
    },
    xaxis2: {
        overlaying: 'x',
        anchor: 'free',
        range: ['2023-10-16 19:00:00', '2023-10-18 07:00:00'],
        tick0: '2023-10-16 19:00:00',
        griddash: '1px',
        gridcolor: 'rgba(200, 200, 200, 0.5)',
        linewidth: 1,
        linecolor: 'rgba(200, 200, 200, 1)',
        tickcolor: 'rgba(0, 0, 0, 1)',
        tickmode: 'array',
        tickvals: ['2023-10-16 19:00:00', '2023-10-17 01:00:00', '2023-10-17 07:00:00', '2023-10-17 13:00:00', '2023-10-17 19:00:00', '2023-10-18 01:00:00', '2023-10-18 07:00:00'],
        ticktext: ['16.10.2023<br>19:00', '17.10.2023<br>01:00', '07:00', '13:00', '19:00', '18.10.2023<br>01:00', '07:00'],
        ticklen: 3,
        fixedrange: true,
        hoverformat: '%d.%m.%Y - %H:%M',
        showspikes: true,
        spikedash: '1px',
        spikethickness: 1,
        spikecolor: 'rgba(0, 0, 0, 0.5)',
        spikemode: 'toaxis+across'
    },
    yaxis: {
        domain: [0.35, 1],
        title: {
            text: 'Temperature [°C]' ,
            font: {
                size: 12
            },
            standoff: 7
        },
        range: [13.8, 24.8],
        dtick: 1.1,
        tick0: 13.8,
        tickformat: '.1f', 
        showgrid: false,
        linewidth: 1,
        linecolor: 'rgba(200, 200, 200, 1)',
        tickcolor: 'rgba(0, 0, 0, 1)',
        ticklen: 3,
        nticks: 10,
        fixedrange: true
    },
    yaxis2: {
        domain: [0.35, 1],
        title: {
            text: 'Humidity [%]',
            font: {
                size: 12
            }
        },
        anchor: 'free',
        overlaying: 'y',
        side: 'left',
        dtick: 10,
        tick0: 0,
        range: [0, 100],
        griddash: '1px',
        gridcolor: 'rgba(200, 200, 200, 0.5)',
        linewidth: 1,
        linecolor: 'rgba(200, 200, 200, 1)',
        tickcolor: 'rgba(0, 0, 0, 1)',
        ticklen: 3,
        zeroline: false,
        fixedrange: true
    },
    yaxis3: {
        domain: [0.35, 1],
        title: {
            text: 'Pressure [hPa]',
            font: {
                size: 12
            },
            standoff: 15
        },
        anchor: 'x',
        overlaying: 'y',
        side: 'right',
        range: [996.8, 1001.8],
        dtick: 0.5,
        tick0: 996.8,
        tickformat: '.1f',   
        showgrid: false,
        linewidth: 1,
        linecolor: 'rgba(200, 200, 200, 1)',
        tickcolor: 'rgba(0, 0, 0, 1)',
        ticklen: 3,
        nticks: 10,
        zeroline: false,
        fixedrange: true
    },
    yaxis4: {
        domain: [0, 0.2],
        title: {
            text: 'Battery [%]',
            font: {
                size: 12
            },
            standoff: 7
        },
        anchor: 'x',
        overlaying: 'y4',
        side: 'left',
        dtick: 25,
        range: [0, 100],
        griddash: '1px',
        gridcolor: 'rgba(200, 200, 200, 0.5)',
        linewidth: 1,
        linecolor: 'rgba(200, 200, 200, 1)',
        tickcolor: 'rgba(0, 0, 0, 1)',
        ticklen: 3,
        zeroline: false,
        fixedrange: true
    }

};

var config = {
    staticPlot: false
};

Plotly.newPlot('chart', data, layout, config);

  </script>
 </body>
</html>