<html>
<head>
<title>Ajax Test</title>
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/series-label.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script type="text/javascript" language="javascript">
i=0
v1=new Array()
v2=new Array()
v3=new Array()
v4=new Array()
v5=new Array()
function update(id) {
$.getJSON("/data/" + id + "/",function(data) {
$.each(data, function(){
v1[i]=this.zhan;
v2[i]=this.cpu;
v3[i]=this.up;
v4[i]=this.down;
v5[i]=this.time;
i++;
var chart = Highcharts.chart('container1', {
title: {
text: '系统资源使用'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
xAxis: {
categories: v5
},
yAxis: {
title: {
text: '占比'
},
labels: {
formatter: function () {
return this.value + '%';
}
}
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
}
},
series: [{
name: 'cpu',
data: v2
}, {
name: '内存占用',
data: v1
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
var chart = Highcharts.chart('container2', {
title: {
text: '网络状况'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
xAxis: {
categories: v5
},
yAxis: {
title: {
text: '速度'
},
labels: {
formatter: function () {
return this.value + 'kb';
}
}
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
}
},
series: [{
name: '上传速度',
data: v3
}, {
name: '下载速度',
data: v4
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
});
});
}
function timeDown(limit, i) {
limit--;
if (i > 2) {
i = 0;
}
if (limit < 0) {
limit = 3;
update(i);
i++;
}
$('#time').text(limit + '秒后刷新');
setTimeout(function() {
timeDown(limit, i);
}, 1000)
}
$(document).ready(function() {
timeDown(3, 0)
})
</script>
</head>
<body>
<p id="time"></p>
<div id="container1"></div>
<div id="container2"></div>
</body>
</html>
import psutil as psutil
from django.shortcuts import render
from django.views import generic
from django.http import HttpResponse
from django.shortcuts import render_to_response
import json,time
class hanshu():
ln=[]
def data(request, id):
rlist2 = []
n = psutil.net_io_counters()
s1=n.bytes_sent # 发送字节数
s2=n.bytes_recv # 接受字节数
time.sleep(1)
T=time.strftime('%Y-%m-%d %H:%M:%S', time.localtime(time.time()))+''
n2=psutil.net_io_counters()
s1=round((n2.bytes_sent-s1)/1024,2)
s2=round((n2.bytes_recv-s2)/1024,2)
# 本机cpu的总占用率
v = psutil.cpu_percent(0)
rlist2.append({"zhan": psutil.virtual_memory().percent, "cpu": v,'up':s1,'down':s2,'time':T})
print(rlist2)
rjson = json.dumps(rlist2)
response = HttpResponse()
response['Content-Type'] = "text/javascript"
response.write(rjson)
return response
def update(request):
return render_to_response('update.html')
