PHP MYSQL HTML Dashboard (tabelle und javascript chart)

aytugbas20

aytugbas20

Neues Mitglied
Hallo zusammen,

Ich habe eine MySQL-Tabelle wie auf dem Bild. Ich möchte mit Javascript und HTML eine Datentabelle für ID, Sektor und Anzahl der Mitarbeiter erstellen und ein Liniendiagramm aus Punktzahlen mit Zeilenwerten . Ich habe ein Search bar erstellt und möchte nur ausgewählte Zeilendaten wie auf dem Bild anzeigen, ein Dashboard durch flexbox erstellen und in meine WordPress-Site einbetten. Halten Sie das für möglich?
tabelle.JPG

dash.JPG

Mit PHP sieht das Ergebnis wie folgt aus:
result.JPG

PHP code;
Code: 
<!DOCTYPE html>
<html>
<head>
<title>Search Bar using PHP</title>
<style type="text/css">
#searchbar {
    background: url(search-white.png) no-repeat 10px 6px #F0F8FF;
    border: 1px solid #000000;
    font: bold 16px Arial,Helvetica,Sans-serif;
    color: #000000;
    width: 150px;
    padding: 6px 15px 6px 35px;

}
#searchBtn {
    border:1px solid #000000;
    font-size: 16px;
    padding: 6px;
    background: #F0F8FF;
    font-weight: bold;
    cursor: pointor;
    outline: none;

</style>
</head>
<body>

<form method="post">
<label></label>
<input type="text" name="id" id="searchbar" placeholder="Search" maxlength="25" autocomplete="off" onmousedown="" onblur="">
<input type="submit" name="submit" id="searchBtn">
 
</form>

</body>
</html>

<?php

$con = new PDO("mysql:host=localhost;dbname=score",'root','');

if (isset($_POST["submit"])) {
    $str = $_POST["id"];
    $sth = $con->prepare("SELECT * FROM `test` WHERE ID = '$str'");

    $sth->setFetchMode(PDO:: FETCH_OBJ);
    $sth -> execute();



    if($row = $sth->fetch())
    {
        $data1 = array($row->id , $row->sector, $row->employees, $row->score2020);
        $data2 = array($row->score2016 , $row->score2017, $row->score2018, $row->score2019,$row->score2020);
        echo json_encode($data1);
        echo json_encode($data2);
   
    }
         
        else{
            echo "Name Does not exist";
        }


}

?>

Wie kann ich weitermachen? Ich würde mich freuen, wenn Sie helfen könnten.
 
Zuletzt bearbeitet:
Zurück
Oben Unten