rutgerhofste/test.html

## test.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        canvas {
            margin-top: 30px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <canvas id="myChart" width="400" height="200"></canvas>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Static data for the chart
            const names = ['January', 'February', 'March', 'April', 'May'];
            const scores = [12, 19, 3, 5, 2];

            renderChart(names, scores);
        });

        function renderChart(labels, data) {
            const ctx = document.getElementById('myChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Sales',
                        data: data,
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Simple Chart</title>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<style>
	canvas {
	margin-top: 30px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	</style>
	</head>
	<body>
	<canvas id="myChart" width="400" height="200"></canvas>

	<script>
	document.addEventListener("DOMContentLoaded", function() {
	// Static data for the chart
	const names = ['January', 'February', 'March', 'April', 'May'];
	const scores = [12, 19, 3, 5, 2];

	renderChart(names, scores);
	});

	function renderChart(labels, data) {
	const ctx = document.getElementById('myChart').getContext('2d');
	new Chart(ctx, {
	type: 'bar',
	data: {
	labels: labels,
	datasets: [{
	label: 'Sales',
	data: data,
	backgroundColor: 'rgba(75, 192, 192, 0.2)',
	borderColor: 'rgba(75, 192, 192, 1)',
	borderWidth: 1
	}]
	},
	options: {
	scales: {
	y: {
	beginAtZero: true
	}
	}
	}
	});
	}
	</script>
	</body>
	</html>