Web Serial Plotter
Read serial data over Web Serial and plot multi-channel curves in real time. Auto-discovers channels from named values (temp=25.3) or numeric columns, with delimiter and timestamp options, dual Y axes, line/scatter modes, window zoom, statistics, and CSV export. Requires Chrome/Edge 89+ over HTTPS and serial authorization.
FreeOnline Tool
Loading…
How to Use
- Open the page in Chrome 89+ or Edge 89+ over HTTPS, choose a baud rate (300–921600, default 9600), click Open serial port, and authorize the device.
- Choose a delimiter (auto-detect, comma, tab, semicolon, space, pipe) and a timestamp mode (receive time in relative seconds, first column in seconds, first column in milliseconds). Changes affect only data received afterward.
- As the device prints data, channels appear automatically from column names or named keys. In the channel table, toggle visibility, choose the left or right Y axis, and select line or scatter.
- Set the display window in seconds (0 shows everything; range 0–3600), or scroll the mouse wheel over the chart to zoom the time window.
- Review window statistics (current, min, max, average, sample count). Pause stops only parsing while serial reading and raw logging continue; Save CSV exports the data.
- Without hardware, click Load sample data to play demo data for temp/hum/press; the demo and serial reading are mutually exclusive.
Data formats: named channels such as temp=25.3,hum=55.1, or plain numeric columns such as 25.3,55.1,1013. Up to 5000 samples are retained, with the oldest dropped beyond that; serial text is parsed line by line, and the send box appends a newline.
Features
- Reads serial data over Web Serial, parses it line by line, and plots multi-channel curves in real time without a separate serial monitor or plotting tool.
- Automatic channel discovery: named channels (speed:1.2, rpm=4567) and numeric columns separated by commas, tabs, semicolons, spaces, or pipes; named channels take priority over delimiter parsing.
- Timestamp options use receive time in relative seconds, or treat the first column as a seconds/milliseconds timestamp. Delimiter and timestamp changes affect only data received afterward.
- Each channel can be shown or hidden, assigned to the left or right Y axis, and drawn as a line or scatter, with an automatic color and current value.
- The display window ranges from 0 to 3600 seconds (0 shows all), and the mouse wheel zooms the window (roughly 1–600 seconds). Window statistics show current, min, max, average, and sample count.
- Pause parsing, clear data, or export CSV with a UTF-8 BOM (time plus each channel). While paused, serial reading continues and the raw data panel keeps recording.
- Send text to the device with an appended newline, and use 180 points of built-in demo data (temp/hum/press) to view plotting without hardware.
- Memory keeps at most 5000 samples, dropping the oldest, and the raw serial text buffer also has a length cap.
Use Cases
Debug Arduino/ESP32 sensor output
Plot temperature, humidity, pressure, and other printed values in real time to check whether sensor readings are stable or have sudden jumps.
Tune PID loops and motors
Watch setpoint, actual value, and output curves together, using dual Y axes and scatter mode to analyze overshoot, oscillation, and response speed.
Record and export serial data
Capture device output over time, pause for analysis, and export CSV for further statistics in Excel or a script.
Demonstrate plotting without hardware
Use the built-in demo data to show multi-channel plotting, window zoom, and statistics for classroom or solution demonstrations.
FAQ
Which browsers are supported, and can I try it without hardware?
Chrome 89+ or Edge 89+ with Web Serial support, served over HTTPS. Firefox and Safari are not supported. Without hardware, Load sample data plays temp/hum/press demo channels, and plotting, statistics, and CSV export all work.
Which serial data formats are supported?
Two formats: named channels such as temp=25.3,hum=55.1 or speed:1.2,rpm=4567, and plain numeric columns such as 25.3,55.1,1013. Columns may use auto-detection, comma, tab, semicolon, space, or pipe delimiters. The timestamp can be receive time in relative seconds, or the first column in seconds or milliseconds.
How do I set up dual Y axes and line/scatter modes?
In the channel table, each channel has a visibility checkbox, a Y-axis dropdown (left or right), and a type dropdown (line or scatter). The left and right axes compute their ranges independently, which helps when signals have different units.
Does pausing stop serial reading?
No. Pause stops parsing new data only. Serial reading continues and the raw serial data panel keeps recording. When parsing resumes, only complete lines received afterward are processed, and the partial line buffer is cleared on pause.
How much data is kept, and what does the CSV contain?
At most 5000 samples are retained, with the oldest dropped beyond that. The CSV uses a UTF-8 BOM, starts with a time column in seconds, and then has one column per channel; missing values for a sample are left blank.
Can demo data and serial reading run at the same time?
No. They are mutually exclusive: opening the serial port while the demo is playing stops the demo and clears data, and clicking the demo button while connected asks you to close the serial port first.