How to turn CSV or JSON records into a chart

Paste records or choose a .csv / .json file, pick a label column and one or more numeric series, and press Generate chart. Line, bar, area, pie and scatter charts are drawn in this browser and leave as an SVG or PNG file.

The chart covers the first 80 rows of the table (a pie covers 12) and the metrics row says "In chart" next to the row count whenever rows are left out. Up to 1,000 rows are read, so the percentages and the axis labels always describe the data that is really drawn.

  1. Paste the records into the field or choose a CSV / JSON file. The separator is detected from the first line (comma, semicolon or tab) unless you pick one yourself; JSON must be an array of objects or an object with a "data" array. The limit is 10 MB for a file and for a paste.
  2. Press "Preview" (a chosen file is parsed as soon as it loads). The status line reports the rows and columns, an unnamed header cell gets a numbered name and a repeated header name gets a "(2)" suffix, so no column is dropped.
  3. Choose the chart type, the label / X column and the numeric series. Columns whose values are at least 75 % numeric are listed, the two best-filled ones are preselected, and a label column that holds numbers is used as the scatter X axis.
  4. Press "Generate chart". The metrics show the rows, the series and, when the chart is capped, how many rows were plotted. Changing the type, the label or the series redraws the chart immediately.
  5. Export the chart as SVG (vector, editable) or PNG (1520 x 800, rendered on a local canvas), or press Clear to empty the data, the chart, the metrics and the delimiter.

What the parser accepts, what the axes show and what the exports contain

What is read from the file

CSV is parsed with quoted fields, so a separator or a line break inside "quotes" stays part of the value, and both \r\n and \r line endings are accepted. Auto detection counts the separator candidates on the first line; if a file has one single column, or a first line without a separator, choose Comma, Semicolon or Tab explicitly.

JSON is read as an array of objects, or as an object whose "data" property is that array; anything else is refused with the same message as a broken CSV. Reading stops at 1,000 rows and the status line then says "the first 1,000 of N rows" instead of pretending the file was that size. A paste larger than 10 MB is refused like a file of that size.

What the chart shows

A column is offered as a series when at least three quarters of its filled cells are numbers; empty cells and text are drawn as gaps, not as zero - a line is broken into segments and a bar is left out. The default selection prefers columns that are filled in at least 75 % of the rows, so a sparse column is not charted by accident.

Cartesian charts put the bottom of the axis at zero when the data is positive; negative values pull the axis below zero, and a bar chart draws its bars downwards from the zero line instead of clamping them to a pixel. Ticks follow a 1 / 2 / 5 step with the precision the data needs (0.0002 … 0.0006 for a millimetre scale, 500M / 1B / 1.5B for a large one), so no label is clipped by the gutter.

Rows, pie slices and exports

A pie uses one series - the first one selected - and the status line says so when several are chosen. Rows past the twelfth slice are summed into an "Other rows" slice, so the percentages still describe the whole table rather than the visible part. A scatter chart places points by value when the X column is numeric, and by position when it holds labels.

A chart that no longer matches the field is dropped: editing the data, loading another file or failing to parse empties the chart and disables the export buttons until Generate is pressed again. The SVG is a standalone 760 x 400 file; the PNG is drawn at twice that size on a canvas in this tab, so neither export needs a server.

Recent tools: