A simple HTML/JavaScript tool that reads a local CSV file of blood pressure and pulse measurements and visualizes them with interactive charts. Designed to visualize trends and manage health data effectively.
- Loads the data from local CSV file
- Plots systolic and diastolic values on a single line chart
- Plots polynomial trend lines for systolic and diastolic
- Shows thresholds lines: Elevated blood pressure, Hypertension Stage 1 & 2, Hypotension
- Toggleable legend items/lines
- Tooltips display paired values: systolic, diastolic, and pulse
- Download all files in this repository.
- Open
index.htmlin your browser. - Click Select CSV file and choose your data file.
- Chart will render automatically.
- Hover data points to view detailed tooltips.
- Click legend items to toggle series visibility (Pulse and Hypotension are hidden by default).
Your CSV should have the following columns (without header):
date,time,sys/dia,pulse
- date: ISO date (e.g. 2025-04-26)
- time: 24-hour time (e.g. 14:30)
- systolic/diastolic blood pressure (e.g. 120/80)
- pulse: integer (optional; leave empty if unavailable)
An example file with sample blood pressure readings is provided at: sample_data.csv
2025-04-26,15:40,110/77,56
2025-04-26,19:00,122/67,76
2025-04-27,7:00,128/81,65
2025-04-27,7:50,123/83,62
2025-04-27,9:05,130/89,60
- Sit quietly for 5 minutes, feet flat, back supported.
- Rest the cuff at heart level on bare skin.
- Avoid caffeine, nicotine and exercise for 30 minutes beforehand.
- Measure at the same time every day.
- Take multiple readings and record the results.
The classification of blood pressure values used in this tool is based on guidelines from the American Heart Association.
| Category | Systolic (mm Hg) | Diastolic (mm Hg) |
|---|---|---|
| Normal | < 120 | and < 80 |
| Elevated | 120–129 | and < 80 |
| Hypertension Stage 1 | 130–139 | or 80–89 |
| Hypertension Stage 2 | ≥ 140 | or ≥ 90 |
| Hypotension | < 90 | or < 60 |
- Thanks to the developers of Chart.js for the amazing charting library that powers the visualizations in this tool.
- Thanks to Vladi and Anatoliy for their ideas and testing.
Blood Pressure Chart Generator is available under the MIT license.