✔ Verwendung von SQL-Daten in einem Liniendiagramm

S

SVulpecula

Grünschnabel
Hey,

folgendes möchte ich machen:

Ich möchte ein Liniendiagramm mit Daten aus einer MySQL-Datenbank befüllen. Hier ist mein Code bis jetzt:

Javascript: 
<?php
$pdo = new PDO('mysql:host=localhost;dbname=test', '', '');

$sql = "SELECT Anzahl, Lizenzgrenze FROM anzahljobs";
foreach ($pdo->query($sql) as $row) {
   echo $row['Anzahl']." ".$row['Lizenzgrenze'].;
}
      
$statement = $pdo->prepare("SELECT UNIX_TIMESTAMP(Datum) AS zeitpunkt, Lizenzgrenze FROM tabelle");
$statement->execute(array());  
while($row = $statement->fetch()) {
   echo date('d.m.y H:i:s', $row['zeitpunkt']));
   echo $row["Lizenzgrenze"];
   }
$pdo = null;  

?>   

    var anzahljobs = [
    [<?php echo $zeitpunkt ?>, <?php echo $anzahl ?>]
 /*
        [1167696000000, 16800],
        [1167782400000, 16500],
        [1167868800000, 16300],
        [1167955200000, 16500],
        [1168041600000, 16800],
        [1168128000000, 17000],
        [1168214400000, 16500],
        [1168300800000, 16800],
        [1168387200000, 17000],
        [1168473600000, 17100],    Mit diesen Daten wurde das Diagramm auf dem Bild befüllt*/ 
        ]; 
   
    var lizenz = [
    [<?php echo $zeitpunkt ?>, <?php echo $Lizenzgrenze ?>]
     /*
        [1167696000000, 17500],
        [1167782400000, 17500],
        [1167868800000, 17500],
        [1167955200000, 17500],
        [1168041600000, 17500],
        [1168128000000, 17500],
        [1168214400000, 17500],
        [1168300800000, 17500],
        [1168387200000, 17500],
        [1168473600000, 17500], Mit diesen Daten wurde das Diagramm auf dem Bild befüllt */
        ];

So sollte das ganze dann aussehen:
liniendiagramm.JPG

Ich hoffe jemand nimmt sich die Zeit mir zu helfen. Ich hab schon viel rumprobiert und gelesen aber es funktioniert nicht.
 
Dafür gibt es gebrauchsfertige Skripts, z. B. dieses hier:
http://www.chartjs.org
Wenn Du Probleme bei der Anwendung hast, dann melde dich wieder.
Edit: Wie hast Du denn dieses Liniendiagramm erzeugt? Hast Du schon solch ein Charting-Skript und dein Problem ist, wie Du es mit dem Ergebnis der Datenbankabfrage befüllst? Dann müsstest Du posten, um welches Skript es sich handelt, damit man weiß, wie die Daten strukturiert sein müssen.
 
Zuletzt bearbeitet:
Das Diagramm ist durch ein Bootstrap-Framework, welches speziell für das einrichten von Dashboards gedacht ist, erzeugt. https://startbootstrap.com/template-overviews/sb-admin-2/
Ich kann euch mal den "original-code" aus dem Daten.js für das Diagramm zeigen:
(hab ich ja auch schon oben in "angepasster form")

Javascript: 
//Flot Line Chart
$(document).ready(function() {

    var offset = 0;
    plot();

    function plot() {
        var sin = [],
            cos = [];
        for (var i = 0; i < 12; i += 0.2) {
            sin.push([i, Math.sin(i + offset)]);
            cos.push([i, Math.cos(i + offset)]);
        }

        var options = {
            series: {
                lines: {
                    show: true
                },
                points: {
                    show: true
                }
            },
            grid: {
                hoverable: true //IMPORTANT! this is needed for tooltip to work
            },
            yaxis: {
                min: -1.2,
                max: 1.2
            },
            tooltip: true,
            tooltipOpts: {
                content: "'%s' of %x.1 is %y.4",
                shifts: {
                    x: -60,
                    y: 25
                }
            }
        };

        var plotObj = $.plot($("#flot-line-chart"), [{
                data: sin,
                label: "sin(x)"
            }, {
                data: cos,
                label: "cos(x)"
            }],
            options);
    }
});

oder was meinst du? Mit sonstigen Codeausschnitten wird es kritisch, weil das alles irre lange js-dateien sind :S
 
Mein Problem ist konkret: wie kriege ich die Daten aus der Datenbank und im passenden Format in das Chart?

was sich jetzt zusätzlich als Problem herauskristallisiert hat, das mein XXAMP scheinbar nicht willig ist php anzunehmen.
(Habe das jetzt mit einem ganz simplen html+php script getestet)

zb.
<?php echo "hallo" ?>

wird dann im browser (unter f12 zu erkennen) zu

<!-- php echo"hallo" -->

schonmal gehabt? oder eine Idee wie man das lösen könnte?
 
Meine Kenntnisse in MySQL sind gering, warte erst Mal ab, bis sich jemand anders mit erweiterten Kenntnissen meldet. Wenn nicht, versuche ich es.
 
Dann probiere ich es mal:
Code: 
    <?php
    $pdo = new PDO('mysql:host=localhost;dbname=test', '', '');

    $statement = $pdo->prepare("SELECT UNIX_TIMESTAMP(Datum) AS zeitpunkt FROM tabelle");
    $statement->execute(array());
    $times = $statement->fetchAll();

    $sql = "SELECT Anzahl, Lizenzgrenze FROM anzahljobs";
    $i = 0;
    $anzahljobs = [];
    $lizenz = [];
    foreach ($pdo->query($sql) as $row) {
       $anzahljobs[$i] = [$times[$i], $row['Anzahl']];
       $lizenz[$i] = [$times[$i], $row['Lizenzgrenze']];
       $i++;
    }

    $pdo = null;

    $anzahljobs_json = json_encode($anzahljobs);
    $lizenz_json = json_encode($lizenz);
    ?>
    <script>
        var anzahljobs = <?php echo $anzahljobs_json; ?>;
        var lizenz = <?php echo $anzahljobs_json; ?>;
        // diese Arrays kannst Du dann als Daten für die Charts verwenden
        // also im weiteren Verlauf wahrscheinlich so:
        var plotObj = $.plot($("#flot-line-chart"), [{
            data: anzahljobs,
            label: "Anzahl Jobs"
        }, {
            data: lizenz,
            label: "Durch Lizenzen gedeckt"
        }],
        options);

    </script>
 
Hey,

vielen Dank das du dir die Mühe gemacht hast das um so eine Uhrzeit noch zu schreiben, mega lieb. :) Hab leider erst gerade gesehen das jemand hierzu noch geantwortet hat :/ hab es jetzt folgenedermaßen:

PHP: 
<?php

$verbindung = new PDO('mysql:host=localhost;dbname=test', '', '');

    echo "var anzahljobs=["; 
    $sql = "SELECT * FROM jobanzahl";
    foreach ($verbindung->query($sql) as $row) {
       echo "[";
        echo strtotime($row["Datum und Uhrzeit"])."000, "; // die nullen wandeln den unix-timestamp in den geforderten POSIX-timestamp um
        echo $row["Anzahl"]."],";
        }
    echo "]";
 
    echo ";<br/>"; 
    echo "var lizenz =["; 
    $sql = "SELECT * FROM jobanzahl";
    foreach ($verbindung->query($sql) as $row) {
       echo "[";
        echo strtotime($row["Datum und Uhrzeit"])."000, "; // die nullen wandeln den unix-timestamp in den geforderten POSIX-timestamp um
        echo $row["Lizenzgrenze"]."], ";
        }
    echo "];"; 
 
     $verbindung = null;
   
?>

und in meiner "testausgabedatei" wird das ganze auch exakt in dem format ausgegeben wie das beispiel... trotzdem sobald ich auf "launch in chrome gehe" zeigt es keine grafiken mehr an :(( Hast du oder jemand anders eine idee woran das liegen könnte?

bei beiden möglichkeiten, also einmal unter
file:///D:/XAMPP/htdocs/testitest/pages/index.html
oder
localhostfile/testitest/pages/index.html
 
Mit deinem Code gibst Du mit echo das Array in JSON-Darstellung aus. Für das Javascript brauchst Du jedoch ein Array und keinen String. Ich empfehle, es wie in meinem Vorschlag zu machen, d. h. aus der Datenbankabfrage zwei echte Arrays zu erzeugen und diese über JSON an Javascript zu übergeben
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück