PHP和Chart.js创建自动定时刷新动态CPU性能监控图

最新推荐文章于 2021-03-26 01:00:10 发布

allway2

最新推荐文章于 2021-03-26 01:00:10 发布

阅读量533

点赞数

本文链接：https://blog.csdn.net/allway2/article/details/109513650

版权

poll_cpu_usage.php

<?php
	$prevVal = shell_exec("cat /proc/stat");
	$prevArr = explode(' ',trim($prevVal));
	$prevTotal = $prevArr[2] + $prevArr[3] + $prevArr[4] + $prevArr[5];
	$prevIdle = $prevArr[5];
	usleep(0.15 * 1000000);
	$val = shell_exec("cat /proc/stat");
	$arr = explode(' ', trim($val));
	$total = $arr[2] + $arr[3] + $arr[4] + $arr[5];
	$idle = $arr[5];
	$intervalTotal = intval($total - $prevTotal);
	$result = intval(100 * (($intervalTotal - ($idle - $prevIdle)) / $intervalTotal));
	echo $result;
	return $result;
?>

index.html

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>CPU Chart</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/Chart.min.js"></script>
</head>

<body>

    <div class="chart-container">
        <canvas id="myChart"></canvas>
        <div class="stats-container">
                <p>requestsStats:
                    <span class="requestsStats">0</span>
                </p>
                <p>errorsPercent: 
                    <span class="errorsPercent">0%</span>
                </p>
            </div>
    </div>
    <script src="main.js"></script>
</body>

</html>

main.js

const requestsStats = document.querySelector('.requestsStats');
const errorsPercent = document.querySelector('.errorsPercent');
let requestsCounter = 1;
let errorsCounter = 0;

// get CPU data from JSON 
function getCpuData () {
    fetch('poll_cpu_usage.php')
    .then(response => {
        let data = response.json();
        return data;
    })
    .then(data => {
        if (data === 0) { errorsCounter++; }
        addData(data);
    })
    .catch(error =>  console.error(error));

    // stats
    let percent = Math.floor(100 * errorsCounter / requestsCounter);
    requestsStats.innerHTML = requestsCounter++;
    errorsPercent.innerHTML = `${percent}%`;
};

// work with chart.js library
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'CPU usage %',
            backgroundColor: ['rgba(76, 209, 55, 0.2)'],
            borderColor: 'lightgreen',
            borderWidth: 1
        }],
    }, options: {
        title: {
            display: true,
            text: 'CPU Monitor'
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    min: 0,
                    max: 100,
                }
            }],
            xAxes: [{
                display: true
            }],
        },
    },
});

function formatDate(time){
	var date = new Date(time);

	var year = date.getFullYear(),
		month = date.getMonth() + 1,//月份是从0开始的
		day = date.getDate(),
		hour = date.getHours(),
		min = date.getMinutes(),
		sec = date.getSeconds();
	var newTime = year + '-' +
				month + '-' +
				day + ' ' +
				hour + ':' +
				min + ':' +
				sec;
	return newTime;			
}

// update myChart
function addData(data) {
    if (myChart.data.labels.length>10){
    	myChart.data.labels.shift();		
    }
    myChart.data.labels.push(formatDate(new Date().getTime()));
    myChart.data.datasets.forEach((dataset) => {
        if(data === 0) {
            dataset.data.push(dataset.data[dataset.data.length - 1]);
        } else {
        		if (dataset.data.length>10){
        			dataset.data.shift();         	
            }
            dataset.data.push(data);
        };
    });
    myChart.update();
};

setInterval(getCpuData, 5000);

style.css

*, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 800px;
    margin: 15px;
}

.stats-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 350px;
}

allway2

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
PHP和Chart.js创建自动定时刷新动态CPU性能监控图

poll_cpu_usage.php<?php $prevVal = shell_exec("cat /proc/stat"); $prevArr = explode(' ',trim($prevVal)); $prevTotal = $prevArr[2] + $prevArr[3] + $prevArr[4] + $prevArr[5]; $prevIdle = $prevArr[5]; usleep(0.15 * 1000000); $val = shell_exec("cat
复制链接

扫一扫