Wednesday

Showing graph on click

11:53 PM css, html, javascript, php, plotly No comments

Issue

I'm working on a project for a time attendance system. Basically, I have a user registration system with admin verification. In the admin panel, I want to show working hours of workers by dates. I'm using Plotly.js for that. The problem is when I call onClick function by clicking button without adding return false; my graph disappears after a few seconds. If I add return false, then the graph shows; however, if I want to change to other worker, then the graph won't show and it would go wide right.

Here is the code:

    <?php
session_start();
// Include config file
require_once "conn.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<meta charset="UTF-8">
    <title>Admin pregled korisnika</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
    body{ font: 14px sans-serif;}
    .wrapper {
            width: 420px; padding: 20px;
            text-align:center;
            float: left;
            margin-left: 5%;
            width: 45%;
            margin-top: 10%;
            background-color: #191970   ;
            border-radius: 20px;
            box-shadow:20px 20px 30px grey;
            color:white;
    }
    .right {
        float:right;
    }
    #myPlot{width:40%;overflow:visible;margin-top:10%;}
    #users {
        //font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }
    
    #users td, th {
        border: 1px solid #191970;
        padding: 8px;
    }
    
    #users tr{background-color: white;color:#191970}
    
    
    #users th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #191970;
        color: white;
        text-align: center;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #191970;
            position: fixed;
            top: 0;
            width: 100%;
        }

        li {
            float: right;
            height:100%;
            border-left: 1px solid white;
            
        }
        li a {
            display: block;
            color: white;
            font-size: 16px;
            text-align: center;
            padding: 26px 33px;
            text-decoration: none;
            height:100%;
            vertical-align: middle;
        }
        li a:hover{
            background-color: white;
            -webkit-box-shadow:inset 0px 0px 0px 3px #191970;
            -moz-box-shadow:inset 0px 0px 0px 3px #191970;
            box-shadow:inset 0px 0px 0px 3px #191970;
            color:#191970;
            text-decoration: none;
            height:100%;
            vertical-align: middle;
        }
        .dugme{
            margin: auto 3%;
            background-color: #191970;
            color: white;
            padding: 8px 16px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            transition-duration: 0.4s;
            cursor: pointer;
            border-radius: 4px;
            border-style: solid;
            border-width: 3px;
            border-color: #191970;
        }
        .dugme:hover {
            background-color: white;
            color: #191970;
            border-style: solid;
            border-width: 3px;
            border-color: #191970;
            border-radius: 4px;
     }
  </style>
</head>
<body>
    <ul> 
        <a href="#" class="navbar-brand">
            <img src="https://i.imgur.com/E0uimCR.png" height="58" alt="CoolBrand">
        </a>
        <li><b><a href="logout.php">ODJAVI SE</a></b></li>
        <li><b><a href="admin.php">ADMIN</a></b></li>
    </ul>
    
<div class="wrapper">
    
    <h1>Pregled korisnika: </h1>

    <table id = "users">
        <tr>
            <th>Id</th>
            <th>Korisničko ime</th>
            <th>Ime</th>
            <th>Prezime</th>
        </tr>

        <?php
            $query = "SELECT * FROM korisnici WHERE stat = 1 ORDER BY id ASC";
            $result = mysqli_query($conn, $query);
            while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
        ?>
        <tr>
            <td><?php echo $row['id'];?></td>
            <td>
                <form action ="aktivnosti.php" method ="POST">
                    <button class="dugme" onclick="getVrijeme(); return false;" name  ="uname" value = "<?php echo $row['uname'];?>"/><?php echo $row['uname'];?></button>
                    
                </form>
            </td>
            <td><?php echo $row['ime'];?></td>
            <td><?php echo $row['prezime'];?></td>
        </tr>
    

    <?php
            }
            ?>
            </table>
</div>

<?php

if(isset($_POST['uname'])){
    require_once "conn.php";
    $uname = $_POST['uname'];
    $string1 = $string2 = $string3 = "";
    $mysqli_qry = "SELECT * FROM $uname";
    $result2 = mysqli_query($conn,$mysqli_qry);
    if ($br=mysqli_num_rows($result2) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result2)) {
        $string1 = $string1. $row["datum"] . "*";
        $string2= $string2. $row["vrijemerada"] . "*";
    }
}

}
?>

