Utilization per room and half hour (heatmap)
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 %.
Open the chart without page chrome ↗
// First chart on this page. The example combines several charts or controls;
// open the standalone example for the full source.
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"
})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
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()Waiting for the chart.
Open Data & agent view to read this chart through chart.describe().
Read from the running library through its optional agent/describe module. Text, table and JSON share the same snapshot. Demo data only.
$ wcc chart export medical-util-heatmap.json --out medical-util-heatmap.svg --with-tablePublic agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm. Save a JSON spec first and check the loaded runtime and supported modules before rendering. Command reference
Loading /gallery/medical/util-heatmap/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?