ApexChart und SQL

  • Hallo,


    ich versuche ein HEatmap Chart mit Daten aus der SQL Datenbank zu befüllen.


    Als Script benutze ich das ApexChart und habe es mir etwas angepasst. (nur Tetszwecke, was die Daten angeht)

    MIt JS kenne ich mich kaum aus, daher frage ich hier (erstmal mit den Grundsätzlichen Fragen).

    Wie kann ich die Daten aus meiner SQL Abfrage dort einbinden? Zumindest auf der Seite des Sripts gibt es da keinen support und Recherche im Netz ergab, dass man das mit JSON bewerkstelligen könnte. Leider ist JS nicht mein Gebiet.


    Danke sehr


    Grüße


    Blickwinkelkanone

  • Ja, JSON ist schon der richtige Ansatz. Bei deiner DB-Abfrage bekommst Du ja ein zweidimensionales Array. Dieses kannst Du folgender Maßen dem Javascript bekannt machen:

    PHP
    1. // angenommen das Array heißt $array2d
    2. <script>
    3. const array2d = <?php echo json_encode($array2d); ?>;
    4. </script>

    Dieses Array ist dann die Datenbasis für das Charting-Script und Du kannst die einzelnen Zeilen statt des Funktionsaufrufes für die Beispieldaten übergeben:

    Soweit das grundsätzliche Vorgehen. Das series kann man dann noch automatisch generieren anstatt die einzelnen Zeilen aufzuzählen, entweder gleich in PHP oder auf Javascript-Seite.

  • PS: Ich sehe gerade, dass die einzelnen Elemente jeder Zeile Objekte bzw. ass. Arrays mit x und y sind. Da müsstest Du auch noch eine Anpassung vornehmen:

    (alles ungetestet)

  • Erstmal vielen Dank für die Antwort. Dann war ich zumindest schonmal auf dem richtigen Weg.


    Habe mir das jetzt angeguckt und muss leider sagen, dass ich nicht weiter komme.

    Von vorne am besten.


    hiermit selektiere ich die Daten.. Soweit so gut.

    PHP
    1. <?
    2. require_once ('../connect.php');
    3. $name = "Obamacare";
    4. $sql_zeiten = $db->prepare("SELECT FROM_UNIXTIME(FLOOR(UNIX_TIMESTAMP(time)/(1800))*1800) AS timekey, count(name) AS anzahl, tag FROM vs_online WHERE name = :name GROUP BY timekey ORDER BY WEEKDAY(timekey), EXTRACT(HOUR FROM timekey)");
    5. $sql_zeiten->execute(array('name'=> $name ));
    6. $array2d = $sql_zeiten->fetchAll();
    7. //print_r($array2d);
    8. ?>

    Da bekomme ich ein Array, mit den Daten, die in der Datenbank sind. Auch soweit korrekt.


    2020-07-13 01:00:00 1 Montag
    2020-06-22 09:30:00 1 Montag
    2020-06-22 10:30:00 1 Montag
    2020-06-22 13:00:00 1 Montag
    2020-06-29 14:00:00 2 Montag
    2020-06-29 15:30:00 1 Montag
    2020-06-22 23:00:00 1 Montag
    2020-06-30 10:30:00 2 Dienstag
    2020-06-16 11:00:00 1 Dienstag
    2020-06-23 14:30:00 1 Dienstag
    2020-06-23 15:30:00 1 Dienstag
    2020-06-23 17:00:00 1 Dienstag
    2020-07-21 22:00:00 1 Dienstag
    2020-06-24 00:00:00 1 Mittwoch
    2020-07-08 10:00:00 10 Mittwoch
    2020-06-17 11:00:00 1 Mittwoch
    2020-07-01 11:00:00 3 Mittwoch
    2020-07-01 14:30:00 2 Mittwoch
    2020-06-17 14:00:00 2 Mittwoch
    2020-06-24 15:00:00 1 Mittwoch
    2020-07-08 18:30:00 2 Mittwoch
    2020-06-25 00:30:00 1 Donnerstag
    2020-06-25 01:30:00 1 Donnerstag
    2020-06-25 01:00:00 1 Donnerstag
    2020-07-02 02:00:00 1 Donnerstag
    2020-06-18 08:30:00 1 Donnerstag
    2020-07-02 10:30:00 1 Donnerstag
    2020-07-02 11:00:00 1 Donnerstag
    2020-07-16 21:00:00 2 Donnerstag
    2020-07-16 22:30:00 1 Donnerstag
    2020-07-16 22:00:00 1 Donnerstag
    2020-07-16 23:00:00 2 Donnerstag
    2020-07-17 00:00:00 1 Freitag
    2020-07-17 01:30:00 1 Freitag
    2020-07-17 01:00:00 1 Freitag
    2020-06-26 09:00:00 1 Freitag
    2020-06-26 10:30:00 3 Freitag
    2020-06-26 11:30:00 2 Freitag
    2020-06-26 11:00:00 2 Freitag
    2020-06-26 12:30:00 4 Freitag
    2020-06-26 14:00:00 1 Freitag
    2020-07-10 17:00:00 2 Freitag
    2020-06-20 15:00:00 1 Samstag
    2020-06-21 09:30:00 1 Sonntag
    2020-06-28 11:30:00 1 Sonntag
    2020-06-28 12:00:00 1 Sonntag
    2020-06-28 14:30:00 2 Sonntag
    2020-05-31 22:30:00 2 Sonntag


    Das Array habe ich wie von dir beschrieben auch eingefügt.


    Nur die letzte Antwort von dir, verstehe ich nicht ganz.

    Wo muss diese eingefügt bzw was ersetzt diese?


    Danke für deine Hilfe.

  • Ich habe mir entsprechend deinen Musterdaten mal Testdaten generiert und eine Testdatei gemacht, basierend auf dem Muster "basic" von Apex:

    Von der Syntax her funktioniert es und es wird auch ein Chart angezeigt, aber die Semantik! Das ist so zunächst mal eindimensional mit der Zeit in der Vertikalen. Solch eine Heatmap macht aber nur Sinn, wenn es eine Matrix ist. Wie hast Du dir denn das vorgestellt? Ich vermute Mal, auf der x-Achse das Datum ohne Uhrzeit und in der vertikalen dann die Uhrzeit ohne das Datum?

    Edit: Weil ich keine Ahnung von React habe, habe ich auf der Version mit Vanilla-JS aufgesetzt.

  • Hallo Sempervivum,


    vielen Dank.

    Da wäre ich so schnell nicht selber drauf gekommen.

    Eigentlich war die IDee dahiner wie folgt:


    y Achse Wochentage

    x Achse Uhrzeiten 00:00, 00:30, 01:00 etc


    Wird für ein Wochentag und Uhrzeit ein Wert gefunden, wird die ANzahl dort angegeben. Leifer die SQL Abfrage kein Wert für den Wochentag und Uhrzeit zurück, soll dieser mit 0 angegeben werden.


    So soll angezeigt werden, wann und zu welcher Uhrzeit ein bestimmter User wie oft online ist.

  • Verstehe. Soll die Auswertung jetzt nur für eine Woche erfolgen, d. h. z. B. vom 1.7. bis 7.7.? In der DB sind ja wahrscheinlich Daten für mehrere Wochen? Oder sollen die Werte aufsummiert werden, wenn es sich um den gleichen Wochentag handelt, d. h. 1. Juli, 8. Juli, 15. Jul, ... werden unter Mittwoch summiert?

  • Dann müsste dieses es tun:

    Die Uhrzeiten auf der x-Achse sind stark zusammen gequetscht, da müsste man noch in der Doku lesen, wie man es verbessern kann.

  • HI,


    ich habe am Wochenende noch etwas rumgetüftelt.


    Mit stellt sich hier die Frage, wie die Daten aus der Datenbank genua da rinkommen, mit dem Zusatz, dass der Wert 0 angezeigt werden soll, sollte kein Wert für den Zeitraum an dem Tag gefunden werden.


    Das werde ich ja wohl da machen, wo im Moment die Zufallszahlen generiert werden.


    JavaScript
    1. var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

    Gibt es da eine elegante Version, das umzusetzen und nach Uhrzeit und Wochentag abzufragen?

  • Irgendwie bin ich zu doof dafür und verstehe nicht, was genau du meinst.;(?(


    Werte sind im Array, so wie oben in der Tabelle beschrieben.

    JavaScript
    1. $array2d = $sql_zeiten->fetchAll();


    Dann füge ich es wie folgt hinzu.

    JavaScript
    1. const array2d = <?php echo json_encode($array2d); ?>;


    Was verstehe ich hier falsch von deinem Post.


    Anbei mal der komplette Quellcode mit Array Daten

  • PS: Ich habe noch Mal drauf geguckt und noch einen Fehler gefunden: An die Funktion modifyData musst Du dein Array $array2d übergeben:

    Code
    1. //let series = true;
    2. console.log(array2d);
    3. let seriesMod = modifyData(array2d);
    4. console.log(seriesMod);

    series war ja das Array, das von meiner Generierung der Testdaten angelegt wurde.