<div class="right"><div id="myPlot"></div></div>
    <script>
        function getVrijeme(){
    var data1 = <?php echo json_encode($string1,JSON_HEX_TAG);?>;
    var data2 = <?php echo json_encode($string2,JSON_HEX_TAG);?>;
    var poz1=[];
    var poz2=[];
    var j=0;
    for(var i=0;i<data1.length;i++){
        if(data1[i]=='*'){
            poz1[j++]=i;
        }
    }
    j=0;
    for(var i=0;i<data2.length;i++){
        if(data2[i]=='*'){
            poz2[j++]=i;
        }
    }
    var radnovr=[];
    var datumi=[];
    radnovr[0]=data1.substring(0,poz1[0]);
    datumi[0]=data2.substring(0,poz2[0]);
    for(i=1;i<poz1.length;i++){
        radnovr[i]=data1.substring(poz1[i-1]+1,poz1[i]);
    }
    for(i=1;i<poz2.length;i++){
        datumi[i]=data2.substring(poz2[i-1]+1,poz2[i]);
    }
    var data = [{
        x: radnovr,
        y: datumi,
        type: "bar",
        }];
    var layout = {
        xaxis: {title: "Datumi"},
        yaxis: {title: "Provedeni sati"},
        title: "Provedeni sati na dnevnom nivou.",
        plot_bgcolor: "white",
        paper_bgcolor: "white"
    };

    Plotly.newPlot("myPlot", data, layout);
}
    </script>

</body>
</html>

EDIT: view source:


<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<meta charset="UTF-8">
    <title>Admin pregled korisnika</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
    body{ font: 14px sans-serif;}
    .wrapper {
            width: 420px; padding: 20px;
            text-align:center;
            float: left;
            margin-left: 5%;
            width: 45%;
            margin-top: 10%;
            background-color: #191970   ;
            border-radius: 20px;
            box-shadow:20px 20px 30px grey;
            color:white;
    }
    .right {
        float:right;
    }
    #myPlot{width:40%;overflow:visible;margin-top:10%;}
    #users {
        //font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }
    
    #users td, #customers th {
        border: 1px solid #191970;
        padding: 8px;
    }
    
    #users tr{background-color: white;color:#191970}
    
    
    #users th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #191970;
        color: white;
        text-align: center;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #191970;
            position: fixed;
            top: 0;
            width: 100%;
        }

        li {
            float: right;
            height:100%;
            border-left: 1px solid white;
            
        }
        li a {
            display: block;
            color: white;
            font-size: 16px;
            text-align: center;
            padding: 26px 33px;
            text-decoration: none;
            height:100%;
            vertical-align: middle;
        }
        li a:hover{
            background-color: white;
            -webkit-box-shadow:inset 0px 0px 0px 3px #191970;
            -moz-box-shadow:inset 0px 0px 0px 3px #191970;
            box-shadow:inset 0px 0px 0px 3px #191970;
            color:#191970;
            text-decoration: none;
            height:100%;
            vertical-align: middle;
        }
        .dugme{
            margin: auto 3%;
            background-color: #191970;
            color: white;
            padding: 8px 16px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            transition-duration: 0.4s;
            cursor: pointer;
            border-radius: 4px;
            border-style: solid;
            border-width: 3px;
            border-color: #191970;
        }
        .dugme:hover {
            background-color: white;
            color: #191970;
            border-style: solid;
            border-width: 3px;
            border-color: #191970;
            border-radius: 4px;
     }
  </style>
</head>
<body>
    <ul> 
        <a href="#" class="navbar-brand">
            <img src="https://i.imgur.com/E0uimCR.png" height="58" alt="CoolBrand">
        </a>
        <li><b><a href="logout.php">ODJAVI SE</a></b></li>
        <li><b><a href="admin.php">ADMIN</a></b></li>
    </ul>
    
<div class="wrapper">
    
    <h1>Korisnici koji čekaju dozvolu: </h1>

    <table id = "users">
        <tr>
            <th>Id</th>
            <th>Korisničko ime</th>
            <th>Ime</th>
            <th>Prezime</th>
        </tr>

                <tr>
            <td>1</td>
            <td>
                <form action ="aktivnosti.php" method ="POST">
                    <button class="dugme" onclick="getVrijeme(); return false;" name  ="uname" value = "marko"/>marko</button>
                    
                </form>
            </td>
            <td>marko</td>
            <td>srbin</td>
        </tr>
    

            <tr>
            <td>2</td>
            <td>
                <form action ="aktivnosti.php" method ="POST">
                    <button class="dugme" onclick="getVrijeme(); return false;" name  ="uname" value = "vale"/>vale</button>
                    
                </form>
            </td>
            <td>eee</td>
            <td>ddd</td>
        </tr>
    

            <tr>
            <td>3</td>
            <td>
                <form action ="aktivnosti.php" method ="POST">
                    <button class="dugme" onclick="getVrijeme(); return false;" name  ="uname" value = "dudule"/>dudule</button>
                    
                </form>
            </td>
            <td>duuuu</td>
            <td>leee</td>
        </tr>
    

                </table>
</div>


