Turn a time-series JSON into a video where the lines grow across the chart
This suits numbers that rise and fall over time, such as revenue, user counts or page views. Instead of screen-recording a spreadsheet chart, you get the lines growing as a video file. The data is two parts: timeline (the list of periods) and series (name, color and values).
For a period whose value is unknown, put null at that position in values. The number of entries in values must match timeline; if it does not, a message appears when you apply the JSON. Use "Save JSON" to keep the data as a file, and "Load JSON" to read it back next time.
The total time is the zoom-in intro, plus the line drawing time, plus the hold at the end. "Set the length by" chooses which end of that sum you fix.
| Mode | You enter | Solved for you | Good for |
|---|---|---|---|
| Each part in seconds | Intro, line drawing, hold | Total video seconds | Shaping how the line advances |
| Total video seconds | Total video seconds | Line drawing seconds | A fixed running time: matching BGM, fitting an ad slot |
Only the line drawing time is solved backwards. The intro and the hold are presentation choices, so they are never trimmed to hit a running time. Changing either one tightens or loosens the drawing time instead, and the total you asked for is kept.
The line needs at least 2 seconds to draw. A total below "intro + hold + 2s" is raised to that shortest workable length, and the screen says it was raised. To go shorter, reduce the intro or the hold.
The seek bar shows the position within the total. The playback speed (0.25x to 3x) only affects what you watch on screen; the recorded video keeps its own length.
| Resolution | Ratio | Typical use |
|---|---|---|
| 1280×720 | 16:9 | Quick trial |
| 1920×1080 | 16:9 | Ordinary landscape video |
| 2560×1440 / 3840×2160 | 16:9 | High-resolution export |
| 1080×1920 | 9:16 | Short-form and portrait social posts |
yAxis.mode in the JSON takes three values. With grow, the upper limit follows the lines as they advance, which makes the rise feel stronger. fixed pins the axis to max, and auto derives one fixed value from all the data. startMax is the starting limit for grow, headroom is the space kept above the highest value, and smooth controls how gently the axis follows.
The grid, the legend, the value label at the tip and the actual data points can each be turned off. If the text looks small, raise the "Title", "Axis and period labels", "Value at the line tip" and "Large current value" sliders. Neon glow, tip trail and particles are decorative, so switch them off for a calmer chart. With many series, "First series only" lets you check them one at a time.
Only the canvas is recorded, so the settings panel and the buttons never appear in the video. The safe area guide is a preview aid and is not recorded either. Recording uses MediaRecorder and captureStream, so a recent Chrome or Edge is recommended.
A video in which the lines grow from left to right along the timeline. A small chart zooms up during the intro, and the current value follows the tip of each line. The export format is WebM.
Put null at that position in values. Null gaps are drawn as a dashed line with a "No data" label. The number of entries in values must match timeline.
Yes. Set "Set the length by" to "Total video seconds" and type the seconds; the line drawing time is solved backwards for you. The intro and the hold are presentation choices and are never trimmed, so the drawing time absorbs the difference.
Yes. Set yAxis.mode to grow in the JSON and the upper limit of the Y axis follows the values as the lines advance. Use fixed to pin it to max, or auto for a fixed value derived from all the data.
No. Parsing the JSON, drawing the chart and exporting the video all happen inside your browser. Nothing is sent anywhere.