i'm not serving this anywhere. it's just in a html file i'm opening locally, and it uses ChartJS. I'm trying to create charts for each day of a given csv of data so i can complain to my ISP about their DOGSHIT service. for some reason only the last chart is rendering and i can't figure out why, there's nothing in the console. I'm not a frontend guy so could be something very obvious.
I have 4 days of data so there should be 4 charts. The actual amount of data is much much larger than the subset i have posted below; over 6000 datapoints per day
<!DOCTYPE HTML>
<html>
<head>
<script>
const rawData = `2025-02-18 23:56:50,23.228
2025-02-18 23:57:03,23.076
2025-02-18 23:57:16,23.560
2025-02-18 23:57:29,23.492
2025-02-18 23:57:42,23.383
2025-02-18 23:57:55,23.189
2025-02-18 23:58:08,23.389
2025-02-18 23:58:21,23.202
2025-02-18 23:58:34,23.518
2025-02-18 23:58:47,23.678
2025-02-18 23:59:00,23.547
2025-02-18 23:59:13,23.515
2025-02-18 23:59:26,29.981
2025-02-18 23:59:39,23.165
2025-02-18 23:59:52,23.381
2025-02-19 23:58:29,22.427
2025-02-19 23:58:42,22.433
2025-02-19 23:58:55,22.744
2025-02-19 23:59:08,22.538
2025-02-19 23:59:21,22.073
2025-02-19 23:59:34,22.527
2025-02-19 23:59:47,22.563
2025-02-20 23:58:26,22.615
2025-02-20 23:58:39,22.954
2025-02-20 23:58:52,22.570
2025-02-20 23:59:05,60.804
2025-02-20 23:59:18,22.928
2025-02-20 23:59:31,24.429
2025-02-20 23:59:44,23.066
2025-02-20 23:59:58,22.273
2025-02-21 13:44:19,81.440
2025-02-21 13:44:32,48.237
2025-02-21 13:44:45,47.153
2025-02-21 13:44:58,70.316
2025-02-21 13:45:11,58.714
2025-02-21 13:45:24,57.107
2025-02-21 13:45:37,39.298`
function lineToXY(line){
const lineArr = line.split(',')
return {
x: new Date(lineArr[0]),
y: Number(lineArr[1])
}
}
const parsedData = rawData.split('\n').map(line => lineToXY(line))
window.onload = async function () {
const distinctDays = [...new Set(parsedData.map( o => o.x.toISOString().split('T')[0]))]
const body = document.querySelector('body')
const charts = []
for(const distinctDay of distinctDays){
const chartName = `chartContainer${distinctDay.replace(/-/g, '')}`
const data = [{
type: 'line',
dataPoints: parsedData.filter( o => o.x.toISOString().includes(distinctDay))
}]
body.innerHTML += `<div id="${chartName}" style="height: 370px; width: 100%;">`
charts.push(new CanvasJS.Chart(chartName, {
animationEnabled: true,
zoomEnabled: true,
title:{
text: `average ping times for ${distinctDay}`
},
data: data
}));
}
charts.forEach(ch => ch.render())
}
</script>
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script></head>
<body>
</div>
</body>
</html>
it's up to whoever comes after trump to mend bridges with europe, it's a waste of diplomatic resources maintaining relations with trumps america