Showing charts while going through PHP IF loop - php

I'm working on showing the data from the DB using html table and google charts.
In one part of the script im using an IF loop,that is very important.It operates the things that's gonna be shown on the screen.But the IF loop doesn't work like it should be.
<?php if($IF==3){ ?>
<div class='row'>
<div class='col-md-4'>
<div id="first" style="width: 900px; height: 500px;"></div>
</div>
<div class='col-md-4'>
<div id="second" style="width: 900px; height: 500px;"></div>
</div>
<div class='col-md-4'>
<div id="third" style="width: 900px; height: 500px;"></div>
</div>
</div>
<?php
} else if($IF==2){ ?>
<div class='row'>
<div class='col-md-6'>
<div id="first" style="width: 900px; height: 500px;"></div>
</div>
<div class='col-md-6'>
<div id="second" style="width: 900px; height: 500px;"></div>
</div>
</div>
<?php }else{?>
<div class='row'>
<div class='col-md-12'>
<div id="first" style="width: 900px; height: 500px;"></div>
</div>
</div>
<?php } ?>
Let's explain what i wanted to do here.If the variable $IF equals 3 (number of employees) it shows 3 pie charts,and this part works.It shows the right data and the right amount of pie charts.
But the problem appears when $IF<2.
The pie charts won't show.
Am i doing this the wrong way?
Thx in advance.

I've solved the problem,when I was creating the charts for 3 employees i had to send 3 different types of data in the script.BUT,when there were only 2 or 1 employee the variables that saved the data for the second or third were empty,and that created an error.It couldn't create a chart when the variables were empty.So i just added a simple IF loop to manage that

Related

I cannot make php to replace a <p> text by my $_SESSION['userlogged'] value

I have tried
<?php session_start(); ?>
.
.
.
<p><?php $_SESSION['loggeduser']; ?>;</p>
I have also tried this JS after the
<script type="text/javascript">
let vuser = '<%= session.getAttribute("loggeduser") %>';
document.getElementById("userid").value= "Not set";
</script>
If someone can tell me what am I doing wrong please!
This is my full body code:
<body>
<section id="MyHeader" style="border:solid red thin;">
<div id="TheHead" style="width:80%; display:inline-block;">
<div id="HeadImg" style="width: 100px; height:100px;">
<a href="main.html">
<img src="../images/icon-redcross.png" alt="AGR">
</a>
</div>
<div id="HeadLegend">
<div id="AGRbrand"><h1>AGR</h1></div>
<div id="quote">
<span style="font-size: small;"><i>Properties catalogue</i></span>
</div>
</div>
</div>
<div id="user" style="display:inline-block; width:12%; height:25px;">
<p id="userid" style="width:100%;"><?php $_SESSION['loggeduser'];?></p>
<script type="text/javascript">
let vuser = '<%= session.getAttribute("loggeduser") %>';
document.getElementById("userid").value= "Not set";
</script>
</div>
<div style="width:100%; display:block;">
<div id="MenuButtons" style="width:80%; display:flex; justify-content:right;">
<div id="newbtn" class="TopButton">New</div>
<div id="exitbtn" class="TopButton">Exit</div>
</div>
</div>
<div class="Subtitle">
<div style="display: flex; justify-content: left; width:100%;">
<h4>Properties</h4>
</div>
</div>
</section>
<div id="Estates" class="pagebreak"></div>
<section id="MyPage">
<div id="Home"></div>
<div class="page" style="width:100%; background-color: white; ">
<div style="display: flex; justify-content:center; width:100%;">
<div class="ServiceBox">
<div class="div-img">
<img src="../../images/house-B.png" alt="AGR">
</div>
<div class="div-info">
</div>
<div class="div-desc">
</div>
<div class="div-btns">
<a class="SideButton" href="Edit.html">Edit</a>
<a class="SideButton" href="Delete.html">Delete</a>
<a class="SideButton" href="pdf-file.html">Pdf</a>
</div>
</div>
</div>
</div>
</section>
</body>
Notes: $_SESSION["loggeduser"] is populated before this page,at the login page; I verified the variable was properly set by a log file I have, and I was able to see the value printed in the log, after the user logs in and before this page is loaded.
Not sure if it is the php version or the goDaddy servers, but in my case the problem was, I was using html extension for the files, I changed them to .php extension and the php code started to work.

How do I align different size images

