Dynamic Charts (FileReader) Get Certified

Once you can draw a chart from data, the next step is making it dynamic: reading a CSV or JSON file with FileReader, parsing it, and redrawing the chart with the new values. This lesson shows clean, reusable patterns that work well in the live editor.

Parse CSV Text and Draw a Bar Chart

Dynamic charts follow three steps: read the file, parse its text into data, and draw the data. Keeping each step in its own function makes every one easy to test and reuse. On a real page, the file comes from input.files[0] and readFile() uses a real FileReader; here a stand-in file and reader (at the bottom of the example) keep it runnable in the editor.

What this code does: Reads a CSV file with a reader, parses its text into row objects and draws a bar chart of the revenue column. The three steps are three separate functions: readFile, parseCSV and drawBarChart. The text output shows the file name and size, how many rows were parsed and what the first row looks like (the revenue is still text at that point). The finished chart appears below the text output.

// 1) READ: get the text of a file
function readFile(file, onText, onError) {
    const reader = createMockFileReader(); // real page: new FileReader()
    reader.onload = () => onText(reader.result);
    reader.onerror = () => onError(reader.error);
    reader.readAsText(file);
}

// 2) PARSE: turn CSV text into an array of objects
function parseCSV(text) {
    const lines = text.trim().split("\n");
    const headers = lines[0].split(",");
    return lines.slice(1).map(row => {
        const values = row.split(",");
        const obj = {};
        headers.forEach((h, i) => obj[h.trim()] = values[i].trim());
        return obj;
    });
}

// 3) DRAW: turn the objects into a chart
function drawBarChart(data) {
    const canvas = document.createElement("canvas");
    canvas.width = 480;
    canvas.height = 280;
    const ctx = canvas.getContext("2d");

    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, 480, 280);

    const values = data.map(d => Number(d.revenue));
    const labels = data.map(d => d.month);
    const max = Math.max(...values);
    const barWidth = 50;
    const gap = 25;
    const startX = 40;
    const baseY = 230;

    values.forEach((val, i) => {
        const height = (val / max) * 180;
        const x = startX + i * (barWidth + gap);

        ctx.fillStyle = "#3b82f6";
        ctx.fillRect(x, baseY - height, barWidth, height);

        ctx.fillStyle = "#1e293b";
        ctx.font = "13px Arial";
        ctx.textAlign = "center";
        ctx.fillText(labels[i], x + barWidth / 2, baseY + 20);
        ctx.fillText(val, x + barWidth / 2, baseY - height - 8);
    });

    return canvas;
}

// A "file" the user might have chosen
const file = createMockFile("revenue.csv", `month,revenue
Jan,4200
Feb,5100
Mar,4800
Apr,6300
May,5900`, "text/csv");

readFile(file, (text) => {
    console.log("File read:", file.name, "(" + file.size + " bytes)");
    const data = parseCSV(text);
    console.log("Parsed", data.length, "rows from CSV");
    console.log("First row:", data[0]);
    const chart = drawBarChart(data);
    console.log("Bar chart created from CSV data");
    showCanvas("Revenue chart built from " + file.name, chart);
}, (error) => {
    console.log("Could not read the file:", error.message);
});

// ===== Helpers below are not part of the lesson =====
function showCanvas(label, source) {
    const copy = document.createElement("canvas");
    copy.width = source.width;
    copy.height = source.height;
    copy.getContext("2d").drawImage(source, 0, 0);
    copy.style.maxWidth = "100%";
    setTimeout(() => {
        const box = document.createElement("div");
        box.className = "demo-canvas-box";
        box.innerHTML = "<p class='demo-canvas-label'>" + label + "</p>";
        box.appendChild(copy);
        document.getElementById("previewContent").appendChild(box);
    }, 0);
}

function createMockFile(name, content, type) {
    return {
        name: name,
        size: content.length,
        type: type || "text/plain",
        _content: content
    };
}

