Beiträge von Timste

Timste · 3. November 2020

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

Timste · 26. Oktober 2020

Das muss ich jetzt erst Mal alles verdauen und versuchen Schritt für Schritt umzusetzen

Timste · 26. Oktober 2020

Wow, vielen Dank!

Ich werde mal versuchen mich da durchzufuchsen.

Timste · 26. Oktober 2020

Zitat von Sempervivum

Dann brauchen wir also eine unterschiedliche Verarbeitung. Verstehe ich das richtig: Es gibt eine Anzahl von XMLs, spieler1.xml, spieler2.xm, spieler3.xml usw. und diese sollen in einer Tabelle zusammen gefasst werden. Und dann gibt es unabhängig davon eine weitere XML, die in einer getrennten Tabelle angezeigt werden soll?

Genau so

Timste · 26. Oktober 2020

Zitat von Sempervivum

Die interessantere Frage ist, was Du mit den Tabellen machen willst: Soll alles in einer Tabelle zusammen gefasst werden oder für jede XML-Datei eine eigene Tabelle angelegt?

Beides ist der Fall.

Es sollen also Werte aus verschiedenen XML Files in einer Tabelle zusammengefasst werden sollen, als auch Werte aus einem XML in einer eigenen Tabelle angezeigt werden.

Timste · 26. Oktober 2020

Vielen Dank Sempervivum mal wieder für deine kompetente Hilfe!

Zitat von Sempervivum

Nein, auch wenn Du 5 Request senden willst, brauchst Du nur eine Funktion. Du kannst dieser die URL der XML-Datei als Parameter übergeben. Bleibt die Frage, was Du mit der Response machst: Ist es immer die selbe Aktion, ist es kein Problem. Wenn nicht, könnte man es über eine Callback-Funktion lösen, aber ich fürchte, dann würde es zu kompliziert.

Die Daten aus den verschiedenen Files (Response) sollen einfach nur in Tabellen ausgegeben werden, oder als Graphen dargestellt werden.

Zudem sollen die Daten viertelstündig aktualisiert werden

Ich habe es jetzt mit folgendem Code hinbekommen, auf die einzelnen Werte des XML Files zugreifen zu können

HTML

<!DOCTYPE html>
<html>
<head>
    <script>
        function loadData()
        {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function ()
            {
                if (this.readyState == 4 && this.status == 200)
                {
                    player(this);
                }
            };
            xhttp.open("GET", "SERVER/xml/Player.xml", true);
            xhttp.send();
        }
        function player(xml) {
            var i;
            var xmlDoc = xml.responseXML;
            var table = "<tr><th>Name</th><th>Land</th><th>Geburtstag</th></tr>";
            var x = xmlDoc.getElementsByTagName("Spieler");
            for (i = 0; i < x.length; i++) {
                table += "<tr><td>" +
                    x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue +
                    "</td><td>" +
                    x[i].getElementsByTagName("Country")[0].childNodes[0].nodeValue +
                    "</td><td>" +
                    x[i].getElementsByTagName("Birthday")[0].childNodes[0].nodeValue +
                    "</td></tr>";
            }
            document.getElementById("spieler").innerHTML = table;
        }
    </script>
</head>
<body onload="loadData()">
    <table id="spieler"></table>
</body>
</html>

Alles anzeigen

Könntest du mir vielleicht anhand des obigen Codes kurz zeigen wie ein weiteres Request auf ein 2. XML File auszusehen hätte?

Timste · 25. Oktober 2020

Hallo zusammen,

ich bin noch recht neu in der Thematik JS/CSS/HTML und bräuchte Hilfe/Denkanstöße zu der Thematik XMLHttpRequest.

Die Gegebenheiten sind wie folgt:

Auf dem Server liegen mehrere XML-Files aus denen ich Daten abgreifen und darstellen möchte.

Ich habe es auch hinbekommen ein XML-File namens "Player.xml" mit folgender Struktur

XML

<?xml version="1.0" encoding="UTF-8"?>
<Records>
    <player>
        <Name>Hans Wurst</Name>
        <Country>Germany</Country>
        <Birthday>25. April 1975</Birthday>
    </player>
    <player>
        <Name>Karl Mustermann</Name>
        <Country>Germany</Country>
        <Birthday>02. Januar 1985</Birthday>
    </player>
    <player>
        <Name>Inge Irgendwer</Name>
        <Country>Germany</Country>
        <Birthday>11. November 1980</Birthday>
    </player>
</Records>

Alles anzeigen

wie folgt auszulesen

HTML

<!DOCTYPE html>
<html>
<head>
    <script>
        function loadData()
        {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function ()
            {
                if (this.readyState == 4 && this.status == 200) 
                {
                    document.getElementById("player").innerHTML = this.responseText;
                }
            };
            xhttp.open("GET", "http://SERVER/xml/player.xml", true);
            xhttp.send();
        }
    </script>