I'm trying to write a page with different size images but can't figure out how to align them properly.
This is how the web-page looks:
https://i.imgur.com/Li17CMl.jpg
I have added bootstrap img-fluid for responsiveness. If i set fixed height images wont scale down properly on smaller screens.
I cleaned some non related data with '...' just to make code look cleaner.
My current code:
foreach(row...) : ?>
<div class="col-md-6" style="padding...">
<div class="card">
<div class="card-body" style="padding...">
<a href="">
<div>
<img class="img-fluid" style="width: 100%;" src="row->image..." alt="">
</div>
<div>
<h5> title </h1>
<h6> date </h6>
</div>
</a>
</div> <!-- /card body -->
</div> <!-- /card -->
</div> <!-- /col-6 -->
<?php endforeach; ?>
I'm hoping that images will scale down on smaller screens.
TL:DR object-fit: cover; will do the trick.
Solution 1 - FIXED HEIGHT
with this solution you have to set value for the height of the images: the photos won't stretch but the ratio will be different for each screen
.img-fluid {
height: 200px; /* insert here your desired height*/
object-fit:cover;
}
Solution 2 - REAL FLUID
this solution is a little trickier but the photos will have always the ratio you will choose.
.card-body a div:first-child {
position: relative;
width: 100%;
height: 0;
padding-top: 60%; /*insert value for the desired ratio. ie: 60% -> 10/6 image*/
}
.img-fluid {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Please use below code:
.img-card img{width:100%;height:300px;object-fit:cover;}
.img-card{margin-bottom:15px;margin-top:15px;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-6">
<div class="img-card">
<img src="https://i.ytimg.com/vi/VDNd4KjELkU/maxresdefault.jpg" />
</div>
</div>
<div class="col-6">
<div class="img-card">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0f/5e/fc/f5/inkaya-cinari.jpg" />
</div>
</div>
<div class="col-6">
<div class="img-card">
<img src="https://thumbs.dreamstime.com/z/scenery-5680647.jpg" />
</div>
</div>
<div class="col-6">
<div class="img-card">
<img src="https://cdn.pixabay.com/photo/2015/11/11/03/47/evening-1038148__340.jpg" />
</div>
</div>
</div>
</div>

PHP conditions and loops are breaking html formatting

I'm trying to convert my html template into a php script that simply takes returned database values and uses comparisons on certain values to place the correct content in the placeholders.
The data is being returned properly and is showing on the page but my html formatting is breaking.
This should output a very simple format of a container row, 2 half-width columns each of which with its own internal div like this:
<div class="row middle">
<div class="col-lg-6 leftFifty">
<div class="leftContent" style="background-color: white; height: 100%; ">
Content
</div>
</div>
<div class="col-lg-6 rightFifty">
<div class="rightContent" style="background-color: white; height: 100%; ">
Content
</div>
</div>
</div>
But when I add in the PHP conditions it breaks the format completely including anything included after this section
<div class="row middle">
<?php foreach($panelResult as $PR): ?>
<div class="col-lg-6 leftFifty">
<?php if($PR['panel_type_id'] == 2){ ?>
<div class="leftContent" style="background-color: white; height: 100%; ">
<?php echo $PR['content']?>
</div>
</div>
<div class="col-lg-6 rightFifty">
<?php } elseif($PR['panel_type_id'] == 3){?>
<div class="rightContent" style="background-color: white; height: 100%; ">
<?php echo $PR['content'] ?>
</div>
<?php } ?>
</div>
<?php endforeach; ?>
</div>
<!--This div is not showing-->
<div class="row bottom">
<div class="col-lg-12">
<div class="marquee"><h2>This is a test</h2></div>
</div>
</div>
For this page type, row-middle should exist, and both the leftFifty/leftContent class as well as the rightFifty and rightContent class should all exist.
The only reason I'm using the If statement is to make sure that the panel_type_id ==2 content fills the left div, and same for the right div if it equals 3.
How can I restructure this to retain the html formatting?

Align google chart to right

https://imgur.com/a/IhONUvY
here is a screenshot of my problem, there's 2 pie charts above each other, how do i make them go next to each other? I am using the google api for charts
Would this be a html or css edit? if so how would I go about changing where it is?
Im using SB admin 2 as a template, ive tried using tabs but im either not using them correctly or they're just not having it
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4">
<div id="top5os" style="width: 700px; height: 300px; background:red;"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div id="top5country" style="width: 700px; height: 300px; background:blue;"></div>
</div>
</div>
</div>
use css like
div.container{
align: right;
or
float: right;
}
if neither of those work you can say
div.container{
position: fixed;
and
left: 900px;
}

My php page will display my html header include in the dreamweaver preview but not in a browser

The snippet of include code in my php file looks like this.
<div id="header">
<!--#include virtual="includes/frontpage_header.html" -->
</div>
And my frontpage_header.html code looks like this.
<div style="float: left; width: 30%;"><img id="headerlogo" src="../images/DynamicHomes45th.png" alt="Dynamic Homes Logo"/>
</div>
<div style="float: left; width: 33%;">
<h1>QUALITY CUSTOM BUILT HOMES</h1>
</div>
<div style="float: right; width: 33%;">
<div id="headernav">
<div id="whybuild">
<h2>WHY BUILD DYNAMIC</h2>
<img src="../images/whybuildicon.png" alt=""/> </div>
<div id="gallery">
<h2>GALLERY</h2>
<img src="../images/galleryicon.png" width="43" height="43" alt=""/>
</div>
</div>
</div>
Like I said in the title, it will display in my dreamweaver's design view, but not in a browser. I'm not sure what's wrong.
Try including it like this using Php:
<div id="header">
<?php include("includes/frontpage_header.html"); ?>
</div>
Also it's worth making this frontpage_header file a .php rather than .html considering you are using Php elsewhere in your project.

Categories