function createMockFileReader() {
    const reader = {
        result: null,
        error: null,
        onload: null,
        onerror: null,
        readAsText(file) {
            if (!file || file._unreadable) {
                reader.error = new Error("The file could not be read");
                if (reader.onerror) reader.onerror({ target: reader });
                return;
            }
            reader.result = file._content;
            if (reader.onload) reader.onload({ target: reader });
        }
    };

    return reader;
}

readFile wraps reading a file in one reusable function. It receives the file and two callbacks: onText (what to do with the text) and onError (what to do if reading fails). Inside, it creates the reader (new FileReader() on a real page).

When the read succeeds, onload runs and passes reader.result (the file’s text) to onText. If it fails, onerror runs and passes reader.error to onError. These must be set before the read starts.

readAsText(file) starts reading the file as text. The result arrives through the handlers above, never as a return value, so everything that depends on the file’s content has to happen inside the onText callback.

trim() removes blank lines at the start and end, and split(“\n”) cuts the text into an array with one item per line. Line 0 is the header and the rest are data rows.

The first line is split at commas to get the column names, for example [“month”, “revenue”]. These become the property names of each row object.

slice(1) skips the header line and map() converts each remaining row into an object. The row is split at commas, and for each header the matching value is stored under that name, so “Jan,4200” becomes { month: “Jan”, revenue: “4200” }. trim() removes stray spaces. Note that CSV values are always text, which is why numbers have to be converted with Number() before drawing.

Each row object is returned, so parseCSV gives back an array of row objects. The closing brace ends the function.

Creates an in-memory canvas of the chart’s size and gets its 2D context. Because the function creates its own canvas and returns it, the caller decides what to do with it: show it, save it, or replace an older chart.

Paints the canvas white so the chart is readable on any page colour and looks right if exported.

map() pulls one column out of the objects: the revenue as numbers (Number() converts the text “4200” to 4200) and the month names as labels. max is the largest value, used for scaling. barWidth, gap, startX and baseY control the spacing and the baseline position.

(val / max) * 180 scales each value so the largest (6300) becomes 180 pixels tall and the others are proportional. Bar i starts at x = startX + i * (barWidth + gap). Because the scale comes from the data, the chart adapts when new data arrives.

A blue rectangle whose bottom edge sits on the baseline: its top is baseY – height, so it grows upward.

textAlign = “center” centres the text on the x position. The month name goes 20 pixels below the baseline and the value goes 8 pixels above the bar.

The function returns the finished canvas instead of showing it. The closing brace ends drawBarChart.

createMockFile(name, content, type) makes a stand-in for a chosen file. The backtick string can span several lines, and each line is one CSV row: the header first, then five data rows. file.size is the number of characters in the text.

Calls readFile with the file and the two callbacks. The first callback receives the text. It first prints the file name and size.

parseCSV turns the text into 5 row objects. Printing data[0] shows { month: “Jan”, revenue: “4200” }: the revenue is a string until drawBarChart converts it.

Draws the chart from the parsed data and displays it below the text output.

The second callback runs if the file cannot be read. Here it just prints the reason; the next examples show how to show the user a clear message.

Everything below this comment is support code: showCanvas() displays the charts in the output, and stand-ins for File and FileReader let the example run without a file picker. The lesson itself is the code above.

Not part of the lesson; it only makes the chart visible. showCanvas(label, source) creates a new canvas of the same size and copies the finished chart into it with drawImage(). Your chart canvas is created in memory and never added to the page, so a visible copy is needed. Calling it once per chart is what lets you see several charts, one after the other.

setTimeout(…, 0) waits until the text output has been printed, so the chart appears below it. A div with the class demo-canvas-box holds a caption and the canvas copy and is added to the Console Output area (id previewContent). The demo- prefix keeps this class away from the tutorial page’s own styles.

On a real page the browser gives you a File object when the user picks a file in an input. It has a name, a size in bytes and a type. This mock has the same three properties, and _content holds the text so the mock reader has something to read.

createMockFileReader() imitates new FileReader() so the lesson runs without a file picker. It has the same members: result (the text after a successful read), error, and the handler slots onload and onerror.

If there is no file, or the file is flagged _unreadable (a way to simulate a deleted or locked file), it stores an Error in reader.error, calls onerror and stops.

Stores the file’s text in reader.result and calls onload. A real FileReader does this later (asynchronously); the mock does it immediately so the text output can be captured. Either way, handlers must be attached before readAsText() is called.

Closes the function and hands the reader to the caller.

JSON Data to Pie Chart

JSON is easier than CSV: JSON.parse() turns the text straight into arrays and objects, with real numbers and no manual splitting.

What this code does: Reads a JSON file containing a budget breakdown, parses it with JSON.parse() and draws a pie chart with a legend. The text output lists each category and its value. The numbers in the JSON stay numbers, so no conversion is needed, unlike the CSV example. The chart appears below the text output.

// 1) READ: get the text of a file
function readFile(file, onText, onError) {
    const reader = createMockFileReader(); // real page: new FileReader()
    reader.onload = () => onText(reader.result);
    reader.onerror = () => onError(reader.error);
    reader.readAsText(file);
}

function drawPieChart(slices) {
    const canvas = document.createElement("canvas");
    canvas.width = 460;
    canvas.height = 300;
    const ctx = canvas.getContext("2d");

    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, 460, 300);

    const total = slices.reduce((sum, s) => sum + s.value, 0);
    let startAngle = -Math.PI / 2;
    const cx = 130, cy = 150, radius = 100;

    slices.forEach((slice, i) => {
        const angle = (slice.value / total) * Math.PI * 2;

        // Wedge
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.arc(cx, cy, radius, startAngle, startAngle + angle);
        ctx.closePath();
        ctx.fillStyle = slice.color;
        ctx.fill();
        ctx.strokeStyle = "#ffffff";
        ctx.lineWidth = 2;
        ctx.stroke();

        // Legend entry
        ctx.fillStyle = slice.color;
        ctx.fillRect(270, 90 + i * 30, 16, 16);
        ctx.fillStyle = "#1e293b";
        ctx.font = "14px Arial";
        ctx.textAlign = "left";
        ctx.fillText(slice.label + " (" + Math.round(slice.value / total * 100) + "%)", 294, 103 + i * 30);

        startAngle += angle;
    });

    return canvas;
}

const budget = [
    { label: "Marketing", value: 35, color: "#3b82f6" },
    { label: "Engineering", value: 40, color: "#f97316" },
    { label: "Support", value: 15, color: "#22c55e" },
    { label: "Other", value: 10, color: "#a855f7" }
];

// Turn the array into JSON text, like the content of a saved .json file
const file = createMockFile("budget.json", JSON.stringify(budget), "application/json");

readFile(file, (text) => {
    const data = JSON.parse(text);
    console.log("Parsed JSON with", data.length, "categories");
    data.forEach(item => console.log(item.label + ": " + item.value));
    const chart = drawPieChart(data);
    console.log("Pie chart drawn from JSON data");
    showCanvas("Budget breakdown from " + file.name, chart);
}, (error) => {
    console.log("Could not read the file:", error.message);
});

// ===== Helpers below are not part of the lesson =====
function showCanvas(label, source) {
    const copy = document.createElement("canvas");
    copy.width = source.width;
    copy.height = source.height;
    copy.getContext("2d").drawImage(source, 0, 0);
    copy.style.maxWidth = "100%";
    setTimeout(() => {
        const box = document.createElement("div");
        box.className = "demo-canvas-box";
        box.innerHTML = "<p class='demo-canvas-label'>" + label + "</p>";
        box.appendChild(copy);
        document.getElementById("previewContent").appendChild(box);
    }, 0);
}

function createMockFile(name, content, type) {
    return {
        name: name,
        size: content.length,
        type: type || "text/plain",
        _content: content
    };
}

