# Utilization per room and half hour (heatmap) (Medicine & practice example)

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/medical/util-heatmap/ · Index for agents: https://westcoast-charts.com/llms.txt

schedule.utilization() with 30-min buckets: busy / open minutes. Closed buckets (before 07:30, lunch break 12:30–13:30) are hatched with their own legend entry instead of 0 % (plotOptions.heatmap.empty); partly open ones count only the open minutes. Total: 42.3 %.

- Chart type: `heatmap` (Heatmap)
- Collection: Medicine & practice · Medicine & practice
- Raw configuration: https://westcoast-charts.com/gallery-src/medical/util-heatmap.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/premium/medical.html?only=util-heatmap&lang=en#v-util-heatmap

## Setup

```js
import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'
import premium from 'west-coast-charts/premium'
import vitals from 'west-coast-charts/layers/vitals'
import schedule from 'west-coast-charts/layers/schedule'

WestCoastCharts.use(types).use(premium).use(vitals).use(schedule)
const WestCoastChartsPremium = premium
const WestCoastChartsLayer_vitals = vitals
const WestCoastChartsLayer_schedule = schedule
WestCoastCharts.setLicenseKey(LICENCE_KEY) // paid production licence; localhost evaluation needs no key
```

## Options

```js
const options = (function (shut) { return {
  "chart": {
    "type": "heatmap",
    "height": 300
  },
  "series": [
    {
      "name": "ECG",
      "data": [
        {
          "x": "07:30",
          "y": 0
        },
        {
          "x": "08:00",
          "y": 0
        },
        {
          "x": "08:30",
          "y": 0
        },
        {
          "x": "09:00",
          "y": 0
        },
        {
          "x": "09:30",
          "y": 0
        },
        {
          "x": "10:00",
          "y": 83.3
        },
        {
          "x": "10:30",
          "y": 16.7
        },
        {
          "x": "11:00",
          "y": 0
        },
        {
          "x": "11:30",
          "y": 0
        },
        {
          "x": "12:00",
          "y": 0
        },
        {
          "x": "12:30",
          "y": null
        },
        {
          "x": "13:00",
          "y": null
        },
        {
          "x": "13:30",
          "y": 0
        },
        {
          "x": "14:00",
          "y": 0
        },
        {
          "x": "14:30",
          "y": 66.7
        },
        {
          "x": "15:00",
          "y": 0
        },
        {
          "x": "15:30",
          "y": 0
        },
        {
          "x": "16:00",
          "y": 0
        },
        {
          "x": "16:30",
          "y": 33.3
        },
        {
          "x": "17:00",
          "y": 0
        },
        {
          "x": "17:30",
          "y": 0
        }
      ]
    },
    {
      "name": "Sono",
      "data": [
        {
          "x": "07:30",
          "y": 0
        },
        {
          "x": "08:00",
          "y": 0
        },
        {
          "x": "08:30",
          "y": 0
        },
        {
          "x": "09:00",
          "y": 0
        },
        {
          "x": "09:30",
          "y": 0
        },
        {
          "x": "10:00",
          "y": 66.7
        },
        {
          "x": "10:30",
          "y": 0
        },
        {
          "x": "11:00",
          "y": 0
        },
        {
          "x": "11:30",
          "y": 0
        },
        {
          "x": "12:00",
          "y": 0
        },
        {
          "x": "12:30",
          "y": null
        },
        {
          "x": "13:00",
          "y": null
        },
        {
          "x": "13:30",
          "y": 0
        },
        {
          "x": "14:00",
          "y": 0
        },
        {
          "x": "14:30",
          "y": 16.7
        },
        {
          "x": "15:00",
          "y": 50
        },
        {
          "x": "15:30",
          "y": 0
        },
        {
          "x": "16:00",
          "y": 0
        },
        {
          "x": "16:30",
          "y": 0
        },
        {
          "x": "17:00",
          "y": 83.3
        },
        {
          "x": "17:30",
          "y": 0
        }
      ]
    },
    {
      "name": "Lab",
      "data": [
        {
          "x": "07:30",
          "y": 66.7
        },
        {
          "x": "08:00",
          "y": 33.3
        },
        {
          "x": "08:30",
          "y": 66.7
        },
        {
          "x": "09:00",
          "y": 33.3
        },
        {
          "x": "09:30",
          "y": 66.7
        },
        {
          "x": "10:00",
          "y": 0
        },
        {
          "x": "10:30",
          "y": 50
        },
        {
          "x": "11:00",
          "y": 0
        },
        {
          "x": "11:30",
          "y": 0
        },
        {
          "x": "12:00",
          "y": 0
        },
        {
          "x": "12:30",
          "y": null
        },
        {
          "x": "13:00",
          "y": null
        },
        {
          "x": "13:30",
          "y": 0
        },
        {
          "x": "14:00",
          "y": 0
        },
        {
          "x": "14:30",
          "y": 0
        },
        {
          "x": "15:00",
          "y": 0
        },
        {
          "x": "15:30",
          "y": 0
        },
        {
          "x": "16:00",
          "y": 0
        },
        {
          "x": "16:30",
          "y": 0
        },
        {
          "x": "17:00",
          "y": 0
        },
        {
          "x": "17:30",
          "y": 0
        }
      ]
    },
    {
      "name": "Room 3",
      "data": [
        {
          "x": "07:30",
          "y": 33.3
        },
        {
          "x": "08:00",
          "y": 83.3
        },
        {
          "x": "08:30",
          "y": 83.3
        },
        {
          "x": "09:00",
          "y": 100
        },
        {
          "x": "09:30",
          "y": 83.3
        },
        {
          "x": "10:00",
          "y": 100
        },
        {
          "x": "10:30",
          "y": 100
        },
        {
          "x": "11:00",
          "y": 83.3
        },
        {
          "x": "11:30",
          "y": 100
        },
        {
          "x": "12:00",
          "y": 66.7
        },
        {
          "x": "12:30",
          "y": null
        },
        {
          "x": "13:00",
          "y": null
        },
        {
          "x": "13:30",
          "y": 100
        },
        {
          "x": "14:00",
          "y": 83.3
        },
        {
          "x": "14:30",
          "y": 83.3
        },
        {
          "x": "15:00",
          "y": 100
        },
        {
          "x": "15:30",
          "y": 83.3
        },
        {
          "x": "16:00",
          "y": 100
        },
        {
          "x": "16:30",
          "y": 83.3
        },
        {
          "x": "17:00",
          "y": 66.7
        },
        {
          "x": "17:30",
          "y": 66.7
        }
      ]
    },
    {
      "name": "Room 2",
      "data": [
        {
          "x": "07:30",
          "y": 50
        },
        {
          "x": "08:00",
          "y": 66.7
        },
        {
          "x": "08:30",
          "y": 100
        },
        {
          "x": "09:00",
          "y": 100
        },
        {
          "x": "09:30",
          "y": 66.7
        },
        {
          "x": "10:00",
          "y": 0
        },
        {
          "x": "10:30",
          "y": 66.7
        },
        {
          "x": "11:00",
          "y": 83.3
        },
        {
          "x": "11:30",
          "y": 100
        },
        {
          "x": "12:00",
          "y": 83.3
        },
        {
          "x": "12:30",
          "y": null
        },
        {
          "x": "13:00",
          "y": null
        },
        {
          "x": "13:30",
          "y": 66.7
        },
        {
          "x": "14:00",
          "y": 100
        },
        {
          "x": "14:30",
          "y": 0
        },
        {
          "x": "15:00",
          "y": 100
        },
        {
          "x": "15:30",
          "y": 83.3
        },
        {
          "x": "16:00",
          "y": 100
        },
        {
          "x": "16:30",
          "y": 50
        },
        {
          "x": "17:00",
          "y": 93.3
        },
        {
          "x": "17:30",
          "y": 73.3
        }
      ]
    },
    {
      "name": "Room 1",
      "data": [
        {
          "x": "07:30",
          "y": 66.7
        },
        {
          "x": "08:00",
          "y": 83.3
        },
        {
          "x": "08:30",
          "y": 66.7
        },
        {
          "x": "09:00",
          "y": 83.3
        },
        {
          "x": "09:30",
          "y": 83.3
        },
        {
          "x": "10:00",
          "y": 0
        },
        {
          "x": "10:30",
          "y": 66.7
        },
        {
          "x": "11:00",
          "y": 83.3
        },
        {
          "x": "11:30",
          "y": 83.3
        },
        {
          "x": "12:00",
          "y": 66.7
        },
        {
          "x": "12:30",
          "y": null
        },
        {
          "x": "13:00",
          "y": null
        },
        {
          "x": "13:30",
          "y": 66.7
        },
        {
          "x": "14:00",
          "y": 83.3
        },
        {
          "x": "14:30",
          "y": 33.3
        },
        {
          "x": "15:00",
          "y": 16.7
        },
        {
          "x": "15:30",
          "y": 66.7
        },
        {
          "x": "16:00",
          "y": 83.3
        },
        {
          "x": "16:30",
          "y": 66.7
        },
        {
          "x": "17:00",
          "y": 0
        },
        {
          "x": "17:30",
          "y": 0
        }
      ]
    }
  ],
  "plotOptions": {
    "heatmap": {
      "colorScale": {
        "ranges": [
          {
            "from": 0,
            "to": 49.9,
            "color": "#bfdbfe",
            "name": "< 50 %"
          },
          {
            "from": 50,
            "to": 79.9,
            "color": "#60a5fa",
            "name": "50–80 %"
          },
          {
            "from": 80,
            "to": 94.9,
            "color": "#2563eb",
            "name": "80–95 %"
          },
          {
            "from": 95,
            "to": 100,
            "color": "#1e3a8a",
            "name": "≥ 95 %"
          }
        ]
      },
      "empty": {
        "label": "closed"
      }
    }
  },
  "dataLabels": {
    "enabled": false
  },
  "legend": {
    "position": "bottom"
  },
  "tooltip": {
    "y": {
      "formatter": function (v) { return v === null || v === undefined ? shut.label : v + ' %' }
    }
  }
} })({
  "label": "closed"
})

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()
```

## Verify

- Text check (Library 1.1.5): load `west-coast-charts/agent/describe` and call `chart.describe({ format: "json" })` for the actual drawn state. The live reader is on this example’s HTML page.
- Command line (Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm, https://westcoast-charts.com/docs/cli/index.md): `wcc chart export medical-util-heatmap.json --out medical-util-heatmap.svg --with-table` (save the options above as JSON first)