Skip Navigation
Web Development @programming.dev
PrettyFlyForAFatGuy @feddit.uk
Solved

Why wont these charts render

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>

1 comments