function createMockFileReader() {
    const reader = {
        result: null,
        error: null,
        onload: null,
        onerror: null,
        readAsText(file) {
            if (!file || file._unreadable) {
                reader.error = new Error("The file could not be read");
                if (reader.onerror) reader.onerror({ target: reader });
                return;
            }
            reader.result = file._content;
            if (reader.onload) reader.onload({ target: reader });
        }
    };

    return reader;
}

When the read succeeds, onload runs and passes reader.result (the file’s text) to onText. If it fails, onerror runs and passes reader.error to onError. These must be set before the read starts.

Paints the canvas white so the chart is readable on any page colour and looks right if exported.

reduce adds the values to get the total (35 + 40 + 15 + 10 = 100). Canvas angles start at 3 o’clock and increase clockwise, so -Math.PI / 2 starts the first slice at 12 o’clock.

The centre (130, 150) and the radius (100), declared together on one line. The pie is on the left so the legend fits on the right.

angle is the slice’s share of the full circle: (value / total) x 2 x pi. Marketing’s 35 out of 100 is 126 degrees.

moveTo goes to the centre, arc draws the curved edge from startAngle to startAngle + angle, and closePath draws the straight line back. fill() paints the wedge in the slice’s colour.

A thin white outline separates neighbouring slices.

A colour square and the label with its percentage, calculated from the data: Math.round(value / total * 100). i * 30 moves each entry down by 30 pixels. Without a legend, the colours would mean nothing to the reader.

The next slice starts where this one ended, so the slices fit together without gaps.

The function returns the finished canvas.

The budget as an array of objects. Each has a label, a value and a colour. The colour is stored with the data, so the data file decides how the chart looks.

JSON.stringify(budget) converts the array to JSON text, which is what a saved .json file contains. createMockFile wraps that text in a file-like object.

Starts the read. When the text arrives, JSON.parse(text) rebuilds the array of objects, with numbers as numbers, in a single step.

Prints how many categories were parsed, then one line per category with its value.

Draws the pie chart from the parsed data and displays it below the text output.

Runs if the file cannot be read.

If there is no file, or the file is flagged _unreadable (a way to simulate a deleted or locked file), it stores an Error in reader.error, calls onerror and stops.

Closes the function and hands the reader to the caller.

Updating the Same Chart with New Data

A chart does not need special ‘update’ code: call the same draw function again with new data and use the new canvas in place of the old one. Real dashboards do exactly this every time a new file or data set arrives.

What this code does: Draws a bar chart of Week 1 sales, then calls the same function again with Week 2 data, and shows both charts so you can compare before and after. Both charts use a fixed scale of 100 (the optional third argument), so a bar of the same height means the same value in both pictures. Without it, each chart would stretch its own tallest bar to the full height and compare misleadingly. The text output shows the weekly totals and the change.

function drawBarChart(data, title, maxValue) {
    const canvas = document.createElement("canvas");
    canvas.width = 480;
    canvas.height = 280;
    const ctx = canvas.getContext("2d");

    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, 480, 280);

    const values = data.map(d => d.value);
    const labels = data.map(d => d.label);
    const max = maxValue || Math.max(...values);
    const barWidth = 45;
    const gap = 20;
    const startX = 40;
    const baseY = 220;

    // Title
    ctx.fillStyle = "#1e293b";
    ctx.font = "bold 16px Arial";
    ctx.textAlign = "center";
    ctx.fillText(title, 240, 25);

    values.forEach((val, i) => {
        const height = (val / max) * 160;
        const x = startX + i * (barWidth + gap);

        ctx.fillStyle = "#0ea5e9";
        ctx.fillRect(x, baseY - height, barWidth, height);

        ctx.fillStyle = "#334155";
        ctx.font = "12px Arial";
        ctx.textAlign = "center";
        ctx.fillText(labels[i], x + barWidth / 2, baseY + 18);
        ctx.fillText(val, x + barWidth / 2, baseY - height - 6);
    });

    return canvas;
}

function total(data) {
    return data.reduce((sum, d) => sum + d.value, 0);
}