<div class="right"><div id="myPlot"></div></div>
    <script>
        function getVrijeme(){
    var data1 = "2021-11-04 *2021-11-05 *2021-11-06 *2021-11-07 *2021-11-08 *";
    var data2 = "3*4*2*1*5*";
    var poz1=[];
    var poz2=[];
    var j=0;
    for(var i=0;i<data1.length;i++){
        if(data1[i]=='*'){
            poz1[j++]=i;
        }
    }
    j=0;
    for(var i=0;i<data2.length;i++){
        if(data2[i]=='*'){
            poz2[j++]=i;
        }
    }
    var radnovr=[];
    var datumi=[];
    radnovr[0]=data1.substring(0,poz1[0]);
    datumi[0]=data2.substring(0,poz2[0]);
    for(i=1;i<poz1.length;i++){
        radnovr[i]=data1.substring(poz1[i-1]+1,poz1[i]);
    }
    for(i=1;i<poz2.length;i++){
        datumi[i]=data2.substring(poz2[i-1]+1,poz2[i]);
    }
    var data = [{
        x: radnovr,
        y: datumi,
        type: "bar",
        }];
    var layout = {
        xaxis: {title: "Datumi"},
        yaxis: {title: "Provedeni sati"},
        title: "Provedeni sati na dnevnom nivou.",
        plot_bgcolor: "white",
        paper_bgcolor: "white"
    };

    Plotly.newPlot("myPlot", data, layout);
}
    </script>

Solution

Whilst not a solution you might be able to work with this to proceed. The first and subsequent clicks do not now modify the page layout drastically as before and I have no doubt with some tweaks you'll get the layout you need/want.

document.querySelectorAll('button.dugme').forEach(bttn=>bttn.addEventListener('click',getVrijeme))

function getVrijeme() {
  var data1 = "2021-11-04 *2021-11-05 *2021-11-06 *2021-11-07 *2021-11-08 *";
  var data2 = "3*4*2*1*5*";
  var poz1 = poz2 = [];
  var j;
  
  j = 0;
  for (var i = 0; i < data1.length; i++) {
    if(data1[i] == '*') poz1[j++] = i;
  }
  
  
  j = 0;
  for (var i = 0; i < data2.length; i++) {
    if(data2[i] == '*') poz2[j++] = i;
  }
  
  var radnovr = [data1.substring(0, poz1[0])];
  var datumi = [data2.substring(0, poz2[0])];

  
  for (i = 1; i < poz1.length; i++) {
    radnovr[i] = data1.substring(poz1[i - 1] + 1, poz1[i]);
  }
  for (i = 1; i < poz2.length; i++) {
    datumi[i] = data2.substring(poz2[i - 1] + 1, poz2[i]);
  }
  
  
  var data = [{
    x: radnovr,
    y: datumi,
    type: "bar",
  }];
  
  
  var layout = {
    xaxis: { title: "Datumi" },
    yaxis: { title: "Provedeni sati" },
    title: "Provedeni sati na dnevnom nivou.",
    plot_bgcolor: "white",
    paper_bgcolor: "white"
  };

  Plotly.newPlot("myPlot", data, layout);
}

body,body *{
  box-sizing:border-box;
}
body{
  width:100%;height:100vh;margin:0;padding:0;
}

.wrapper {
  width:80%;
  padding: 1rem;
  text-align: center;
  float: left;
  margin:10% auto 0 1rem;
  background-color: #191970;
  border-radius: 20px;
  box-shadow: 20px 20px 30px grey;
  color: white;
}

.wrapper > div{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:center;
}

.wrapper > div > #users,
.wrapper > div > #myPlot{
  flex:1;
  align-self:flex-start;
  margin:1rem;
}


td > form > button{ width:80%; margin:0 auto; float:none; text-align:center; }










#users {
  border-collapse: collapse;
  width: 100%;
}

#users td,
#customers th {
  border: 1px solid #191970;
  padding: 8px;
}
#users tr {
  background-color: white;
  color: #191970
}
#users th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #191970;
  color: white;
  text-align: center;
}
.dugme {
  background-color: #191970;
  color: white;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 4px;
  border-style: solid;
  border-width: 3px;
  border-color: #191970;
}
.dugme:hover {
  background-color: white;
  color: #191970;
  border-style: solid;
  border-width: 3px;
  border-color: #191970;
  border-radius: 4px;
}

<script src="//cdn.plot.ly/plotly-latest.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />

<div class="wrapper">
  <h1>Korisnici koji čekaju dozvolu: </h1>
  <div>
    <table id="users">
      <tr>
        <th>Id</th>
        <th>Korisničko ime</th>
        <th>Ime</th>
        <th>Prezime</th>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <form action="aktivnosti.php" method="POST">
            <button type='button' class="dugme" name="uname" value="marko">marko</button>
          </form>
        </td>
        <td>marko</td>
        <td>srbin</td>
      </tr>
      <tr>
        <td>2</td>
        <td>
          <form action="aktivnosti.php" method="POST">
            <button type='button' class="dugme" name="uname" value="vale">vale</button>
          </form>
        </td>
        <td>eee</td>
        <td>ddd</td>
      </tr>
      <tr>
        <td>3</td>
        <td>
          <form action="aktivnosti.php" method="POST">
            <button type='button' class="dugme" name="uname" value="dudule">dudule</button>
          </form>
        </td>
        <td>duuuu</td>
        <td>leee</td>
      </tr>
    </table>
    <div id="myPlot"></div>
  </div>
</div>

Answered By - Professor Abronsius

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Wednesday

Showing graph on click

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels