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>
My Answer:
javascript
document.getElementById('showGraphBtn').addEventListener('click', function() {
// Code to fetch data and generate graph using Plotly.js
// This is just a placeholder code
var data = [{
x: [1, 2, 3, 4, 5],
y: [1, 2, 3, 4, 5],
type: 'scatter'
}];
Plotly.newPlot('graph', data);
// return false; // Uncomment this line to prevent graph from disappearing
});
In this code snippet, you can see the event listener for the button click event. Inside the event handler function, you can fetch the data for the selected worker and generate the graph using Plotly.js.
If you uncomment the `return false;` statement, the graph will not disappear after a few seconds. However, if you want to switch to another worker and generate a new graph, you may encounter issues.
One way to solve this issue is to clear the existing graph before generating a new one. You can do this by calling `Plotly.purge('graph');` before calling `Plotly.newPlot('graph', data);`.
javascript
document.getElementById('showGraphBtn').addEventListener('click', function() {
// Clear existing graph
Plotly.purge('graph');
// Code to fetch data and generate graph using Plotly.js
// This is just a placeholder code
var data = [{
x: [1, 2, 3, 4, 5],
y: [1, 2, 3, 4, 5],
type: 'scatter'
}];
Plotly.newPlot('graph', data);
// return false; // Uncomment this line to prevent graph from disappearing
});
By clearing the existing graph before generating a new one, you can avoid the issue of the graph disappearing or going wide right when switching between workers.
Rate this post
5 of 5 based on 5575 votesComments