Generating Fake JSON Data for Charts and Dashboard Prototypes

Building a dashboard or data visualization before your backend analytics pipeline is ready? You need realistic-looking time series, categorical, and numeric data to populate charts during development. This guide shows how to generate that data and wire it into the most popular charting libraries.

What Makes Good Fake Chart Data

Chart data has different requirements than typical test data. A few things matter specifically for visualizations:

• Time ordering — time series data needs ascending timestamps, not random dates
• Realistic ranges — a revenue chart with values jumping from 5 to 50,000 randomly looks fake; gradual trends look real
• Reasonable categorical distribution — pie charts with 8 equal slices look artificial; real data usually has a dominant category or two
• Enough data points — line charts need at least 10–30 points to look like a meaningful trend, not a sparse scatter

Generating Time Series Data

For a revenue-over-time chart, configure a schema with a sequential date field and a numeric value:

[
  { "date": "2026-01-01", "revenue": 12400, "orders": 89 },
  { "date": "2026-01-02", "revenue": 13100, "orders": 94 },
  { "date": "2026-01-03", "revenue": 11800, "orders": 82 },
  { "date": "2026-01-04", "revenue": 15200, "orders": 103 },
  { "date": "2026-01-05", "revenue": 14600, "orders": 97 }
]

If you generate this with Dummy JSON Generator using random integers, you'll get values that jump around unrealistically. For a smoother, more realistic trend, generate the raw random values and post-process with a simple moving average in JavaScript:

// Smooth random data into a realistic-looking trend
function smoothSeries(rawValues, windowSize = 3) {
    return rawValues.map((_, i) => {
        const start = Math.max(0, i - windowSize);
        const window = rawValues.slice(start, i + 1);
        const avg = window.reduce((a, b) => a + b, 0) / window.length;
        return Math.round(avg);
    });
}

const raw = [12000, 8000, 15000, 9000, 18000, 11000, 16000];
const smooth = smoothSeries(raw);
// [12000, 10000, 11667, 10667, 14000, 12667, 15000] — much more realistic

Using Fake Data with Chart.js

import { Chart } from 'chart.js/auto';
import revenueData from './data/revenue.json';

new Chart(document.getElementById('revenueChart'), {
    type: 'line',
    data: {
        labels: revenueData.map(d => d.date),
        datasets: [{
            label: 'Daily Revenue',
            data: revenueData.map(d => d.revenue),
            borderColor: '#4ade80',
            tension: 0.3,
            fill: false,
        }]
    },
    options: {
        responsive: true,
        scales: { y: { beginAtZero: true } }
    }
});

Using Fake Data with Recharts (React)

import { LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid, ResponsiveContainer } from 'recharts';
import revenueData from './data/revenue.json';

function RevenueChart() {
    return (
        <ResponsiveContainer width="100%" height={300}>
            <LineChart data={revenueData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="date" />
                <YAxis />
                <Tooltip />
                <Line type="monotone" dataKey="revenue" stroke="#4ade80" strokeWidth={2} />
            </LineChart>
        </ResponsiveContainer>
    );
}

Using Fake Data with D3.js

import * as d3 from 'd3';
import revenueData from './data/revenue.json';

const parseDate = d3.timeParse('%Y-%m-%d');
const data = revenueData.map(d => ({
    date: parseDate(d.date),
    revenue: d.revenue
}));

const x = d3.scaleTime()
    .domain(d3.extent(data, d => d.date))
    .range([0, width]);

const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.revenue)])
    .range([height, 0]);

const line = d3.line()
    .x(d => x(d.date))
    .y(d => y(d.revenue));

svg.append('path')
    .datum(data)
    .attr('fill', 'none')
    .attr('stroke', '#4ade80')
    .attr('stroke-width', 2)
    .attr('d', line);

Schemas for Common Dashboard Chart Types

Tip: Generate Multiple Related Datasets

Real dashboards rarely have just one chart. Generate matching datasets for a full dashboard mockup:

data/
├── revenue-daily.json      ← line chart
├── sales-by-region.json    ← bar chart
├── traffic-sources.json    ← pie chart
├── activity-heatmap.json   ← heatmap
└── conversion-funnel.json  ← funnel chart

Generate each one separately at Dummy JSON Generator with the appropriate field combination, and your dashboard prototype will look fully populated and realistic for stakeholder review — before a single line of backend analytics code exists.