Il grafico di Nyquist è un tipo di diagramma usato per analisi dei sistemi dinamici per la maggior parte sistemi di controllo. Questo diagramma è in grado di offrire la risposta in frequenza di un sistema in funzione dall'input o dall'oscillazione. In un grafico di Nyquist le ordinate rappresentano la parte immaginaria della risposta del sistema mentre le ascisse rappresentano la parte reale.
Per creare questo tipo di grafici si possono usare le librerie come Chart.js o D3.js per la visualizzazione grafica dei dati.
<!DOCTYPE html>
<html>
<head>
<title>Grafico di Nyquist</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
</head>
<body>
<canvas id="nyquist-chart"></canvas>
<script>
// parte reale e immaginaria
var realPart = [1, 2, 3, 4, 5];
var imagPart = [0, -1, -2, -1, 0];
// oggetto
var ctx = document.getElementById('nyquist-chart').getContext('2d');
// dispersione (scatter plot)
var nyquistChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: 'Diagramma di Nyquist',
data: [],
borderColor: 'blue',
backgroundColor: 'blue',
pointRadius: 5,
pointHoverRadius: 8
}]
},
options: {
scales: {
x: {
type: 'linear',
position: 'bottom',
title: {
display: true,
text: 'Parte Reale'
}
},
y: {
type: 'linear',
position: 'left',
title: {
display: true,
text: 'Parte Immaginaria'
}
}
}
}
});
// dati grafico
for (var i = 0; i < realPart.length; i++) {
nyquistChart.data.datasets[0].data.push({x: realPart[i], y: imagPart[i]});
}
// Aggiornamento
nyquistChart.update();
</script>
</body>
</html>
In questo esempio ho usato la libreria Chart.js per creare un grafico di dispersione (scatter plot) che visualizza la parte reale e immaginaria dei dati.
Ho provato a scrivere un codice per raccogliere i dati da una macchina in funzione e in tempo reale basandomi sempre sul codice precedente. In questo caso però usando la libreria Socket.io per connetterci al server in tempo reale e ricevere i dati dalla macchina e limitando il numero di punti nel grafico per evitare confusione nel grafico.
<!DOCTYPE html>
<html>
<head>
<title>Grafico di Nyquist in Tempo Reale</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
</head>
<body>
<canvas id="nyquist-chart"></canvas>
<script>
// oggetto
var ctx = document.getElementById('nyquist-chart').getContext('2d');
// grafico di dispersione (scatter plot)
var nyquistChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: 'Diagramma di Nyquist',
data: [],
borderColor: 'blue',
backgroundColor: 'blue',
pointRadius: 5,
pointHoverRadius: 8
}]
},
options: {
scales: {
x: {
type: 'linear',
position: 'bottom',
title: {
display: true,
text: 'Parte Reale'
}
},
y: {
type: 'linear',
position: 'left',
title: {
display: true,
text: 'Parte Immaginaria'
}
}
}
}
});
// connessione server-macchina (esempio utilizzando WebSocket)
var socket = io.connect('http://localhost:3000'); // Assicurati di sostituire con il tuo indirizzo del server
// dati in tempo reale dalla macchina
socket.on('data', function (data) {
// Aggiungi i dati ricevuti al grafico
nyquistChart.data.datasets[0].data.push({x: data.realPart, y: data.imagPart});
// limite punti nel grafico per evitare sovraccarichi
if (nyquistChart.data.datasets[0].data.length > 100) {
nyquistChart.data.datasets[0].data.shift(); // Rimuovi il punto più vecchio
}
// Aggiornamento
nyquistChart.update();
});
</script>
</body>
</html>
Il grafico potete trovarlo in una pagina vera e propria qui!
