How to transpose json arrays for chart.js, d3, and plotly
- Step 1Export the data as a JSON array — Export your analytics data, database query results, or API response as a JSON array. Each object represents one data point (one bar, one line segment, one scatter point).
- Step 2Transpose the array — Paste the array and click Transpose. A dataset like [{"month":"Jan","sales":400,"cost":250},...] becomes {"month":["Jan",...],"sales":[400,...],"cost":[250,...]}.
- Step 3Assign columns to chart configuration — In Chart.js: labels: transposed.month, datasets: [{ label: 'Sales', data: transposed.sales }, { label: 'Cost', data: transposed.cost }]. The transposed column arrays slot directly into the datasets array.
- Step 4For D3.js, use column arrays as accessor input — D3 scales and line generators can use transposed column arrays directly: xScale.domain(transposed.month); lineGenerator.y(d => yScale(d)) where d is iterated from transposed.sales.
Frequently asked questions
Does Chart.js require column arrays or row objects?+
Chart.js 3+ accepts both formats. The classic format uses column arrays: labels: [...] and datasets[].data: [...]. Chart.js 4 also supports parsed datasets where data: is an array of {x, y} objects. For most chart types, column arrays are simpler to construct from transposed JSON.
How do I handle time series data with ISO date strings?+
Transpose as normal — the date column array will be ISO string values. In Chart.js, set the scale type to time and register the Chart.js time adapter (chartjs-adapter-date-fns or chartjs-adapter-luxon). The adapter parses ISO strings automatically.
Is the chart data transmitted to JAD Apps?+
No. Transposition runs entirely in your browser. Analytics data, business metrics, and series values are never transmitted to JAD Apps servers.
Privacy first
Conversion runs locally in your browser. No file is uploaded — only metadata counters are saved for signed-in dashboard stats.