ApexChart und SQL

Blickwinkelkanone

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)

JavaScript

<script>
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
        )
    </script>

    
    <script src="https://cdn.jsdelivr.net/npm/react@16.12/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.12/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prop-types@15.7.2/prop-types.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-apexcharts@1.3.6/dist/react-apexcharts.iife.min.js"></script>
    

    <script>
  function generateData(count, yrange) {
    var i = 0;
    var series = [];
    while (i < count) {
      var x = '' + (i).toString();
      var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
  
      series.push({
        x: x,
        y: y
      });
        i++;
        var i = i -0.5;
    }
    return series;
  }
  </script>
  </head>

  <body>
    
    <div id="app"></div>

    <div id="html">
      &lt;div id=&quot;chart&quot;&gt;
  &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;heatmap&quot; height={350} /&gt;
&lt;/div&gt;
    </div>

    <script type="text/babel">
      class ApexChart extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
          
            series: [{
              name: 'Sonntag',
              data: generateData(24, {
                min: 0,
                max: 2222
              })
            },
            {
              name: 'Samstag',
              data: generateData(24, {
                min: 0,
                max: 2222
              })
            },
            {
              name: 'Freitag',
              data: generateData(24, {
                min: 0,
                max: 2222
              })
            },
            {
              name: 'Donnerstag',
              data: generateData(24, {
                min: 0,
                max: 2222
              })
            },
            {
              name: 'Mittwoch',
              data: generateData(24, {
                min: 0,
                max: 2222
              })
            },
            {
              name: 'Dienstag',
              data: generateData(24, {
                min: 0,
                max: 2222
              })
            },
            {
              name: 'Montag',
              data: generateData(24, {
                min: 0,
                max: 2222
              })
            },
            ],
            options: {
              chart: {
                height: 350,
                type: 'heatmap',
              },
              dataLabels: {
                enabled: false
              },
              colors: ["#FF5733"],
              title: {
                text: 'Onlinezeiten Obamacare'
              },
            },
          
          
          };
        }

      

        render() {
          return (
            <div>
              <div id="chart">
                <ReactApexChart options={this.state.options} series={this.state.series} type="heatmap" height={350} />
              </div>
              <div id="html-dist"></div>
            </div>
          );
        }
      }

      const domContainer = document.querySelector('#app');
      ReactDOM.render(React.createElement(ApexChart), domContainer);
    </script>

Alles anzeigen

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

Sempervivum

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

// angenommen das Array heißt $array2d
<script>
    const array2d = <?php echo json_encode($array2d); ?>;
</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:

Code

