Live feed (demo): append measurements (V3)
api(chart).append(id, points) adds measurements and redraws at most once a second. followNow: true advances the internal now to the newest measurement. The button sends invented values; the calling software always decides what they mean.
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": 560
},
"series": [
],
"plotOptions": {
"vitalsClock": {
"radialColumn": {
"innerRadius": "76%",
"hole": "20%"
},
"time": {
"start": 1792936800000,
"span": "24h",
"step": "60min"
},
"now": 1793020800000,
"timeZone": "Europe/Berlin",
"demo": "Demo data · invented thresholds, not clinical",
"params": [
{
"id": "hr",
"gap": 3,
"title": "Heart rate",
"short": "HR",
"unit": "/min",
"kind": "columns",
"aggregate": "median",
"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": [
[
1792938060000,
76
],
[
1792940820000,
80
],
[
1792942320000,
80
],
[
1792944000000,
81
],
[
1792946760000,
81
],
[
1792948380000,
85
],
[
1792950960000,
82
],
[
1792952520000,
84
],
[
1792954920000,
85
],
[
1792956120000,
84
],
[
1792958820000,
80
],
[
1792961100000,
80
],
[
1792962780000,
80
],
[
1792964280000,
85
],
[
1792966440000,
78
],
[
1792967940000,
84
],
[
1792969980000,
82
],
[
1792971780000,
78
],
[
1792972980000,
75
],
[
1792975200000,
78
],
[
1792976820000,
77
],
[
1792978380000,
84
],
[
1792980900000,
108
],
[
1792983060000,
101
],
[
1792984740000,
89
],
[
1792986000000,
77
],
[
1792988460000,
71
],
[
1792991340000,
65
],
[
1792994280000,
68
],
[
1792997220000,
65
],
[
1792998600000,
64
],
[
1793000460000,
68
],
[
1793002740000,
72
],
[
1793004060000,
71
],
[
1793007000000,
69
],
[
1793009460000,
69
],
[
1793011620000,
76
],
[
1793013000000,
78
],
[
1793015220000,
79
],
[
1793017200000,
77
],
[
1793019000000,
79
],
[
1793020740000,
81
]
],
"min": 30,
"max": 150,
"staleAfter": "60min",
"decimals": 0
},
{
"id": "spo2",
"gap": 3,
"title": "SpO₂",
"short": "SpO₂",
"unit": "%",
"kind": "cells",
"aggregate": "min",
"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": [
[
1792938120000,
97
],
[
1792941660000,
97
],
[
1792945740000,
96
],
[
1792948860000,
96
],
[
1792950780000,
97
],
[
1792953240000,
97
],
[
1792957380000,
96
],
[
1792960320000,
97
],
[
1792962300000,
97
],
[
1792964400000,
97
],
[
1792967940000,
96
],
[
1792970760000,
96
],
[
1792974180000,
96
],
[
1792976340000,
97
],
[
1792980420000,
90
],
[
1792984200000,
91
],
[
1792986180000,
97
],
[
1792988820000,
96
],
[
1792992480000,
97
],
[
1792996500000,
97
],
[
1792998720000,
97
],
[
1793001660000,
96
],
[
1793003460000,
97
],
[
1793007000000,
96
],
[
1793009400000,
96
],
[
1793011140000,
96
],
[
1793015460000,
97
],
[
1793019780000,
96
]
],
"staleAfter": "90min",
"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": [
[
1792940820000,
129,
77
],
[
1792947360000,
134,
84
],
[
1792954020000,
139,
84
],
[
1792960560000,
136,
84
],
[
1792970340000,
134,
82
],
[
1792977480000,
132,
83
],
[
1792984980000,
114,
73
],
[
1792990500000,
121,
77
],
[
1792996380000,
118,
73
],
[
1793004660000,
115,
69
],
[
1793009760000,
121,
77
],
[
1793015760000,
117,
73
]
],
"min": 40,
"max": 190,
"staleAfter": "4h",
"decimals": 0
},
{
"id": "rr",
"gap": 3,
"title": "Respiratory rate",
"short": "RR",
"unit": "/min",
"kind": "trace",
"bands": [
{
"to": 9,
"level": 3,
"label": "< 9"
},
{
"to": 12,
"level": 1,
"label": "9–11"
},
{
"to": 21,
"level": 0,
"label": "12–20"
},
{
"to": 25,
"level": 2,
"label": "21–24"
},
{
"level": 3,
"label": "≥ 25"
}
],
"data": [
[
1792941360000,
16
],
[
1792946520000,
14
],
[
1792952460000,
16
],
[
1792956480000,
15
],
[
1792962060000,
16
],
[
1792967460000,
16
],
[
1792974480000,
16
],
[
1792977720000,
15
],
[
1792981500000,
24
],
[
1792987800000,
16
],
[
1792995600000,
16
],
[
1793001600000,
16
],
[
1793008740000,
15
],
[
1793013420000,
15
],
[
1793020620000,
16
]
],
"min": 5,
"max": 35,
"staleAfter": "3h",
"decimals": 0
},
{
"id": "t",
"gap": 3,
"title": "Temperature",
"short": "T",
"unit": "°C",
"kind": "trace",
"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": [
[
1792946940000,
37.1
],
[
1792956060000,
37.1
],
[
1792963500000,
36.9
],
[
1792988640000,
37.1
],
[
1793003880000,
37.2
],
[
1793014320000,
37.1
]
],
"min": 34.5,
"max": 40.5,
"staleAfter": "6h",
"gapAfter": 240
}
],
"events": [
{
"at": 1792998000000,
"kind": "med",
"label": "Medication (demo)"
},
{
"at": 1792980300000,
"kind": "med",
"label": "O₂ 2 l/min (demo)"
},
{
"at": 1792960200000,
"kind": "Round",
"label": ""
}
],
"alarms": [
{
"from": 1792979400000,
"to": 1792982400000,
"label": "Device alarm SpO₂ (demo)"
}
],
// Full configuration available through Raw or Copy.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": 560
},
"series": [
],
"plotOptions": {
"vitalsClock": {
"radialColumn": {
"innerRadius": "76%",
"hole": "20%"
},
"time": {
"start": 1792936800000,
"span": "24h",
"step": "60min"
},
"now": 1793020800000,
"timeZone": "Europe/Berlin",
"demo": "Demo data · invented thresholds, not clinical",
"params": [
{
"id": "hr",
"gap": 3,
"title": "Heart rate",
"short": "HR",
"unit": "/min",
"kind": "columns",
"aggregate": "median",
"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": [
[
1792938060000,
76
],
[
1792940820000,
80
],
[
1792942320000,
80
],
[
1792944000000,
81
],
[
1792946760000,
81
],
[
1792948380000,
85
],
[
1792950960000,
82
],
[
1792952520000,
84
],
[
1792954920000,
85
],
[
1792956120000,
84
],
[
1792958820000,
80
],
[
1792961100000,
80
],
[
1792962780000,
80
],
[
1792964280000,
85
],
[
1792966440000,
78
],
[
1792967940000,
84
],
[
1792969980000,
82
],
[
1792971780000,
78
],
[
1792972980000,
75
],
[
1792975200000,
78
],
[
1792976820000,
77
],
[
1792978380000,
84
],
[
1792980900000,
108
],
[
1792983060000,
101
],
[
1792984740000,
89
],
[
1792986000000,
77
],
[
1792988460000,
71
],
[
1792991340000,
65
],
[
1792994280000,
68
],
[
1792997220000,
65
],
[
1792998600000,
64
],
[
1793000460000,
68
],
[
1793002740000,
72
],
[
1793004060000,
71
],
[
1793007000000,
69
],
[
1793009460000,
69
],
[
1793011620000,
76
],
[
1793013000000,
78
],
[
1793015220000,
79
],
[
1793017200000,
77
],
[
1793019000000,
79
],
[
1793020740000,
81
]
],
"min": 30,
"max": 150,
"staleAfter": "60min",
"decimals": 0
},
{
"id": "spo2",
"gap": 3,
"title": "SpO₂",
"short": "SpO₂",
"unit": "%",
"kind": "cells",
"aggregate": "min",
"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": [
[
1792938120000,
97
],
[
1792941660000,
97
],
[
1792945740000,
96
],
[
1792948860000,
96
],
[
1792950780000,
97
],
[
1792953240000,
97
],
[
1792957380000,
96
],
[
1792960320000,
97
],
[
1792962300000,
97
],
[
1792964400000,
97
],
[
1792967940000,
96
],
[
1792970760000,
96
],
[
1792974180000,
96
],
[
1792976340000,
97
],
[
1792980420000,
90
],
[
1792984200000,
91
],
[
1792986180000,
97
],
[
1792988820000,
96
],
[
1792992480000,
97
],
[
1792996500000,
97
],
[
1792998720000,
97
],
[
1793001660000,
96
],
[
1793003460000,
97
],
[
1793007000000,
96
],
[
1793009400000,
96
],
[
1793011140000,
96
],
[
1793015460000,
97
],
[
1793019780000,
96
]
],
"staleAfter": "90min",
"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": [
[
1792940820000,
129,
77
],
[
1792947360000,
134,
84
],
[
1792954020000,
139,
84
],
[
1792960560000,
136,
84
],
[
1792970340000,
134,
82
],
[
1792977480000,
132,
83
],
[
1792984980000,
114,
73
],
[
1792990500000,
121,
77
],
[
1792996380000,
118,
73
],
[
1793004660000,
115,
69
],
[
1793009760000,
121,
77
],
[
1793015760000,
117,
73
]
],
"min": 40,
"max": 190,
"staleAfter": "4h",
"decimals": 0
},
{
"id": "rr",
"gap": 3,
"title": "Respiratory rate",
"short": "RR",
"unit": "/min",
"kind": "trace",
"bands": [
{
"to": 9,
"level": 3,
"label": "< 9"
},
{
"to": 12,
"level": 1,
"label": "9–11"
},
{
"to": 21,
"level": 0,
"label": "12–20"
},
{
"to": 25,
"level": 2,
"label": "21–24"
},
{
"level": 3,
"label": "≥ 25"
}
],
"data": [
[
1792941360000,
16
],
[
1792946520000,
14
],
[
1792952460000,
16
],
[
1792956480000,
15
],
[
1792962060000,
16
],
[
1792967460000,
16
],
[
1792974480000,
16
],
[
1792977720000,
15
],
[
1792981500000,
24
],
[
1792987800000,
16
],
[
1792995600000,
16
],
[
1793001600000,
16
],
[
1793008740000,
15
],
[
1793013420000,
15
],
[
1793020620000,
16
]
],
"min": 5,
"max": 35,
"staleAfter": "3h",
"decimals": 0
},
{
"id": "t",
"gap": 3,
"title": "Temperature",
"short": "T",
"unit": "°C",
"kind": "trace",
"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": [
[
1792946940000,
37.1
],
[
1792956060000,
37.1
],
[
1792963500000,
36.9
],
[
1792988640000,
37.1
],
[
1793003880000,
37.2
],
[
1793014320000,
37.1
]
],
"min": 34.5,
"max": 40.5,
"staleAfter": "6h",
"gapAfter": 240
}
],
"events": [
{
"at": 1792998000000,
"kind": "med",
"label": "Medication (demo)"
},
{
"at": 1792980300000,
"kind": "med",
"label": "O₂ 2 l/min (demo)"
},
{
"at": 1792960200000,
"kind": "Round",
"label": ""
}
],
"alarms": [
{
"from": 1792979400000,
"to": 1792982400000,
"label": "Device alarm SpO₂ (demo)"
}
],
"followNow": true
}
}
}
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-live.json --out medical-vitals-live.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-live/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?