I am trying to add another data to my chart.
I have to line which a representing a reference data. Now I want to add some points which are showing real results.
The chart should show that the points are in the tolerance range of the reference.
But i don’t know how to solve this right now.
The data of the reference and real data are different datasets. But both have same same kind of data.
For example: Both have an error value (y-axis) and both have a flowrate (x-axis).
But how can i add and show the data correctly together?
I hope anyone of you have an idea. 😉
Thank you very much.
Adjusting label. Have also tried with “ticks”.
Open for any idea out there.
Thats the chart what I have now. The points near the middle are showing wrong. X-axis have flowrates and last point has also a flowrate of for example “250” but i can’t mix the x-axis.
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">Hello World!</h1>
<p id="currentTime"></p>
<!-- Add the canvas element for the chart -->
<canvas id="errorChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const ctx = document.getElementById('errorChart').getContext('2d');
// Beispiel-Datensatz für labels, der X- und Y-Werte enthält
let referenceData = [
{ x: 308.75, y: 0.19 }, { x: 292.5, y: 0.22 },
{ x: 276.25, y: 0.21 }, { x: 260, y: 0.19 },
{ x: 243.75, y: 0.17 }, { x: 227.5, y: 0.23 },
{ x: 211.25, y: 0.18 }, { x: 195, y: 0.21 },
{ x: 178.75, y: 0.22 }, { x: 162.5, y: 0.18 },
{ x: 146.25, y: 0.23 }, { x: 130, y: 0.19 },
{ x: 113.75, y: 0.20 }, { x: 97.5, y: 0.26 },
{ x: 81.25, y: 0.32 }, { x: 65, y: 0.39 },
{ x: 48.75, y: 0.49 }, { x: 45.5, y: 0.55 },
{ x: 42.25, y: 0.61 }, { x: 39, y: 0.60 },
{ x: 35.75, y: 0.71 }, { x: 32.5, y: 0.78 },
{ x: 29.25, y: 0.81 }, { x: 26, y: 0.97 },
{ x: 22.75, y: 1.09 }, { x: 19.5, y: 1.22 },
{ x: 16.25, y: 1.47 }, { x: 13, y: 1.85 },
{ x: 9.75, y: 2.48 }, { x: 6.5, y: 3.72 },
{ x: 3.25, y: 7.45 }, { x: 1.625, y: 14.90 },
{ x: 0.975, y: 24.80 }
];
// Sortiere labelsData nach x-Werten in aufsteigender Reihenfolge
referenceData.sort((a, b) => a.x - b.x);
// Extrahiere die X-Werte als Labels für die X-Achse
const labels = referenceData.map(point => point.x.toFixed(2));
// Beispiel-Datensatz für Fehlerdaten mit X- und Y-Werten
const fehlerData = [
{ x: 25, y: 0.08 }, { x: 30, y: -0.07 },
{ x: 35, y: 0.03 }, { x: 45, y: 0.04 },
{ x: 50, y: 0.01 }, { x: 150, y: 0.01 },
{ x: 280, y: 0.01 }
];
// Beispielwerte für positive und negative Kurven, basierend auf fehlerData
const positiveValues = referenceData.map(point => ({
x: point.x,
y: (point.y + 0.05).toFixed(2)
}));
const negativeValues = referenceData.map(point => ({
x: point.x,
y: (point.y - 0.05).toFixed(2)
}));
// Berechne den minimalen und maximalen Wert aus den Daten
const yMin = -1.5;
const yMax = 1.5;
// Chart initialisieren
const errorChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels, // X-Achsen-Werte (aus labelsData extrahiert)
datasets: [
{
label: 'Fehler Punkte', // Bezeichnung für Fehlerpunkte
data: fehlerData, // Fehlerdaten als Punkte (mit X- und Y-Werten)
borderColor: 'transparent', // Keine Linienfarbe
backgroundColor: '#FE661C', // Hintergrundfarbe der Punkte
pointBorderColor: '#FE661C', // Randfarbe der Punkte
pointBackgroundColor: '#FE661C', // Hintergrundfarbe der Punkte
pointStyle: 'rectRot',
pointRadius: 2, // Größe der Punkte
pointHoverRadius: 3, // Größe der Punkte beim Hover
fill: false // Keine Fläche unter der Linie füllen
},
{
label: 'Kurve von -1,5 bis 0,1',
data: negativeValues,
borderColor: '#4FAD2F', // Farbe der Kurve
borderWidth: 2, // Breite der Kurve
tension: 0.8, // Kurvenansicht
cubicInterpolationMode: 'monotone',
pointRadius: 0, // Punkte ausblenden
fill: false // Keine Fläche unter der Kurve füllen
},
{
label: 'Kurve von +1,5 bis 0,1',
data: positiveValues, // Datenpunkte
borderColor: '#004C97', // Farbe der Kurve
borderWidth: 2, // Breite der Kurve
tension: 0.8, // Kurvenansicht
cubicInterpolationMode: 'monotone',
pointRadius: 0, // Punkte ausblenden
fill: false // Keine Fläche unter der Kurve füllen
}
]
},
options: {
animation: false, // Animation deaktivieren
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
title: {
display: true,
text: 'Durchfluss / Flow Rate [kg/h]',
font: {
family: 'Roboto, sans-serif',
weight: 'normal',
size: 14,
color: '#333'
}
},
ticks: {
font: {
family: 'Roboto, sans-serif',
weight: 'normal',
size: 12,
color: '#333'
},
color: '#666'
},
beginAtZero: true,
min: 0,
max: 50,
stepSize: 5,
grid: {
display: false,
color: '#ddd',
borderColor: '#aaa',
borderWidth: 1
}
},
y: {
title: {
display: true,
text: 'Fehler/Error [%]',
font: {
family: 'Roboto, sans-serif',
weight: 'normal',
color: '#333'
}
},
ticks: {
font: {
family: 'Roboto, sans-serif',
weight: 'normal',
color: '#333'
},
callback: function (value) {
return value.toFixed(1); // Formatierung der Y-Werte
},
color: '#666'
},
grid: {
display: false,
color: '#ddd',
borderColor: '#aaa',
borderWidth: 1
},
min: yMin, // Minimale Y-Achsen-Skalierung
max: yMax // Maximale Y-Achsen-Skalierung
}
},
plugins: {
legend: {
display: false, // Legende anzeigen
labels: {
color: '#333',
font: {
family: 'Roboto, sans-serif',
weight: 'normal'
}
},
title: {
display: true,
text: 'Genauigkeitskurve / Accuracy - Curve',
color: '#333',
font: {
family: 'Roboto, sans-serif',
weight: 'normal',
size: 14
}
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
titleColor: '#fff',
bodyColor: '#fff',
borderColor: '#FF6819',
borderWidth: 1,
padding: 10
}
},
devicePixelRatio: 4
}
});
});
</script>
</body>
</html>