// First dataset
const week1 = [
    { label: "Mon", value: 40 },
    { label: "Tue", value: 65 },
    { label: "Wed", value: 50 },
    { label: "Thu", value: 80 },
    { label: "Fri", value: 55 }
];

console.log("Drawing chart with Week 1 data...");
const chart1 = drawBarChart(week1, "Week 1 Sales", 100);
showCanvas("Before: Week 1 data", chart1);

// Simulate new data arriving
const week2 = [
    { label: "Mon", value: 55 },
    { label: "Tue", value: 70 },
    { label: "Wed", value: 60 },
    { label: "Thu", value: 90 },
    { label: "Fri", value: 75 }
];

console.log("Updating chart with Week 2 data...");
const chart2 = drawBarChart(week2, "Week 2 Sales", 100);
showCanvas("After: Week 2 data (same function, new data)", chart2);

console.log("Week 1 total:", total(week1));
console.log("Week 2 total:", total(week2));
const change = total(week2) - total(week1);
console.log("Change:", "+" + change, "(" + (change / total(week1) * 100).toFixed(1) + "%)");
console.log("Same function, new data → updated chart");

// ===== Helpers below are not part of the lesson =====
function showCanvas(label, source) {
    const copy = document.createElement("canvas");
    copy.width = source.width;
    copy.height = source.height;
    copy.getContext("2d").drawImage(source, 0, 0);
    copy.style.maxWidth = "100%";
    setTimeout(() => {
        const box = document.createElement("div");
        box.className = "demo-canvas-box";
        box.innerHTML = "<p class='demo-canvas-label'>" + label + "</p>";
        box.appendChild(copy);
        document.getElementById("previewContent").appendChild(box);
    }, 0);
}

Paints the canvas white so the chart is readable on any page colour and looks right if exported.

values and labels are pulled out of the data objects. max is the value that fills the full bar height: if a maxValue is passed in, it is used; otherwise (the || operator) the largest value in the data is used. A fixed maxValue keeps the scale the same from one chart to the next.

A bold, centred title at the top of the canvas. Passing the title in as a parameter lets the same function label each version of the chart.

(val / max) * 160 converts each value to a height in pixels; with max = 100, a value of 80 is 128 pixels. x moves right for every bar.

A blue rectangle standing on the baseline: its top is at baseY – height.

The day name below the baseline and the value above the bar, both centred on the bar.

Returns the new canvas. Because each call makes a new canvas, the old chart is unchanged and can still be shown for comparison.

Adds up the value of every row. It is used to compare the two weeks.

Five days of sales as objects with a label and a value.

Draws and shows the first chart, with a fixed scale of 100.

A second dataset with the same shape, as if a new file had been loaded.

The same function, called with new data, produces the updated chart. Both charts are now visible: the Thursday bar grew from 80 to 90.

Week 1 totals 290 and Week 2 totals 350, a change of +60, which is 60 / 290 = 20.7%. The last line repeats the key idea: one draw function, new data, updated chart.

Everything below this comment is support code: showCanvas() displays the charts in the output. The lesson itself is the code above.

Handling Bad or Empty Files

Users upload empty files, files with only a header, and files that cannot be read at all. Good code checks for these cases and shows a clear message instead of a broken chart.

What this code does: Tests four files: a valid CSV, an empty file, a file that has a header but no data, and a file that cannot be read (like one deleted after it was chosen). Failures to parse are caught with try/catch, and failures to read are handled in onerror. For every file the text output explains what happened, and a coloured panel below it shows what the user would see: green for success and red for a clear fallback message.

function parseCSV(text) {
    const lines = text.trim().split("\n").filter(line => line.trim() !== "");
    if (lines.length < 2) {
        throw new Error("CSV has no data rows");
    }
    const headers = lines[0].split(",");
    return lines.slice(1).map(row => {
        const values = row.split(",");
        const obj = {};
        headers.forEach((h, i) => obj[h.trim()] = values[i] ? values[i].trim() : "");
        return obj;
    });
}

function drawPanel(message, ok) {
    const canvas = document.createElement("canvas");
    canvas.width = 420;
    canvas.height = 70;
    const ctx = canvas.getContext("2d");

    ctx.fillStyle = ok ? "#dcfce7" : "#fee2e2";
    ctx.fillRect(0, 0, 420, 70);
    ctx.strokeStyle = ok ? "#16a34a" : "#dc2626";
    ctx.lineWidth = 3;
    ctx.strokeRect(1.5, 1.5, 417, 67);

    ctx.fillStyle = ok ? "#166534" : "#991b1b";
    ctx.font = "bold 16px Arial";
    ctx.textAlign = "center";
    ctx.fillText((ok ? "✔ " : "✖ ") + message, 210, 41);

    return canvas;
}

function safeDraw(file) {
    const reader = createMockFileReader();

    reader.onload = () => {
        try {
            const data = parseCSV(reader.result);
            console.log(file.name + ": parsed", data.length, "rows");
            showCanvas(file.name, drawPanel("Loaded " + data.length + " rows", true));
        } catch (err) {
            console.log(file.name + ": could not process file -", err.message);
            console.log("Showing a fallback message instead of a broken chart.");
            showCanvas(file.name, drawPanel(err.message, false));
        }
    };

    reader.onerror = () => {
        console.log(file.name + ": could not read the file -", reader.error.message);
        showCanvas(file.name, drawPanel(reader.error.message, false));
    };

    reader.readAsText(file);
}

safeDraw(createMockFile("good.csv", "month,sales\nJan,100\nFeb,150"));
safeDraw(createMockFile("empty.csv", ""));
safeDraw(createMockFile("header-only.csv", "month,sales"));

const locked = createMockFile("locked.csv", "month,sales\nJan,100");
locked._unreadable = true; // simulates a file deleted or locked after it was chosen
safeDraw(locked);

// ===== Helpers below are not part of the lesson =====
function showCanvas(label, source) {
    const copy = document.createElement("canvas");
    copy.width = source.width;
    copy.height = source.height;
    copy.getContext("2d").drawImage(source, 0, 0);
    copy.style.maxWidth = "100%";
    setTimeout(() => {
        const box = document.createElement("div");
        box.className = "demo-canvas-box";
        box.innerHTML = "<p class='demo-canvas-label'>" + label + "</p>";
        box.appendChild(copy);
        document.getElementById("previewContent").appendChild(box);
    }, 0);
}

function createMockFile(name, content, type) {
    return {
        name: name,
        size: content.length,
        type: type || "text/plain",
        _content: content
    };
}

function createMockFileReader() {
    const reader = {
        result: null,
        error: null,
        onload: null,
        onerror: null,
        readAsText(file) {
            if (!file || file._unreadable) {
                reader.error = new Error("The file could not be read");
                if (reader.onerror) reader.onerror({ target: reader });
                return;
            }
            reader.result = file._content;
            if (reader.onload) reader.onload({ target: reader });
        }
    };

    return reader;
}

Splits the text into lines and filter() removes any line that is empty or only spaces, so stray blank lines at the end of a file do not count as data.

A CSV needs at least two lines: a header and one data row. If there are fewer, the function throws an Error with a clear message instead of returning an empty or broken result. For an empty file, lines has 0 items; for a header-only file, it has 1.

The same conversion as before, with one safety improvement: values[i] ? values[i].trim() : “” avoids an error when a row has fewer values than the header has columns.

A small canvas, 420 x 70, that will show a message to the user.

The condition ? a : b operator picks colours: light green with a green border for success, light red with a red border for failure. strokeRect(1.5, 1.5, 417, 67) draws the border inside the canvas edge, because a 3-pixel line is centred on its path.

Dark green or dark red text, centred horizontally at x = 210, with a tick or a cross in front. The result is something a user can understand at a glance.

Returns the finished panel.

safeDraw handles one file from start to finish, including everything that can go wrong. Each file gets its own reader.

