File content as of revision 17:590d234a7ae6:

Chart.defaults.global.defaultFontFamily = "triplicate, Courier, 'Courier New', monospace";
Chart.defaults.global.defaultFontSize = 15;
Chart.defaults.global.defaultFontColor = "#efefef";
Chart.defaults.global.legend.display = false;
Chart.defaults.global.elements.line.backgroundColor = "rgba(75, 192, 192, 0.1)";
Chart.defaults.global.elements.line.borderColor = "rgba(75, 192, 192, 1)";

class Charts {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
    }

    addChart(chart) {
        const chartContainer = document.createElement("div");
        chartContainer.classList.add('chart');

        const title = document.createElement("h2");
        title.innerHTML = chart.getName();
        title.classList.add('chart__title');

        chartContainer.appendChild(title);
        chartContainer.appendChild(chart.getCanvas());

        this.container.appendChild(chartContainer);
    }
}

class SensorChart {
    constructor(name) {
        this.canvas = document.createElement("canvas");
        this.canvas.height = "70";
        this.name = name;
    }

    getCanvas() {
        return this.canvas;
    }

    getName() {
        return this.name;
    }

    render() {
        throw Error("Not implemented");
    }
}

class NumberChart extends SensorChart {
    render() {
        this.chart = new Chart(this.canvas, {
            type: 'line',
            data: {
                labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
                datasets: [
                    {
                        label: this.name,
                        data: [12, 13, 90, 87, 15, 20, 19, 20, 14, 21]
                    }
                ]
            }
        });
    }
}

class BoolChart extends SensorChart {
    render() {
        this.chart = new Chart(this.canvas, {
            type: 'line',
            data: {
                labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
                datasets: [
                    {
                        label: this.name,
                        data: [true, false, false, true, true, false, true, false, false, true],
                        steppedLine: true
                    }
                ]
            }
        });
    }
}

const sensorCharts = new Charts("charts");
const numberChart = new NumberChart("Number");
const boolChart = new BoolChart("Bool");
sensorCharts.addChart(numberChart);
sensorCharts.addChart(boolChart);
numberChart.render();
boolChart.render();