How to create a chart from JSON

Choose the question before the chart

Write down what you actually want to compare. It might be energy use across a day, incidents by service, shipments by carrier, or the share of orders in each final status. That question draws the boundary around the records and fields you need.

A line or area chart suits an ordered sequence such as time. A bar chart makes category differences easy to compare. A pie or doughnut chart is defensible only when the categories are mutually exclusive parts of one meaningful whole.

Inspect the source shape

This operations sample is a root array. Each row keeps a timestamp, site, source, and kilowatt-hour reading together. That pairing matters: extracting dates from one filtered set and values from another can shift every point without producing a syntax error.

Before you open Chart, look at the value field itself. Is it numeric? What should happen to a null? If the rows can arrive out of order, sort them now rather than hoping the line lands in the right sequence.

[
  { "timestamp": "2026-08-18T00:00:00Z", "site": "ATL-1", "source": "grid", "kwh": 428.4 },
  { "timestamp": "2026-08-18T01:00:00Z", "site": "ATL-1", "source": "solar", "kwh": 96.2 },
  { "timestamp": "2026-08-18T02:00:00Z", "site": "ATL-1", "source": "grid", "kwh": 391.7 },
  { "timestamp": "2026-08-18T00:00:00Z", "site": "DAL-2", "source": "grid", "kwh": 512.1 },
  { "timestamp": "2026-08-18T01:00:00Z", "site": "DAL-2", "source": "solar", "kwh": 121.8 },
  { "timestamp": "2026-08-18T02:00:00Z", "site": "DAL-2", "source": "grid", "kwh": 476.9 }
]

Build the first chart

Keep the ATL-1 filter identical on both sides. One input lists timestamps; the other takes kWh readings from those same rows. If one side drops a row that the other keeps, every point after it shifts to the wrong time.

Add the title and units once the expected points appear. Those labels help a reader, but they cannot fix a broken timestamp-to-reading pair.

.[] | select(.site == "ATL-1" and .kwh != null) | .timestamp

.[] | select(.site == "ATL-1" and .kwh != null) | .kwh

Aggregate categories before plotting

Raw records rarely arrive as ready-made category totals. Transform them first, then chart the smaller result. The expression below groups readings by site and returns one explicit total per site.

This makes the chart contract visible: one label and one number for each category. It also gives you a compact result that can be checked before the bars are drawn.

map(select(.kwh != null))
| sort_by(.site)
| group_by(.site)
| map({
    site: .[0].site,
    total_kwh: (map(.kwh) | add)
  })
| sort_by(-.total_kwh)

• Follow the categorical bar and pie workflow

Check the chart against the source

Pick at least one point or category and trace it back to the JSON. Confirm the filter, units, order, and aggregation. A polished chart can still be wrong when one null was coerced, one category was counted twice, or timestamps and values were filtered differently.

Use the S&P 500 time-series guide for ordering and missing observations. Use the bar and pie guide for grouping, totals, and denominator checks.

Know what the chart does not prove

The chart visualizes the values returned by your expressions. It does not infer business meaning, repair an arbitrary JSON shape, certify the source, or turn the extension into a hosted online converter.

Line, area, bar, pie, and doughnut are the supported chart types covered here. This guide does not promise scatter plots, candlesticks, dashboards, live market feeds, or synchronized multi-chart analysis.