#javascript #python #ajax #chart.js
#javascript #python #ajax #chart.js
Вопрос:
У меня есть список, содержащий 4 данных из скрипта Python, который вызывается функцией Ajax. Я не могу понять способ его разделения. Причина, по которой мне нужно, чтобы он был разделен, заключается в том, что для отображения все данные будут отправлены в отдельные Chartjs. Существующие функции ajax берут отдельные данные из отдельных функций из скрипта Python, которые я хочу заменить новейшим скриптом ajax и python.
Это моя функция HTML-страницы:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Chart.js demo</title>
<!-- import plugin script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"
integrity="sha512-rmZcZsyhe0/MAjquhTgiUcb4d9knaFc7b5xAfju483gbEXTkeJRUMIPk6s3ySZMYUHEcjKbjLjyddGWMrNEvZg=="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@latest/dist/chartjs-plugin-streaming.min.js"></script>
</head>
<body>
<div style="height: 450px; width: 450px; display: inline-block">
<canvas id="myChart" width="450" height="450"></canvas>
</div>
<div style="height: 450px; width: 450px; display: inline-block">
<canvas id="myChart2" width="450" height="450"></canvas>
</div>
<div style="height: 450px; width: 450px; display: inline-block">
<canvas id="myChart4" width="450" height="450"></canvas>
</div>
<div style="height: 450px; width: 450px; display: inline-block">
<canvas id="myChart5" width="450" height="450"></canvas>
</div>
<div style="height: 450px; width: 450px; display: inline-block">
<canvas id="myChart3" width="450" height="450"></canvas>
</div>
<script>
//the ajax function I want to use
function monitor() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 amp;amp; this.status == 200) {
data = this.responseText;
chart.config.data.datasets.forEach(function (dataset) {
dataset.data.push({
x: Date.now(),
y: data,
});
});
}
};
xhttp.open("GET", "getmonitor", true);
xhttp.send();
return disp;
}
</script>
<script>
//the existing ajax
function cpuDoc() {
var xhttp = new XMLHttpRequest();
var disp = {x: Date.now(), y: 25.7};
xhttp.onreadystatechange = function () {
if (this.readyState == 4 amp;amp; this.status == 200) {
cp = this.responseText;
chart.config.data.datasets.forEach(function (dataset) {
dataset.data.push({
x: Date.now(),
y: cp,
});
});
}
};
xhttp.open("GET", "getcpu", true);
xhttp.send();
return disp;
}
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets:
[{
label: "CPU Percentage",
data: [],
borderColor: "#d7041c",
fill: false
}]
},
options: {
legend: {
display: true,
fill: true
},
title: {
display: true,
text: 'CPU'
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
},
type: 'realtime',
realtime: {
duration: 10000,
delay: 10000,
refresh: 1000,
onRefresh: memoryDoc()
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 20,
max: 100,
},
scaleLabel: {
display: true,
labelString: 'Percentage'
}
}]
}
}
});
</script>
<script>
//the existing ajax
function memoryDoc() {
var xhttp = new XMLHttpRequest();
var disp = {x: Date.now(), y: 25.7};
xhttp.open("GET", "getmem", true);
xhttp.send();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 amp;amp; this.status == 200) {
mm = this.responseText;
chart2.config.data.datasets.forEach(function (dataset) {
dataset.data.push({
x: Date.now(),
y: mm,
});
});
}
};
return disp;
}
var ctx = document.getElementById('myChart2').getContext('2d');
var chart2 = new Chart(ctx, {
type: 'line',
data: {
datasets:
[{
label: "Memory Percentage",
data: [],
borderColor: "#0a2dae",
fill: false
}]
},
options: {
title: {
display: true,
text: 'Memory'
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
},
type: 'realtime',
realtime: {
duration: 10000,
delay: 10000,
refresh: 1000,
onRefresh: memoryDoc
},
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 20,
max: 100,
},
scaleLabel: {
display: true,
labelString: 'Percentage'
}
}]
}
}
});
</script>
<script>
//the existing ajax
function networkIn() {
var xhttp = new XMLHttpRequest();
var disp = {x: Date.now(), y: 25.7};
xhttp.open("GET", "getib", true);
xhttp.send();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 amp;amp; this.status == 200) {
ib = this.responseText;
chart4.config.data.datasets.forEach(function (dataset) {
dataset.data.push({
x: Date.now(),
y: ib,
});
});
}
};
return disp;
}
var ctx = document.getElementById('myChart4').getContext('2d');
var chart4 = new Chart(ctx, {
type: 'line',
data: {
datasets:
[{
label: "Inbound",
data: [],
borderColor: "#d7c204",
fill: false
}]
},
options: {
legend: {
display: true,
},
title: {
display: true,
text: 'Network Usage'
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
},
type: 'realtime',
realtime: {
duration: 10000,
delay: 10000,
refresh: 1000,
onRefresh: networkIn
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 20,
max: 100,
},
scaleLabel: {
display: true,
labelString: 'MBPS'
}
}]
}
}
});
</script>
<script>
//the existing ajax
function networkOut() {
var xhttp = new XMLHttpRequest();
var disp = {x: Date.now(), y: 25.7};
xhttp.open("GET", "getob", true);
xhttp.send();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 amp;amp; this.status == 200) {
ob = this.responseText;
chart5.config.data.datasets.forEach(function (dataset) {
dataset.data.push({
x: Date.now(),
y: ob,
});
});
}
};
return disp;
}
var ctx = document.getElementById('myChart5').getContext('2d');
var chart5 = new Chart(ctx, {
type: 'line',
data: {
datasets:
[{
label: "Outbound",
data: [],
borderColor: "#5fd913",
fill: false
}]
},
options: {
legend: {
display: true,
},
title: {
display: true,
text: 'Network Usage'
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
},
type: 'realtime',
realtime: {
duration: 10000,
delay: 10000,
refresh: 1000,
onRefresh: networkOut
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 20,
max: 100,
},
scaleLabel: {
display: true,
labelString: 'MBPS'
}
}]
}
}
});
</script>
<script>
//the existing ajax
setInterval(loadDoc3, 900000)
function loadDoc3() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "getdk", true);
xhttp.send();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 amp;amp; this.status == 200) {
dk = this.responseText;
}
};
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "getdkf", true);
xhttp.send();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 amp;amp; this.status == 200) {
dkf = this.responseText;
}
};
dss = [dk, dkf];
chart3.data.datasets.pop({
data: dss
});
chart3.update();
chart3.data.datasets.push({
data: dss
});
chart3.update();
}
var ctx = document.getElementById('myChart3').getContext('2d');
var chart3 = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Used", "Free"],
datasets: [{
label: "Disk Usage",
backgroundColor: ["#8a0404", "#177000"],
data: [0, 0],
}]
},
options: {
title: {
display: true,
text: 'Disk Usage'
},
elements: {
arc: {
backgroundColor: ["#8a0404", "#177000"]
}
},
},
});
</script>
</body>
</html>
Монитор получения возвращает список данных из views.py как показано ниже:
# load html page to display Chartjs
def cpu_monitor(request):
# execute the call function upon loading chart.html
# call()
return render(request, "chart.html")
# gather data from Flask for cpu, memory and network usage
def monitor(request):
# request data from Flask
url1 = "http://127.0.0.1:5000/cpu"
url2 = "http://127.0.0.1:5000/memory"
url3 = "http://127.0.0.1:5000/inb"
url4 = "http://127.0.0.1:5000/oub"
# storing received data
cpu_data = requests.get(url1)
memory_data = requests.get(url2)
ib_data = requests.get(url3)
ob_data = requests.get(url4)
# converting stored data to json format
cpu_data2 = cpu_data.json()
memory_data2 = memory_data.json()
ib_data2 = ib_data.json()
ob_data2 = ob_data.json()
# extracting only the value of the received data
for key in cpu_data2:
cpu_value = cpu_data2['CPU']
time = cpu_data2['Time']
print(cpu_value)
print(time)
for key in memory_data2:
memory_value = memory_data2['Memory Percentage']
time = memory_data2['Time']
print(memory_value)
print(time)
for key in ib_data2:
inbound_value = ib_data2['Received Bytes']
time = ib_data2['Time']
print(inbound_value)
print(time)
for key in ob_data2:
outbound_value = ob_data2['Received Bytes']
time = ob_data2['Time']
print(outbound_value)
print(time)
# storing the extracted values into dictionary
monitorData = [cpu_value, memory_value, inbound_value, outbound_value]
# returning the dictionary
return HttpResponse(monitorData)
Комментарии:
1. Где находятся отдельные диаграммы?
2. @SlavaKnyazev Я отредактировал коды
3. Где находятся четыре части данных?
4. @SlavaKnyazev отредактировал его в
Ответ №1:
Вам нужно иметь диаграммы как отдельные объекты:
// Put all the instances of Chart into a single array
let charts = [chart1, chart2, ... ]
// when the data comes back, do the following:
let data = [80, 70, ... ] // example data
data.map((value, index) => {
let chart = charts[index];
// assign data to chart
chart.data = value;
})
Комментарии:
1. Следует ли все это выполнять в функции monitor() или в другом месте? Кроме того, пусть данные должны состоять из [getMonitor] или [cpu_value, memory_value, inbound_value, outbound_value]
2. Второй. Но не
[cpu_value, memory_value, inbound_value, outbound_value] == getMonitor?3. Я попробовал это для одной из диаграмм для чтения процессором, но диаграмма исчезла с моей веб-страницы. Я отредактировал новые коды в вопросе. Где я сделал это неправильно?
4. Материал MyChart должен быть
let myChart = new Chart(....)материалом5. Все то же самое, диаграмма не отображается. Я отредактировал рассматриваемые коды с последними изменениями