<script type="text/babel">
      class ApexChart extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
          
            series: [{
              name: 'Sonntag',
              data: array2d[0]
            },
            {
              name: 'Samstag',
              data: array2d[1]
            },
            {

Alles anzeigen

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.

Sempervivum

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:

Code

function getLine(arr, idx) {
    let result = [];
    for (let i = 0; i < arr[idx].length; i++) {
        result.push({x: i, y: arr[idx][i];
    }
    return result;
}

// und dann beim Übergeben der Daten verwenden:
            // ...
            {
              name: 'Samstag',
              data: getLine(array2d, 1)
            },
            // ...

Alles anzeigen

(alles ungetestet)

Blickwinkelkanone

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

<?
require_once ('../connect.php');

$name = "Obamacare";
$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)");
$sql_zeiten->execute(array('name'=> $name ));
$array2d = $sql_zeiten->fetchAll();
//print_r($array2d);

?>

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.

Sempervivum

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

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Simple HeatMap</title>

    <link href="../../assets/styles.css" rel="stylesheet" />

    <style>
        #chart {
            max-width: 650px;
            margin: 35px auto;
        }
    </style>

    <script>
        window.Promise ||
            document.write(
                '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
            )
        window.Promise ||
            document.write(
                '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
            )
        window.Promise ||
            document.write(
                '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
            )
    </script>


    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>


    <script>
        // Diese Funktion generiert Daten entsprechend dem Muster, das Du gepostet hast:
        function generateData() {
            const count = 10;
            let series = [];
            let i = 0;
            let time = new Date('2020-07-22 00:00:00');
            const yrange = { min: 1, max: 10 };
            while (i < count) {
                let timeStr = time.toLocaleString('de-DE');
                let weekDayStr = time.toLocaleString('de-DE', { weekday: 'long' });
                var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

                series.push([timeStr, y, weekDayStr]);
                i++;
                time.setMinutes(time.getMinutes() + 30);
            }
            return series;
        }
        // Diese Funktion modifiziert die Daten so wie ich es gepostet habe:
        function modifyData(series) {
            let seriesMod = [];
            series.forEach((item, idx) => {
                seriesMod.push({ name: item[0], data: [{ x: idx, y: item[1] }] });
            });
            return seriesMod;
        }
        let series = generateData();
        let seriesMod = modifyData(series);
        console.log(seriesMod);
    </script>
</head>

<body>
    <div id="chart"></div>

    <script>

        var options = {
            series: seriesMod,
            chart: {
                height: 350,
                type: 'heatmap',
            },
            dataLabels: {
                enabled: false
            },
            colors: ["#008FFB"],
            title: {
                text: 'HeatMap Chart (Single color)'
            },
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();


    </script>


</body>

</html>

Alles anzeigen

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.

Blickwinkelkanone

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.

Sempervivum

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?

Blickwinkelkanone

Letzteres, also alle Einträge

Sempervivum

Dann müsste dieses es tun:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Simple HeatMap</title>

    <link href="../../assets/styles.css" rel="stylesheet" />

    <style>
        #chart {
            max-width: 1000px;
            margin: 35px auto;
        }
    </style>

    <script>
        window.Promise ||
            document.write(
                '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
            )
        window.Promise ||
            document.write(
                '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
            )
        window.Promise ||
            document.write(
                '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
            )
    </script>


    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>


    <script>
        // Diese Funktion generiert Daten entsprechend dem Muster, das Du gepostet hast:
        function generateData() {
            const count = 500;
            let series = [];
            let i = 0;
            let time = new Date('2020-07-22 00:00:00');
            const yrange = { min: 1, max: 10 };
            while (i < count) {
                let timeStr = time.toLocaleString('de-DE');
                let weekDayStr = time.toLocaleString('de-DE', { weekday: 'long' });
                var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

                series.push([timeStr, y, weekDayStr]);
                i++;
                time.setMinutes(time.getMinutes() + 30);
            }
            return series;
        }
        // Diese Funktion modifiziert die Daten so, dass eine Matrix heraus kommt
        // mit der Uhrzeit auf der x-Achse und dem Wochentag auf der Vertikalen:
        function modifyData(series) {
            function makeData(inData) {
                let outData = [];
                for (key in inData) {
                    outData.push({ x: key, y: inData[key] })
                }
                return outData;
            }
            let tempObj = {};
            series.forEach((item, idx) => {
                // Aktuelle Daten in Variablen bereit stellen
                let weekday = item[2], dt = item[0], val = item[1];
                time = dt.split(' ')[1];
                if (!tempObj[weekday]) {
                    tempObj[weekday] = {};
                    tempObj[weekday][time] = val;
                } else {
                    if (!tempObj[weekday][time]) {
                        tempObj[weekday][time] = val;
                    } else {
                        tempObj[weekday][time] += val;
                    }
                }
            });
            console.log(tempObj);
            let seriesMod = [];
            seriesMod.push({ name: 'Montag', data: makeData(tempObj.Montag) });
            seriesMod.push({ name: 'Dienstag', data: makeData(tempObj.Dienstag) });
            seriesMod.push({ name: 'Mittwoch', data: makeData(tempObj.Mittwoch) });
            seriesMod.push({ name: 'Donnerstag', data: makeData(tempObj.Donnerstag) });
            seriesMod.push({ name: 'Freitag', data: makeData(tempObj.Freitag) });
            seriesMod.push({ name: 'Samstag', data: makeData(tempObj.Samstag) });
            seriesMod.push({ name: 'Sonntag', data: makeData(tempObj.Sonntag) });
            return seriesMod;
        }
        let series = generateData();
        console.log(series);
        let seriesMod = modifyData(series);
        console.log(seriesMod);
    </script>
</head>

<body>
    <div id="chart"></div>

    <script>

        var options = {
            series: seriesMod,
            chart: {
                height: 700,
                type: 'heatmap',
            },
            dataLabels: {
                enabled: false
            },
            colors: ["#008FFB"],
            title: {
                text: 'HeatMap Chart (Single color)'
            },
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();


    </script>


</body>

</html>

Alles anzeigen

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

Blickwinkelkanone

Wow.

Einfach klasse. Ich werde mir mal den Code genauer angucken, wie du das gemacht hast.,

Jetzt nur noc die Daten aus der Datenbank da rein und es klappt, wie ich will.

Blickwinkelkanone

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

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?

Sempervivum

Die erste Funktion generateData und ihren Aufruf brauchst Du ja gar nicht, denn das war nur für mich, um Testdaten zu haben. Also statt dessen nur dein Array an Javascript übergeben wie in Posting #2, der erste Abschnitt, beschrieben.

Blickwinkelkanone

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

$array2d = $sql_zeiten->fetchAll();

Dann füge ich es wie folgt hinzu.

JavaScript

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

Was verstehe ich hier falsch von deinem Post.

Anbei mal der komplette Quellcode mit Array Daten

JavaScript

Alles anzeigen

Sempervivum

Eigentlich alles richtig, nur in deiner Tabelle oben in Posting #4 steht auch noch der Wochentag und meine Konvertierungsfunktion braucht den. Also entweder Du fügst ihn im PHP hinzu oder wir ermitteln ihn im Javascript in der Konvertierungsfunktion.

Sempervivum

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

Code

            //let series = true;
            console.log(array2d);
            let seriesMod = modifyData(array2d);
            console.log(seriesMod);

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

Blickwinkelkanone

Danke für die Erläuterung und Korrektur.

Nun habe ich die Daten drin. Jetzt muss ich nur noch das Array erweitern mit 0 Werten für Wochentage und Uhrzeiten wo keine Dtaen gefunden werden.

Aber das bekomme ich dann wieder alleine hin

Danke sehr für deine Utnerstützung, geduld und Mühe

Top!

Sempervivum

Heißt das, dass es soweit funktioniert, dass der Chart jetzt angezeigt wird?

Blickwinkelkanone

Ja, funktioniert soweit.

Da die Daten noch nicht komplett sind (die ganzen 0 Werte für Uhrzeiten, die nicht in der Datenbank sind) müssen noch ins Array.

Das mache ich aber im Laufe des TAges.

Im Mament sieht es so aus.

html-seminar.de/woltlab/attachment/2571/

Nochmals vielen Dank für deine kompetnete Hilfe!

Grüße

Blickwinkelkanone

Jetzt mitmachen!