Heatmap with categorical axis labels

[dbuezas]

Adapted from https://plotly.com/javascript/heatmaps/#heatmap-with-categorical-axis-labels

type: custom:plotly-graph
entities:
  - entity: sensor.openweathermap_temperature
    fn: |
      $fn ({ xs, ys, vars }) => {
        const x = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday",
        ];
        const y = ["Morning", "Afternoon", "Evening"];
        const sum = y.map((time) => x.map((day) => 0));
        const count = y.map((time) => x.map((day) => 0));
        for (let i = 0; i < xs.length; i++) {
          const date = xs[i];
          const time = Math.floor(date.getHours() / 8);
          const day = date.getDay();
          sum[time][day] += +ys[i];
          count[time][day]++;
        }
        const z = sum.map((row, time) =>
          row.map((val, day) => val / count[time][day])
        );
        vars.x = x;
        vars.y = y;
        vars.z = z;
      };
    x: $fn ({ vars }) => vars.x
    'y': $fn ({ vars }) => vars.y
    z: $fn ({ vars }) => vars.z
    type: heatmap
    hoverongaps: false
raw_plotly_config: true
hours_to_show: 240
title: Temperature heatmap
layout:
  height: 300
  margin:
    t: 20

[emufan]

This is soo great. Thx a lot.

[emufan]

Here an adopted one with

• custom colorscale with custom scale
• more days and more timeslots
• from right to left now today to past with fitting x-axis description

Of course my copy&paste-JS-capabilities is leading to quick and most probably dirty code and is most proably easily to improve, but at least it is working for now and will be my starting point for other measures like CPU-temp, DSL-speed or whatever else is good to read on a heatmap to see differences and outliers and rules.

type: custom:plotly-graph
raw_plotly_config: true
hours_to_show: 240
title: Außentemperatur
layout:
  height: 300
  margin:
    t: 20
    b: 70
    l: 60
    r: 50
  modebar:
    orientation: v
config:
  displaylogo: false
  scrollZoom: true
  modeBarButtonsToRemove:
    - resetScale2d
    - toImage
    - lasso2d
    - select2d
  displayModeBar: false
entities:
  - entity: sensor.aussenthermometer_actual_temperature
    fn: |
      $fn ({ xs, ys, vars }) => {
        /* console.log(xs);
        console.log(ys);
        console.log(vars); */

        const datetoday = new Date();

        const x = ["", "", "", "", "", "", "", "gestern", "heute"];
        const y = ["00 - 03", "03 - 06", "06 - 09", "09 - 12", "12 - 15", "15 - 18", "18 - 21", "21 - 24"];
        const colorscale = [
          ['0.0', 'rgb(49,54,149)'],
          ['0.05', 'rgb(69,117,180)'],
          ['0.1', 'rgb(116,173,209)'],
          ['0.15', 'rgb(171,217,233)'],
          ['0.2', 'rgb(224,243,248)'],
          ['0.25', 'rgb(254,224,144)'],
          ['0.4', 'rgb(253,174,97)'],
          ['0.5', 'rgb(244,109,67)'],
          ['0.7', 'rgb(215,48,39)'],
          ['0.9', 'rgb(165,0,38)'],
          ['1.0', 'rgb(85,26,139)']
        ]

        const sum = y.map((time) => x.map((day) => 0));
        const count = y.map((time) => x.map((day) => 0));

        for (let i = 0; i < xs.length; i++) {

          const date = xs[i];
          const time = Math.floor(date.getHours() / 3);

          var day;

          var helpday = new Date();
          helpday.setDate(datetoday.getDate()-8);
          if (helpday.getDate() == date.getDate()) {
            x[0] = date.toLocaleDateString('de-DE', { weekday: 'long' });
            day = 0;
            sum[time][day] += +ys[i];
            count[time][day]++;
          }

          var helpday = new Date();
          helpday.setDate(datetoday.getDate()-7);
          if (helpday.getDate() == date.getDate()) {
            x[1] = date.toLocaleDateString('de-DE', { weekday: 'long' });
            day = 1;
            sum[time][day] += +ys[i];
            count[time][day]++;
          }

          var helpday = new Date();
          helpday.setDate(datetoday.getDate()-6);
          if (helpday.getDate() == date.getDate()) {
            x[2] = date.toLocaleDateString('de-DE', { weekday: 'long' });
            day = 2;
            sum[time][day] += +ys[i];
            count[time][day]++;
          }

          /* console.log(date.getDate());
          console.log(helpday.getDate()); */

          var helpday = new Date();
          helpday.setDate(datetoday.getDate()-5);
          if (helpday.getDate() == date.getDate()) {
            x[3] = date.toLocaleDateString('de-DE', { weekday: 'long' });
            day = 3;
            sum[time][day] += +ys[i];
            count[time][day]++;
          }

          var helpday = new Date();
          helpday.setDate(datetoday.getDate()-4);
          if (helpday.getDate() == date.getDate()) {
            x[4] = date.toLocaleDateString('de-DE', { weekday: 'long' });
            day = 4;
            sum[time][day] += +ys[i];
            count[time][day]++;
          }

          var helpday = new Date();
          helpday.setDate(datetoday.getDate()-3);
          if (helpday.getDate() == date.getDate()) {
            x[5] = date.toLocaleDateString('de-DE', { weekday: 'long' });
            day = 5;
            sum[time][day] += +ys[i];
            count[time][day]++;
          }

          var helpday = new Date();
          helpday.setDate(datetoday.getDate()-2);
          if (helpday.getDate() == date.getDate()) {
            x[6] = date.toLocaleDateString('de-DE', { weekday: 'long' });
            day = 6;
            sum[time][day] += +ys[i];
            count[time][day]++;
          }

          var helpday = new Date();
          helpday.setDate(datetoday.getDate()-1);
          if (helpday.getDate() == date.getDate()) {
            day = 7;
            sum[time][day] += +ys[i];
            count[time][day]++;
          }

          var helpday = new Date();
          helpday.setDate(datetoday.getDate()-0);
          if (helpday.getDate() == date.getDate()) {
            day = 8;
            sum[time][day] += +ys[i];
            count[time][day]++;
          }

        }

        const z = sum.map((row, time) =>
          row.map((val, day) => val / count[time][day])
        );
        vars.x = x;
        vars.y = y;
        vars.z = z;
        vars.colorscale = colorscale;
      };
    x: $fn ({ vars }) => vars.x
    'y': $fn ({ vars }) => vars.y
    z: $fn ({ vars }) => vars.z
    colorscale: $fn ({ vars }) => vars.colorscale
    zmin: -5
    zmax: 25
    text_auto: true
    type: heatmap
    hoverongaps: false

