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>