var threads; var cpu; var ram; var swap; const api = "https://api.nolancasey.click/server" const colors = ["red", "green", "blue", "chartreuse", "darkmagenta", "darkkhaki", "purple", "salmon", "yellow", "blueviolet", "chocolate", "crimson", "cyan", "darkslategrey", "khaki", "hotpink"]; const resolution = 32; window.addEventListener("load", async function () { var json; try{ var response = await fetch(api); if (!response.ok){ throw new Error(response.status); } json = await response.json(); console.log(json); }catch (error){ console.log(error.message); } var labels = []; for (var i = 0; i < resolution; i++){ labels.push(""); } var datasets = []; { var data = [] for (var j = 0; j < resolution; j++) data.push(0); data[resolution - 1] = json["cpu0"] datasets.push( { label: "Total Utilization", data: data, borderColor: colors[0], fill: false, pointRadius: 0 } ) } cpu = new Chart("cpu",{ type: "line", data:{ labels: labels, datasets: datasets }, options:{ responsive: true, title:{ display: true, text: "Total Utilization", position: "top" }, animation:{ duration: 0 } } }); datasets = []; for (var i = 1; i < json["cpuCount"] + 1; i++){ var data = [] for (var j = 0; j < resolution; j++) data.push(0); data[resolution - 1] = json["cpu" + i] datasets.push( { label: "cpu" + i, data: data, borderColor: colors[i - 1], fill: false, pointRadius: 0 } ) } threads = new Chart("threads", { type: "line", data:{ labels: labels, datasets: datasets }, options:{ responsive: true, title:{ display: true, text: "Thread Utilization", position: "top" }, legend:{ position: "bottom" }, animation:{ duration: 0 } } }); var x = ["Used", "Free"] ram = new Chart("ram",{ type: "doughnut", data:{ labels: x, datasets:[ { data: [json["usedRam"], json["totalRam"] - json["usedRam"]], backgroundColor: ["darkred", "lightcoral"] } ] }, options:{ responsive: false, title:{ display: true, text: "RAM Usage", position: "top" }, animation:{ duration: 0 } } }); swap = new Chart("swap",{ type: "doughnut", labels: x, data:{ labels: x, datasets:[ { data: [json["usedSwap"], json["totalSwap"] - json["usedSwap"]], backgroundColor: ["darkgreen", "lawngreen"] } ] }, options:{ responsive: false, title:{ display: true, text: "Swap Usage", position: "top" }, animation:{ duration: 0 } } }); this.setInterval(increment, 1000); }); async function increment() { try{ var response = await fetch(api); if (!response.ok){ throw new Error(response.status); } var json = await response.json(); for (var i = 1; i < resolution; i++){ cpu.data.datasets[0].data[i - 1] = cpu.data.datasets[0].data[i]; } cpu.data.datasets[0].data[resolution - 1] = json["cpu0"]; cpu.update(); for (var i = 0; i < json["cpuCount"]; i++){ for (var j = 1; j < resolution; j++){ threads.data.datasets[i].data[j - 1] = threads.data.datasets[i].data[j]; } threads.data.datasets[i].data[resolution - 1] = json["cpu" + (i + 1)]; threads.update(); } threads.update(); ram.data.datasets[0].data[0] = json["usedRam"]; ram.data.datasets[0].data[1] = json["totalRam"] - json["usedRam"]; swap.data.datasets[0].data[0] = json["usedSwap"]; swap.data.datasets[0].data[1] = json["totalSwap"] - json["usedSwap"]; ram.update(); swap.update(); }catch (error){ console.log(error.message); } }