Chart Builder: Eleven Chart Types from One Table, CSV or JSON

By charliehorse55 · Ontario Canada

Most chart work fails at the same place: the data lives in one program and the chart has to be drawn in another. You export a CSV, open a spreadsheet, fix the columns it guessed wrong, and by the time the chart appears the numbers you wanted to show are three windows away. The Chart Builder on this site takes the shorter route. You paste a table, a CSV block or a JSON array into the page, choose one of eleven chart types, and the drawing follows every keystroke. When it looks right you export a PNG image, a PDF document or a JSON file that records the settings and the data, and the figures never left the browser tab they were typed into.

This is a guide to using it well rather than a list of buttons: which shapes suit which questions, how the three input modes differ, what the export actually produces, and the mistakes that make a finished chart mislead the person reading it.

How the builder is put together

The page has two working halves. On the left sits the data editor, a small spreadsheet with a header row and a label column. On the right sits the live preview, which redraws on each edit, whether you changed a cell, moved a slider or swapped the chart type. The card list above the preview holds eleven entries: area, bar, line, pie, radar, radial, matrix grid, cartogram, Dorling cartogram, event timeline and piano keyboard. Switching between them does not touch your data, so comparing the same six numbers as bars, as a line and as a radar profile takes three clicks and no retyping.

Everything that would normally be a server round trip happens locally. Parsing the CSV, validating the JSON, computing scales and rasterising the PNG all run as client-side JavaScript, which is why the tool works offline once the page is loaded and why a client's revenue figures stay on your machine. The trade is worth stating plainly: there is no account, no saved history and no share link. Close the tab and the dataset is gone unless you exported the JSON.

Above the preview sit the layout controls: title and subtitle text, chart width and height in pixels, and the palette. The palette can follow the default colours, one of the presets, or a set of custom colours you pick. Legend, tooltip and grid have their own toggles, and each chart type adds a group of settings that only makes sense for it, such as label placement on the pie, scale and value labels on the matrix, icon style on the timeline, and octave range with note-name display on the piano view.

Getting data in through three doors

The data editor offers the same dataset three ways, and the tabs stay in sync, so a workflow that starts by pasting CSV can finish by nudging one cell in the table.

The table tab is the direct one. The first column holds the category labels, every other column is a numeric series, and cells accept typing as well as paste from a spreadsheet. A button adds a row, another adds a column, and both remove actions work on the last position. This is the mode to use for six or eight hand-entered values, and it is also where you fix a cell after a bad paste.

The JSON tab takes an array of objects, one object per row, with the keys acting as column names:

[
  {"month": "Jan", "revenue": 4200, "costs": 3100},
  {"month": "Feb", "revenue": 5800, "costs": 3400}
]

  

That shape is what an API usually returns, so a response body can be pasted without reshaping it. The CSV tab expects a header line, labels in the first column and comma-separated numbers after that, which matches the file a spreadsheet exports by default. Two details break more pastes than any other: the parser wants a dot as the decimal separator, and it does not strip thousands separators, so 4,200 reads as two cells and shifts the row. If a column suddenly turns into text and the series stops drawing, look for a stray comma or a currency symbol in the data before suspecting the tool.

A Load Sample button fills a valid dataset shaped for the chart type you have selected. On the five specialised types this matters more than convenience, because a matrix grid wants a two-dimensional block of numbers, a cartogram wants region codes paired with values, a timeline wants dates with labels, and a piano view wants notes and a highlight set. Loading the sample and replacing its values one at a time is faster than guessing the shape from a blank table.

Which chart type answers your question

The eleven entries are not variations on one idea; they answer different questions, and the fastest way to pick one is to name the question first.

The Financial Times visual vocabulary makes the same point in more detail: the chart follows the relationship you want the reader to see, not the data's shape. A pie is fine for a budget split across five departments and poor for twelve monthly figures, where a line carries the trend and a bar carries the comparison. Radar suits six criteria scored on one scale, such as a vendor comparison, and gets crowded past eight spokes.

The specialised views cover ground that the common types cannot. A cartogram distorts region areas by value so a small but dense region stays visible, and the Dorling variant replaces each region with a circle sized by its value, which keeps the geography roughly in place while making small differences readable. The event timeline suits dated launches and incidents, and the piano keyboard turns note names into a keyboard diagram for chord charts and scale handouts.

Setting the look before you export

Four groups of settings decide whether the exported image is usable in a document. Start with size, because it is the one setting that cannot be fixed later without re-exporting: set the width and height in pixels to match the slot the chart will fill, and remember that the exports come out at twice that size, so an 800 by 400 preview leaves the tool as 1600 by 800.

The palette comes next. The default colours are chosen to stay distinguishable at small sizes; a preset shifts the whole chart to a different family; custom colours let a chart match a brand without exporting and recolouring elsewhere. Keep the number of series small when you use custom colours, since six hand-picked colours rarely stay distinguishable for a reader with colour vision deficiency.

Text and structure come third. Title and subtitle are separate fields, so a claim belongs in the title and a caveat in the subtitle rather than both in one long line. Legend, tooltip and grid each toggle independently, and a chart printed on paper usually needs the grid and the legend while the same chart on a slide often reads better without them.

The per-type settings are the last group and the easiest to overlook. On a pie, labels can sit inside the slices, outside with leader lines, or in the centre; outside is the safe choice when a slice is thin. The matrix grid can show its scale and the value inside each cell, which turns it into a small table with colour. Cartogram and Dorling views expose their own scale and label switches, the timeline takes an icon style and a line colour, and the piano view takes a start and end octave plus note-name display set to always, on press, on highlight or never.

Export: PNG, PDF and JSON

The export panel offers three formats and one filename field. PNG gives a raster image at twice the preview resolution, which is what most documents and slides want. PDF gives a single-page document with the chart on it, useful when the chart has to print or when a PDF is the required attachment. JSON gives the settings and the dataset as an object, which is the closest thing to a saved project: the Code tab shows the same object, so a chart can be described in a file and rebuilt later by pasting the data and settings back in.

There is no SVG download. The preview is drawn as SVG internally and used to produce the two image formats, but the panel does not offer the vector file, so an illustration that needs to scale to a billboard is the wrong job for this tool. There is also no multi-page PDF and no CMYK profile; a print shop that asks for a colour-managed PDF will need the source artwork rather than this export.

The Reset to Defaults control restores the initial settings for the current chart type. It is a quick way out of a palette experiment that went wrong, and it leaves your data alone, which makes it safe to press on a real dataset.

Mistakes that make a finished chart lie

Three errors account for most misleading charts produced in tools like this one, and all three are avoidable before export. The first is a bar chart with a truncated axis: when the value axis starts at 90 instead of zero, a difference of two percent looks like a doubling. Line charts have more latitude, but bars encode length, and length read from a non-zero baseline exaggerates every gap.

The second is too many categories. A pie with eleven slices cannot be read, because the eye compares angles poorly and the labels collide; the same data as a sorted bar chart is instantly ranked. A line chart with nine series has the same problem in a different costume, and a radar chart past eight spokes becomes a tangle of crossing lines.

The third is a wrong data shape rather than a wrong setting. A cartogram fed a plain list of categories has no region codes to place, a matrix fed a single column has no grid, and a timeline fed values without dates has no axis to spread along. When one of the specialised types draws something that looks like demo data, the cause is almost always the dataset, and rebuilding it from the sample is quicker than editing it into shape.

charliehorse55

Ontario Canada · SO reputation 2000 · Badges: 5🥇25🥈41🥉 · SO member since 2012