[dbuezas]

Here's a fun one: change type: heatmap to type: surface :)

[emufan]

Yes. This one is fine as well. Without further doings. Perhaps I have to adjust the margins, because it is very small, but to view outlies, it will be very helptull in some places.

[Mattie432]

Adapted these to pull out On/Off values from a Hue motion sensor, converted to detection durations to display when rooms are most active. Thanks so much for including these new graphs, been looking to get heatmaps for ages (can you tell what time I'm cooking?)

type: custom:plotly-graph
entities:
  - entity: binary_sensor.kitchen_motion_sensor_1_motion
    filters:
      - deduplicate_adjacent
    fn: |
      $fn ({ xs, ys, vars }) => {
        const colorscale = [
          ['0.0', 'rgb(12,  51,  131)' ],
          ['0.2', 'rgb(10,  136, 186)' ],
          ['0.5', 'rgb(242, 211, 56)'  ],
          ['0.6', 'rgb(242, 143, 56)'  ],
          ['1.0', 'rgb(217, 30,  30)'  ],
        ];

        var days = [];
        var durations = [];
        var prevOnindex = -1;
        ys.forEach( function( y, index, arr) {
            if( y == "off" && prevOnindex > -1) {
                const lastOnDate = xs[ prevOnindex ];
                const lastOnTime = lastOnDate.getTime();
                const lastOffTime = xs[ index ].getTime();
                const duration = ( lastOffTime - lastOnTime ) / 1000 / 60; // Convert to mins
                days.push( lastOnDate );
                durations.push( duration );
            }
            else
                prevOnindex = index;
        } );
        
        const day = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", ];
        const timeSpan = [
            "11pm","10pm","9pm","8pm","7pm","6pm","5pm","4pm","3pm","2pm","1pm","Midday",
            "11am","10am","9am","8am","7am","6am","5am","4am","3am","2am","1am","Midnight",
        ];
        // const timeSpan = ["Morning", "Afternoon", "Evening"];
        const sum = timeSpan.map((time) => day.map((day) => 0));
        debugger;
        for (let i = 0; i < days.length; i++) {
          const date = days[i];
          const time = 23 - date.getHours();
          // const time = Math.floor(date.getHours() / 8); // 24/8 gives us Morning/Afternoon/Evening
          const day = date.getDay();
          sum[time][day] += +durations[i];
        }
        const z = sum.map((row, time) =>
          row.map((val, day) => val == 0 ? null : val ) 
        );
        vars.x = day;
        vars.y = timeSpan;
        vars.z = z;
        vars.colorscale = colorscale;
       };
    x: $fn ({ vars }) => vars.x
    'y': $fn ({ vars }) => vars.y
    z: $fn ({ vars }) => vars.z
    type: heatmap
    hoverongaps: false
    colorscale: $fn ({ vars }) => vars.colorscale
raw_plotly_config: true
hours_to_show: current_week
title: Kitchen Motion (last 7 days)
layout:
  height: 500
  margin:
    t: 20

[dbuezas]

That's a really cool idea!

[dbuezas]

I think it deserves its own Show&Tell post :)

[dbuezas]

Have you considered a histogram2d?