onload runs when the file has been read. Parsing is placed inside try: if parseCSV throws, the code jumps to the catch block instead of crashing the page.

Reached only if parseCSV succeeded: prints the number of rows and shows a green panel. A real page would draw the chart here.

Runs when parseCSV throws. err.message is the message from the Error, for example “CSV has no data rows”. The code prints it and shows a red panel with the same message.

A different kind of failure: the file could not be read at all. This is handled by onerror, not by try/catch, because the real read happens later and any problem is reported through this event. reader.error.message explains what went wrong.

Both handlers are in place, so reading can begin. The closing brace ends safeDraw.

A valid CSV (2 rows), an empty file and a header-only file. “\n” inside a normal string is a line break. The first shows a green panel, the other two red panels with the message “CSV has no data rows”.

A valid file, but flagged as unreadable (a way to simulate a file deleted or locked after the user chose it). It goes through onerror and shows a red panel with the read error.

If there is no file, or the file is flagged _unreadable (a way to simulate a deleted or locked file), it stores an Error in reader.error, calls onerror and stops.

Closes the function and hands the reader to the caller.

Practice: Multi-Week Dashboard

The payoff of separating read, parse and draw: loading a different file is just another call to the same three functions.

What this code does: Simulates a user loading two different CSV files, a 4-week file and then an updated 6-week file. loadAndDraw() reads each one, parses it, prints the number of weeks and the total sales, and draws a chart with the same draw function. The output shows both charts, with more bars in the second one. Here each chart scales to its own tallest bar; the previous example used a fixed scale instead, which is better when charts will be compared. Try adding a third file.

// 1) READ: get the text of a file
function readFile(file, onText, onError) {
    const reader = createMockFileReader(); // real page: new FileReader()
    reader.onload = () => onText(reader.result);
    reader.onerror = () => onError(reader.error);
    reader.readAsText(file);
}

function parseCSV(text) {
    const [header, ...rows] = text.trim().split("\n");
    const keys = header.split(",");
    return rows.map(row => {
        const vals = row.split(",");
        const obj = {};
        keys.forEach((k, i) => obj[k] = vals[i]);
        return obj;
    });
}

function drawBarChart(data, caption) {
    const canvas = document.createElement("canvas");
    canvas.width = 500;
    canvas.height = 280;
    const ctx = canvas.getContext("2d");

    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, 500, 280);

    const values = data.map(d => Number(d.sales));
    const labels = data.map(d => d.week);
    const max = Math.max(...values);
    const barW = 55;
    const gap = 18;
    const startX = 40;
    const baseY = 220;

    ctx.fillStyle = "#0f172a";
    ctx.font = "bold 15px Arial";
    ctx.textAlign = "center";
    ctx.fillText(caption, 250, 22);

    values.forEach((v, i) => {
        const h = (v / max) * 160;
        const x = startX + i * (barW + gap);

        ctx.fillStyle = "#16a34a";
        ctx.fillRect(x, baseY - h, barW, h);

        ctx.fillStyle = "#1e293b";
        ctx.font = "12px Arial";
        ctx.textAlign = "center";
        ctx.fillText(labels[i], x + barW / 2, baseY + 18);
        ctx.fillText(v, x + barW / 2, baseY - h - 6);
    });

    return canvas;
}

function loadAndDraw(file, caption) {
    readFile(file, (text) => {
        const data = parseCSV(text);
        const total = data.reduce((sum, row) => sum + Number(row.sales), 0);
        console.log(file.name + ": " + data.length + " weeks, total sales " + total);
        showCanvas(caption, drawBarChart(data, caption));
    }, (error) => {
        console.log("Error:", error.message);
    });
}

// First upload
const file1 = createMockFile("sales-4-weeks.csv", `week,sales
W1,120
W2,150
W3,90
W4,200`, "text/csv");

// Second upload (more data)
const file2 = createMockFile("sales-6-weeks.csv", `week,sales
W1,120
W2,150
W3,90
W4,200
W5,175
W6,230`, "text/csv");

