Hallo zusammen, ich bräuchte mal wieder eure Hilfe bei folgendem Problem.
Ich lasse mir aktuell wie folgt ein Line-Chart mit Chart.js erstellen
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="~/FrontEnd/plugins/jquery/jquery.min.js"></script>
<script src="~/FrontEnd/plugins/chart.js/Chart.min.js"></script>
</head>
<body>
<canvas id="charTest" height="290"></canvas>
<script>
var ctx = document.getElementById('charTest').getContext('2d');
var charTest = new Chart(ctx, {
type: 'line',
data: {
labels: ['6:00', '6:30', '7:00', '7:30', '8:00', '8:30', '9:00', '9:30', '10:00', '10:30'],
datasets: [{
label: 'Test-Chart',
data: [400, 505, 626, 734, 710, 690, 620, 580, 530, 690],
pointRadius: 5,
pointStyle: 'rectRot',
borderWidth: 1,
borderColor: 'blue'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
tooltips: {
mode: 'index',
intersect: false,
}
}
});
</script>
</body>
</html>
Alles anzeigen
In diesem Beispiel sind die Daten nun jedoch fest hinterlegt, es sollen aber dynamisch Daten aus folgendem XML file angezeigt werden, wobei für die X-Achse die jeweiligen Uhrzeiten (ohne Datum) und für die Y-Achse die jeweiligen Stück (stk) angezeigt werden sollen.
Aber das war auch noch nicht alles....da es sich hier nur um einen Auszug aus dem XML file handelt und das original File recht groß ist sollen nur die jeweils letzten 10 Einträge der Datei im Chart angezeigt werden.
Code
<test>
<zone><zeit> 2-NOV-2020 06:00</zeit><stk>160</stk></zone>
<zone><zeit> 2-NOV-2020 06:15</zeit><stk>170</stk></zone>
<zone><zeit> 2-NOV-2020 06:30</zeit><stk>192</stk></zone>
<zone><zeit> 2-NOV-2020 06:45</zeit><stk>209</stk></zone>
<zone><zeit> 2-NOV-2020 07:00</zeit><stk>215</stk></zone>
<zone><zeit> 2-NOV-2020 07:15</zeit><stk>231</stk></zone>
<zone><zeit> 2-NOV-2020 07:30</zeit><stk>239</stk></zone>
<zone><zeit> 2-NOV-2020 07:45</zeit><stk>249</stk></zone>
<zone><zeit> 2-NOV-2020 08:00</zeit><stk>267</stk></zone>
<zone><zeit> 2-NOV-2020 08:15</zeit><stk>279</stk></zone>
<zone><zeit> 2-NOV-2020 08:30</zeit><stk>294</stk></zone>
<zone><zeit> 2-NOV-2020 08:45</zeit><stk>293</stk></zone>
<zone><zeit> 2-NOV-2020 09:00</zeit><stk>300</stk></zone>
<zone><zeit> 2-NOV-2020 09:15</zeit><stk>306</stk></zone>
<zone><zeit> 2-NOV-2020 09:30</zeit><stk>311</stk></zone>
<zone><zeit> 2-NOV-2020 09:45</zeit><stk>324</stk></zone>
<zone><zeit> 2-NOV-2020 10:00</zeit><stk>333</stk></zone>
<zone><zeit> 2-NOV-2020 10:15</zeit><stk>339</stk></zone>
<zone><zeit> 2-NOV-2020 10:30</zeit><stk>340</stk></zone>
<zone><zeit> 2-NOV-2020 10:45</zeit><stk>344</stk></zone>
<zone><zeit> 2-NOV-2020 11:00</zeit><stk>344</stk></zone>
<zone><zeit> 2-NOV-2020 11:15</zeit><stk>350</stk></zone>
<zone><zeit> 2-NOV-2020 11:30</zeit><stk>351</stk></zone>
<zone><zeit> 2-NOV-2020 11:45</zeit><stk>351</stk></zone>
<zone><zeit> 2-NOV-2020 12:00</zeit><stk>349</stk></zone>
<zone><zeit> 2-NOV-2020 12:15</zeit><stk>346</stk></zone>
<zone><zeit> 2-NOV-2020 12:30</zeit><stk>346</stk></zone>
<zone><zeit> 2-NOV-2020 12:45</zeit><stk>349</stk></zone>
<zone><zeit> 2-NOV-2020 13:00</zeit><stk>351</stk></zone>
<zone><zeit> 2-NOV-2020 13:15</zeit><stk>350</stk></zone>
<zone><zeit> 2-NOV-2020 13:30</zeit><stk>353</stk></zone>
<zone><zeit> 2-NOV-2020 13:45</zeit><stk>356</stk></zone>
<zone><zeit> 2-NOV-2020 14:00</zeit><stk>358</stk></zone>
<zone><zeit> 2-NOV-2020 14:15</zeit><stk>365</stk></zone>
<zone><zeit> 2-NOV-2020 14:30</zeit><stk>372</stk></zone>
<zone><zeit> 2-NOV-2020 14:45</zeit><stk>381</stk></zone>
</test>
Alles anzeigen
Ich hoffe, dass ich das Ganze relativ verständlich erklären konnte und mir vielleicht Jemand behilflich sein kann.
Gruß Timste