# Patient flow: stages per patient (rangeBar) (Medicine & practice example) > WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/medical/flow-timeline/ · Index for agents: https://westcoast-charts.com/llms.txt schedule.flow.fromEvents(): check-in, waiting room, lab, exam, checkout per pseudonymous patient ID. Total waiting: median 19 min, P90 26.1 min (never a sum or mean). - Chart type: `rangeBar` (Range Bar) - Collection: Medicine & practice · Medicine & practice - Raw configuration: https://westcoast-charts.com/gallery-src/medical/flow-timeline.js - Standalone example: https://westcoast-charts.com/embed/samples/wcc/premium/medical.html?only=flow-timeline&lang=en#v-flow-timeline ## 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 = { "chart": { "type": "rangeBar", "height": 640 }, "series": [ { "name": "Waiting room", "data": [ { "x": "P-8919", "y": [ 1792995840000, 1792996740000 ], "wait": true, "min": 15 }, { "x": "P-8542", "y": [ 1792996320000, 1792996980000 ], "wait": true, "min": 11 }, { "x": "P-6003", "y": [ 1792996440000, 1792997340000 ], "wait": true, "min": 15 }, { "x": "P-7838", "y": [ 1792997580000, 1792998300000 ], "wait": true, "min": 12 }, { "x": "P-4922", "y": [ 1792998000000, 1792998720000 ], "wait": true, "min": 12 }, { "x": "P-7461", "y": [ 1792998120000, 1792999140000 ], "wait": true, "min": 17 }, { "x": "P-3841", "y": [ 1792999380000, 1793000160000 ], "wait": true, "min": 13 }, { "x": "P-6757", "y": [ 1792999560000, 1793000280000 ], "wait": true, "min": 12 }, { "x": "P-6380", "y": [ 1792999860000, 1793000820000 ], "wait": true, "min": 16 }, { "x": "P-5676", "y": [ 1793000880000, 1793002140000 ], "wait": true, "min": 21 }, { "x": "P-5299", "y": [ 1793001300000, 1793002620000 ], "wait": true, "min": 22 }, { "x": "P-2760", "y": [ 1793001660000, 1793002080000 ], "wait": true, "min": 7 }, { "x": "P-1679", "y": [ 1793002260000, 1793003460000 ], "wait": true, "min": 20 }, { "x": "P-4595", "y": [ 1793003040000, 1793003580000 ], "wait": true, "min": 9 }, { "x": "P-3514", "y": [ 1793004540000, 1793005680000 ], "wait": true, "min": 19 }, { "x": "P-4218", "y": [ 1793004780000, 1793005260000 ], "wait": true, "min": 8 }, { "x": "P-9598", "y": [ 1793004840000, 1793005260000 ], "wait": true, "min": 7 }, { "x": "P-2433", "y": [ 1793005800000, 1793007060000 ], "wait": true, "min": 21 }, { "x": "P-8517", "y": [ 1793005920000, 1793006760000 ], "wait": true, "min": 14 }, { "x": "P-3137", "y": [ 1793005980000, 1793007480000 ], "wait": true, "min": 25 }, { "x": "P-3816", "y": [ 1793006700000, 1793007480000 ], "wait": true, "min": 13 }, { "x": "P-7436", "y": [ 1793008140000, 1793009040000 ], "wait": true, "min": 15 }, { "x": "P-1352", "y": [ 1793008200000, 1793008920000 ], "wait": true, "min": 12 }, { "x": "P-2056", "y": [ 1793008740000, 1793009460000 ], "wait": true, "min": 12 }, { "x": "P-9271", "y": [ 1793009520000, 1793010000000 ], "wait": true, "min": 8 }, { "x": "P-6355", "y": [ 1793009520000, 1793010540000 ], "wait": true, "min": 17 }, { "x": "P-9975", "y": [ 1793010060000, 1793010780000 ], "wait": true, "min": 12 }, { "x": "P-5274", "y": [ 1793010780000, 1793011620000 ], "wait": true, "min": 14 }, { "x": "P-8894", "y": [ 1793011260000, 1793012160000 ], "wait": true, "min": 15 }, { "x": "P-8190", "y": [ 1793011740000, 1793012160000 ], "wait": true, "min": 7 } ] }, { "name": "Waiting in room", "data": [ { "x": "P-8919", "y": [ 1792996740000, 1792996920000 ], "wait": true, "min": 3 }, { "x": "P-8542", "y": [ 1792996980000, 1792997220000 ], "wait": true, "min": 4 }, { "x": "P-6003", "y": [ 1792997340000, 1792997580000 ], "wait": true, "min": 4 }, { "x": "P-7838", "y": [ 1792998300000, 1792998720000 ], "wait": true, "min": 7 }, { "x": "P-4922", "y": [ 1792998720000, 1792999020000 ], "wait": true, "min": 5 }, { "x": "P-7461", "y": [ 1792999140000, 1792999320000 ], "wait": true, "min": 3 }, { "x": "P-3841", "y": [ 1793000160000, 1793000520000 ], "wait": true, "min": 6 }, { "x": "P-6757", "y": [ 1793000280000, 1793000760000 ], "wait": true, "min": 8 }, { "x": "P-6380", "y": [ 1793000820000, 1793001360000 ], "wait": true, "min": 9 }, { "x": "P-2760", "y": [ 1793002080000, 1793002500000 ], "wait": true, "min": 7 }, { "x": "P-5676", "y": [ 1793002140000, 1793002320000 ], "wait": true, "min": 3 }, { "x": "P-5299", "y": [ 1793002620000, 1793002920000 ], "wait": true, "min": 5 }, { "x": "P-1679", "y": [ 1793003460000, 1793003820000 ], "wait": true, "min": 6 }, { "x": "P-4595", "y": [ 1793003580000, 1793003880000 ], "wait": true, "min": 5 }, { "x": "P-4218", "y": [ 1793005260000, 1793005620000 ], "wait": true, "min": 6 }, { "x": "P-9598", "y": [ 1793005260000, 1793005620000 ], "wait": true, "min": 6 }, { "x": "P-3514", "y": [ 1793005680000, 1793005980000 ], "wait": true, "min": 5 }, { "x": "P-8517", "y": [ 1793006760000, 1793007420000 ], "wait": true, "min": 11 }, { "x": "P-2433", "y": [ 1793007060000, 1793007600000 ], "wait": true, "min": 9 }, { "x": "P-3137", "y": [ 1793007480000, 1793007720000 ], "wait": true, "min": 4 }, { "x": "P-3816", "y": [ 1793007480000, 1793007720000 ], "wait": true, "min": 4 }, { "x": "P-1352", "y": [ 1793008920000, 1793009340000 ], "wait": true, "min": 7 }, { "x": "P-7436", "y": [ 1793009040000, 1793009460000 ], "wait": true, "min": 7 }, { "x": "P-2056", "y": [ 1793009460000, 1793009820000 ], "wait": true, "min": 6 }, { "x": "P-9271", "y": [ 1793010000000, 1793010540000 ], "wait": true, "min": 9 }, { "x": "P-6355", "y": [ 1793010540000, 1793010720000 ], "wait": true, "min": 3 }, { "x": "P-9975", "y": [ 1793010780000, 1793011020000 ], "wait": true, "min": 4 }, { "x": "P-5274", "y": [ 1793011620000, 1793012100000 ], "wait": true, "min": 8 }, { "x": "P-8190", "y": [ 1793012160000, 1793012820000 ], "wait": true, "min": 11 }, { "x": "P-8894", "y": [ 1793012160000, 1793012520000 ], "wait": true, "min": 6 } ] }, { "name": "Exam", "data": [ { "x": "P-8919", "y": [ 1792996920000, 1792998660000 ], "wait": false, "min": 29 }, { "x": "P-8542", "y": [ 1792997220000, 1792998720000 ], "wait": false, "min": 25 }, { "x": "P-6003", "y": [ 1792997580000, 1792998840000 ], "wait": false, "min": 21 }, { "x": "P-7461", "y": [ 1792999320000, 1793001360000 ], "wait": false, "min": 34 }, { "x": "P-7838", "y": [ 1792999620000, 1793000580000 ], "wait": false, "min": 16 }, { "x": "P-4922", "y": [ 1792999740000, 1793000820000 ], "wait": false, "min": 18 }, { "x": "P-6757", "y": [ 1793000760000, 1793002140000 ], "wait": false, "min": 23 }, { "x": "P-6380", "y": [ 1793001360000, 1793003100000 ], "wait": false, "min": 29 }, { "x": "P-3841", "y": [ 1793001360000, 1793002560000 ], "wait": false, "min": 20 }, { "x": "P-2760", "y": [ 1793002500000, 1793003880000 ], "wait": false, "min": 23 }, { "x": "P-5676", "y": [ 1793003220000, 1793004000000 ], "wait": false, "min": 13 }, { "x": "P-5299", "y": [ 1793003640000, 1793004900000 ], "wait": false, "min": 21 }, { "x": "P-1679", "y": [ 1793003820000, 1793005680000 ], "wait": false, "min": 31 }, { "x": "P-4595", "y": [ 1793003880000, 1793005320000 ], "wait": false, "min": 24 }, { "x": "P-9598", "y": [ 1793005620000, 1793007420000 ], "wait": false, "min": 30 }, { "x": "P-3514", "y": [ 1793005980000, 1793007240000 ], "wait": false, "min": 21 }, { "x": "P-4218", "y": [ 1793006220000, 1793007540000 ], "wait": false, "min": 22 }, { "x": "P-8517", "y": [ 1793007420000, 1793008980000 ], "wait": false, "min": 26 }, { "x": "P-2433", "y": [ 1793007600000, 1793008920000 ], "wait": false, "min": 22 }, { "x": "P-3137", "y": [ 1793008440000, 1793009880000 ], "wait": false, "min": 24 }, { "x": "P-3816", "y": [ 1793008560000, 1793009460000 ], "wait": false, "min": 15 }, { "x": "P-1352", "y": [ 1793009340000, 1793010720000 ], "wait": false, "min": 23 }, { "x": "P-7436", "y": [ 1793009460000, 1793010720000 ], "wait": false, "min": 21 }, { "x": "P-9271", "y": [ 1793010540000, 1793012520000 ], "wait": false, "min": 33 }, { "x": "P-2056", "y": [ 1793010720000, 1793011800000 ], "wait": false, "min": 18 }, { "x": "P-9975", "y": [ 1793011020000, 1793012700000 ], "wait": false, "min": 28 }, { "x": "P-6355", "y": [ 1793011560000, 1793012580000 ], "wait": false, "min": 17 }, { "x": "P-5274", "y": [ 1793012100000, 1793013780000 ], "wait": false, "min": 28 }, { "x": "P-8190", "y": [ 1793012820000, 1793013720000 ], "wait": false, "min": 15 }, { "x": "P-8894", "y": [ 1793013420000, 1793014200000 ], "wait": false, "min": 13 } ] }, { "name": "Lab", "data": [ { "x": "P-7838", "y": [ 1792998720000, 1792999620000 ], "wait": false, "min": 15 }, { "x": "P-4922", "y": [ 1792999020000, 1792999740000 ], "wait": false, "min": 12 }, { "x": "P-3841", "y": [ 1793000520000, 1793001360000 ], "wait": false, "min": 14 }, { "x": "P-5676", "y": [ 1793002320000, 1793003220000 ], "wait": false, "min": 15 }, { "x": "P-5299", "y": [ 1793002920000, 1793003640000 ], "wait": false, "min": 12 }, { "x": "P-4218", "y": [ 1793005620000, 1793006220000 ], "wait": false, "min": 10 }, { "x": "P-3137", "y": [ 1793007720000, 1793008440000 ], "wait": false, "min": 12 }, { "x": "P-3816", "y": [ 1793007720000, 1793008560000 ], "wait": false, "min": 14 }, { "x": "P-2056", "y": [ 1793009820000, 1793010720000 ], "wait": false, "min": 15 }, { "x": "P-6355", "y": [ 1793010720000, 1793011560000 ], "wait": false, "min": 14 }, { "x": "P-8894", "y": [ 1793012520000, 1793013420000 ], "wait": false, "min": 15 } ] } ], "plotOptions": { "bar": { "horizontal": true, "barHeight": "70%", "rangeBarGroupRows": true } }, "xaxis": { "type": "datetime", "labels": { "datetimeUTC": false } }, "legend": { "position": "top" }, "dataLabels": { "enabled": false }, "tooltip": { "x": { "format": "HH:mm" } } } 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-flow-timeline.json --out medical-flow-timeline.svg --with-table` (save the options above as JSON first)