import chart from 'chart.js' let graphIndexCounter = 0; let graphElements = document.querySelectorAll("jl-ntp-graph"); graphElements.forEach((elememt) => { let ip = elememt.getAttribute("data-server-ip"); elememt.innerHTML = ` ${ip} Server auf dem NTP Pool anzeigen `; let currentIndex = graphIndexCounter; graphIndexCounter++; let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function (){ if(xhr.status === 200 && xhr.readyState === 4){ let rawData = JSON.parse(this.responseText); let x = []; let yScore = []; let yDelay = []; rawData["history"].forEach((entry, index) => { let date = new Date(entry["ts"] * 1000).toLocaleDateString(); if(index % 10 !== 0){ date = ""; } x.push(date); yScore.push(entry["score"]); yDelay.push(entry["offset"]); }); drawPlot(currentIndex + "-Delay", x, yDelay, "Delay"); drawPlot(currentIndex + "-Score", x, yScore, "Score"); } } xhr.open("GET", "https://www.ntppool.org/scores/" + ip + "/json?monitor=*&limit=800"); xhr.send(); }); function drawPlot(elementName, x, y, title){ let ctx = document.getElementById(elementName).getContext('2d'); new Chart(ctx, { type: 'line', responsive: true, scaleShowVerticalLines: false, showTooltips: false, data: { labels: x, datasets: [{ label: title, data: y, borderColor: '#199a87', fill: false, radius: 0, }] }, }); }