console.log("Loading first file (4 weeks)...");
loadAndDraw(file1, "Sales Dashboard – 4 Weeks");

console.log("Loading updated file (6 weeks)...");
loadAndDraw(file2, "Sales Dashboard – 6 Weeks");

console.log("Chart updated with new data using the same draw function");

// ===== Helpers below are not part of the lesson =====
function showCanvas(label, source) {
    const copy = document.createElement("canvas");
    copy.width = source.width;
    copy.height = source.height;
    copy.getContext("2d").drawImage(source, 0, 0);
    copy.style.maxWidth = "100%";
    setTimeout(() => {
        const box = document.createElement("div");
        box.className = "demo-canvas-box";
        box.innerHTML = "<p class='demo-canvas-label'>" + label + "</p>";
        box.appendChild(copy);
        document.getElementById("previewContent").appendChild(box);
    }, 0);
}

function createMockFile(name, content, type) {
    return {
        name: name,
        size: content.length,
        type: type || "text/plain",
        _content: content
    };
}

function createMockFileReader() {
    const reader = {
        result: null,
        error: null,
        onload: null,
        onerror: null,
        readAsText(file) {
            if (!file || file._unreadable) {
                reader.error = new Error("The file could not be read");
                if (reader.onerror) reader.onerror({ target: reader });
                return;
            }
            reader.result = file._content;
            if (reader.onload) reader.onload({ target: reader });
        }
    };

    return reader;
}

When the read succeeds, onload runs and passes reader.result (the file’s text) to onText. If it fails, onerror runs and passes reader.error to onError. These must be set before the read starts.

Destructuring does two jobs at once: [header, …rows] puts the first line in header and all the remaining lines in the array rows. keys are the column names (week and sales).

Each row is split at commas and stored under the matching column name, so “W1,120” becomes { week: “W1”, sales: “120” }. This shorter version does not trim spaces, which is fine for clean files; the previous examples show a more careful one.

Returns the array of row objects.

Paints the canvas white so the chart is readable on any page colour and looks right if exported.

The sales are converted from text to numbers and the week names become labels. max is the largest value in this file, so the tallest bar always fills the available height whatever the file contains.

A bold centred caption at the top says which file the chart shows.

(v / max) * 160 scales each value to pixels. Bar i starts at startX + i * (barW + gap); the six bars of the second file still fit in the 500-pixel canvas.

A green bar standing on the baseline.

The week name under the bar and the sales value above it.

Returns the finished canvas.

loadAndDraw is the whole pipeline for one file. It starts with the read step.

Inside the callback, parse the text and add up the sales: reduce adds Number(row.sales) for every row (Number is needed because CSV values are text).

Prints the file name, the number of weeks and the total, then draws the chart and shows it. The first file has 560 in total and the second 965.

If reading fails, print the reason. The closing brace ends loadAndDraw.

A 4-week CSV file. The backtick string spans several lines; each line is a row.

The updated file with two more weeks.

One call runs read, parse and draw for the first file.

The same call with the new file gives the updated chart. Nothing in the drawing code had to change.

Confirms that one pipeline handled both files.

If there is no file, or the file is flagged _unreadable (a way to simulate a deleted or locked file), it stores an Error in reader.error, calls onerror and stops.

Closes the function and hands the reader to the caller.

Quick Summary

Separate read → parse → draw into different functions.
The same draw function can be called again with new data to “update” the chart.
Use a fixed scale when charts will be compared, and an automatic scale when each file stands alone.
Always validate parsed data and handle empty, bad or unreadable files gracefully.
CSV needs manual splitting and its values are text; JSON only needs JSON.parse().

Tip: Click “Test My Code” and compare the numbers in the text output with the charts below it. Change a value in the data, run it again, and watch the chart change.

🧪 Test Your JavaScript Code

Edit the code on the left and click “Run Code” to see the console output on the right.

📝 JavaScript Code

👁 Console Output

Click “Run Code” to see the output here.

Ctrl + Enter to run code Esc to close