</head>
<body onload="loadData()">
    <p id="player"></p>
</body>
</html>

Alles anzeigen

Damit wird mir ja dann der komplette Inhalt des XML Files angezeigt.

Nun hätte ich folgende beiden Fragen und würde mich freuen wenn ihr mir da helfen könntet:

1. wie stelle ich es an, dass ich z.B. nur die Namen oder die Länder der einzelnen Spieler auslesen kann?

2. wie muss ich es umsetzen, wenn ich aus z.B. 5 unterschiedlichen Dateien Daten abgreifen muss (der Einfachheit halber heißen die Dateien einfach player1.xml - player5.xml)?
Muss ich dann 5 Funktionen machen, oder gibt es auch eine einfachere Möglichkeit ?

Vielen Dank schon mal für eure Unterstützung

Timste · 9. Oktober 2020

Zitat von Sempervivum

Gern geschehen! Für welchen Variante hast Du dich denn entschieden?

Ich hab es über die Javascript-Variante gelöst, da ich dort nichts an der bereits festgelegten Struktur meiner Seite ändern musste

Timste · 9. Oktober 2020

Sempervivum

Viele Dank für deine Unterstützung.

Ich konnte es dadurch nun problemlos umsetzen.

Timste · 8. Oktober 2020

Zitat von Sempervivum
Ja, ist keine große Sache. Ich würde es statt mit object einfach mit PHP-include machen und die URL der Textdatei als GET-Parameter übergeben, d. h. die Links nach diesem Schema:
Code
<a class="dropdown-item" href="~/Home/Reporting?dateiname=report1.txt" id="BK_Früh">Report 1</a>
Und dann auf der Reporting-Seite so auswerten:
PHP
<?php
    if (isset($_GET['dateiname'])) {
        include 'unterverzeichnis/' . $_GET['dateiname'];
    } else {
        // hier ggf. eine Fehlerbearbeitung
    }
?>
Dazu musst Du der Reporting-Seite die Endung .php geben.

Super und vielen Dank schon mal für deinen Vorschlag.

Wüsstest du rein interessehalber vielleicht auch wie das mit Javascript umsetzbar wäre?

Timste · 8. Oktober 2020

Hallo zusammen,

ich bin Anfänger was das Thema HTML/JS/CSS angeht und neu hier in diesem Forum und hoffe hier ein paar nette Menschen zu finden, die mir bei einem Thema helfen bzw. mich in die richtige Richtung schubsen könnten.

Mein aktuelles Problem ist das folgende:

Ich habe in meinem Navigationsmenü ein Dropdownmenü mit folgenden Dropdown-Items

Code

<div class="dropdown-menu" aria-labelledby="pagesDropdown" style="font-size:1em">
    <a class="dropdown-item" href="~/Home/Reporting" id="BK_Früh">Report 1</a>
    <a class="dropdown-item" href="~/Home/Reporting" id="BanG_Früh">Report 2</a>
    <a class="dropdown-item" href="~/Home/Reporting" id="TC_Früh">Report 3</a>
    <a class="dropdown-item" href="~/Home/Reporting" id="LS_Früh">Report 4</a>
    <a class="dropdown-item" href="~/Home/Reporting" id="BL_Früh">Report 5</a>
    <a class="dropdown-item" href="~/Home/Reporting" id="ET_Früh">Report 6</a>
    <a class="dropdown-item" href="~/Home/Reporting" id="Rep_Früh">Report 7</a>
</div>

Mein Ziel ist nun, beim klicken eines der Dropdown-Items jeweils eine andere Textdatei vom Server zu laden und auf der Seite "Reporting" anzuzeigen

Das generelle Anzeigen einer Textdatei habe ich bereits über ein HTML object wie folgt realisieren können

Code

<object data="http://SERVER/REPORT1.TXT" type="text/plain" width="750" height="500"></object>

Wie kann ich das Ganze nun jedoch umsetzen, dass bei klicken eines der Dropdown-Items jeweils eine andere Reportdatei vom Sever geladen und auf der Seite "Reporting" angezeigt wird?

Ich würde mich freuen, wenn mir Jemand vielleicht eine kurze Hilfestellung zu meinem Problem (das wohl keines ist, wenn man weiß wie man es angehen muss) geben könnte

Beiträge von Timste

Line-Chart mit Chart.js und dynamischen Daten aus XML

Fragen zu XMLHttpRequest

Fragen zu XMLHttpRequest

Fragen zu XMLHttpRequest

Fragen zu XMLHttpRequest

Fragen zu XMLHttpRequest

Fragen zu XMLHttpRequest

Laden verschiedener Textdateien über ein Dropdown-Menü

Laden verschiedener Textdateien über ein Dropdown-Menü

Laden verschiedener Textdateien über ein Dropdown-Menü

Laden verschiedener Textdateien über ein Dropdown-Menü