Practice vitals clock: 12 h, few measurements
A practice day 07:00–19:00 with few measurements: gaps stay visible ("not measured"); the last value per parameter is shown with its age under the ring.
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 = {
"chart": {
"type": "vitalsClock",
"height": 460
},
"series": [
],
"plotOptions": {
"vitalsClock": {
"radialColumn": {
"innerRadius": "76%",
"hole": "20%"
},
"time": {
"start": 1792994400000,
"span": "12h",
"step": "60min"
},
"now": 1793020800000,
"timeZone": "Europe/Berlin",
"demo": "Demo data · invented thresholds",
"params": [
{
"id": "hr",
"gap": 3,
"title": "Pulse",
"short": "Pulse",
"unit": "/min",
"kind": "columns",
"aggregate": "last",
"bands": [
{
"to": 40,
"level": 3,
"label": "< 40"
},
{
"to": 50,
"level": 1,
"label": "40–49"
},
{
"to": 91,
"level": 0,
"label": "50–90"
},
{
"to": 111,
"level": 1,
"label": "91–110"
},
{
"to": 131,
"level": 2,
"label": "111–130"
},
{
"level": 3,
"label": "≥ 131"
}
],
"data": [
[
1792998720000,
88
],
[
1793000400000,
81
],
[
1793009100000,
96
],
[
1793019000000,
84
]
],
"min": 30,
"max": 150,
"decimals": 0
},
{
"id": "bp",
"gap": 3,
"title": "Blood pressure",
"short": "BP",
"unit": "mmHg",
"kind": "range",
"bands": [
{
"to": 90,
"level": 3,
"label": "< 90"
},
{
"to": 101,
"level": 2,
"label": "90–100"
},
{
"to": 111,
"level": 1,
"label": "101–110"
},
{
"to": 160,
"level": 0,
"label": "111–159"
},
{
"to": 180,
"level": 1,
"label": "160–179"
},
{
"level": 2,
"label": "≥ 180"
}
],
"bandsLow": [
{
"to": 55,
"level": 3,
"label": "< 55"
},
{
"to": 65,
"level": 1,
"label": "55–64"
},
{
"to": 90,
"level": 0,
"label": "65–89"
},
{
"to": 100,
"level": 1,
"label": "90–99"
},
{
"level": 2,
"label": "≥ 100"
}
],
"data": [
[
1792998720000,
152,
94
],
[
1793000460000,
146,
91
],
[
1793009160000,
171,
99
],
[
1793019120000,
158,
95
]
],
"min": 60,
"max": 200,
"decimals": 0
},
{
"id": "spo2",
"gap": 3,
"title": "SpO₂",
"short": "SpO₂",
"unit": "%",
"kind": "cells",
"aggregate": "last",
"bands": [
{
"to": 88,
"level": 3,
"label": "< 88"
},
{
"to": 92,
"level": 2,
"label": "88–91"
},
{
"to": 95,
"level": 1,
"label": "92–94"
},
{
"level": 0,
"label": "≥ 95"
}
],
"data": [
[
1792998780000,
97
],
[
1793009220000,
95
]
],
"decimals": 0
},
{
"id": "t",
"gap": 3,
"title": "Temperature",
"short": "T",
"unit": "°C",
"kind": "cells",
"aggregate": "last",
"bands": [
{
"to": 35.1,
"level": 3,
"label": "< 35.1"
},
{
"to": 36.1,
"level": 1,
"label": "35.1–36.0"
},
{
"to": 38.1,
"level": 0,
"label": "36.1–38.0"
},
{
"to": 39.1,
"level": 1,
"label": "38.1–39.0"
},
{
"level": 2,
"label": "≥ 39.1"
}
],
"data": [
[
1792998840000,
37.4
]
],
"decimals": 1
}
],
"events": [
{
"at": 1793001600000,
"kind": "med",
"label": "Dose (demo)"
}
]
}
}
}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 = {
"chart": {
"type": "vitalsClock",
"height": 460
},
"series": [
],
"plotOptions": {
"vitalsClock": {
"radialColumn": {
"innerRadius": "76%",
"hole": "20%"
},
"time": {
"start": 1792994400000,
"span": "12h",
"step": "60min"
},
"now": 1793020800000,
"timeZone": "Europe/Berlin",
"demo": "Demo data · invented thresholds",
"params": [
{
"id": "hr",
"gap": 3,
"title": "Pulse",
"short": "Pulse",
"unit": "/min",
"kind": "columns",
"aggregate": "last",
"bands": [
{
"to": 40,
"level": 3,
"label": "< 40"
},
{
"to": 50,
"level": 1,
"label": "40–49"
},
{
"to": 91,
"level": 0,
"label": "50–90"
},
{
"to": 111,
"level": 1,
"label": "91–110"
},
{
"to": 131,
"level": 2,
"label": "111–130"
},
{
"level": 3,
"label": "≥ 131"
}
],
"data": [
[
1792998720000,
88
],
[
1793000400000,
81
],
[
1793009100000,
96
],
[
1793019000000,
84
]
],
"min": 30,
"max": 150,
"decimals": 0
},
{
"id": "bp",
"gap": 3,
"title": "Blood pressure",
"short": "BP",
"unit": "mmHg",
"kind": "range",
"bands": [
{
"to": 90,
"level": 3,
"label": "< 90"
},
{
"to": 101,
"level": 2,
"label": "90–100"
},
{
"to": 111,
"level": 1,
"label": "101–110"
},
{
"to": 160,
"level": 0,
"label": "111–159"
},
{
"to": 180,
"level": 1,
"label": "160–179"
},
{
"level": 2,
"label": "≥ 180"
}
],
"bandsLow": [
{
"to": 55,
"level": 3,
"label": "< 55"
},
{
"to": 65,
"level": 1,
"label": "55–64"
},
{
"to": 90,
"level": 0,
"label": "65–89"
},
{
"to": 100,
"level": 1,
"label": "90–99"
},
{
"level": 2,
"label": "≥ 100"
}
],
"data": [
[
1792998720000,
152,
94
],
[
1793000460000,
146,
91
],
[
1793009160000,
171,
99
],
[
1793019120000,
158,
95
]
],
"min": 60,
"max": 200,
"decimals": 0
},
{
"id": "spo2",
"gap": 3,
"title": "SpO₂",
"short": "SpO₂",
"unit": "%",
"kind": "cells",
"aggregate": "last",
"bands": [
{
"to": 88,
"level": 3,
"label": "< 88"
},
{
"to": 92,
"level": 2,
"label": "88–91"
},
{
"to": 95,
"level": 1,
"label": "92–94"
},
{
"level": 0,
"label": "≥ 95"
}
],
"data": [
[
1792998780000,
97
],
[
1793009220000,
95
]
],
"decimals": 0
},
{
"id": "t",
"gap": 3,
"title": "Temperature",
"short": "T",
"unit": "°C",
"kind": "cells",
"aggregate": "last",
"bands": [
{
"to": 35.1,
"level": 3,
"label": "< 35.1"
},
{
"to": 36.1,
"level": 1,
"label": "35.1–36.0"
},
{
"to": 38.1,
"level": 0,
"label": "36.1–38.0"
},
{
"to": 39.1,
"level": 1,
"label": "38.1–39.0"
},
{
"level": 2,
"label": "≥ 39.1"
}
],
"data": [
[
1792998840000,
37.4
]
],
"decimals": 1
}
],
"events": [
{
"at": 1793001600000,
"kind": "med",
"label": "Dose (demo)"
}
]
}
}
}
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-vitals-practice.json --out medical-vitals-practice.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/vitals-practice/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?