For some reason my chart will not load up . The user enters a date , php send query to mysql that recieves data and displays a table, underneath that table i want a chart to be displayed using the google API's. Can someone please help here is my code.
<!doctype html>
<html>
<head>
<!-- links to scripit for jquery drop down calendar -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src= "//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- links to CSS style sheets -->
<link href="styles/main.css" rel="stylesheet" type="text/css">
<link href="styles/date.css" rel="stylesheet" type="text/css">
<link href="styles/date2.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<title>Cartridge Details</title>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/short-stack:n4:default;abel:n4:default;annie-use- your-telescope:n4:default.js" type="text/javascript"></script>
</head>
<!-- php connection to database to query table for Cartridge Details -->
<?php
$username = "root";
$password = "*******";
$hostname = "localhost";
$my_db = "print_consump";
//connection to the database
$dbhandle = mysqli_connect($hostname, $username, $password, $my_db)
or die("Unable to connect to MySQL");
echo "cond";
?>
<body>
<div class="divH">
<header id="heading1">Cartridge Details</heade>
</div>
<div class="LinkedPages">
<form method="post" action="cartridgedetails.php" name="frm1">
<div>
Date:<input type="text" name="YEAR" value="Enter Year (i.e '2013')">
<input type="submit" value="submit">
</div>
</form>
<span></span>
<?php
//formula for toner usage total pages/35000 = #toner used for month
if(isset($_POST["YEAR"])) {
$year = $_POST['YEAR'];
$result = mysqli_query($dbhandle,"SELECT `Servers`, `Total Pages` / 35000 FROM summaryofserver WHERE
RIGHT(Servers,4) = '$year'");
$data = array(array('Server, Month, Year', 'Number of Toner Cartridges Used'));
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row[0] . "</td>";
echo "<td>" . $row[1] . "</td>";
echo "</tr>";
$data[] = array($row[0], $row[1]);
}
}
?>
<script>
function drawChart () {
var data = google.visualization.arrayToDataTable(<?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>);
// draw a ColumnChart
// you can change this to whatever chart type you need
var chart = new google.visualization.ColumnChart(document.querySelector('#myChart'));
chart.draw(data, {
// chart options, eg:
height: 400,
width: 600
});
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
</script>
<div id="myChart"></div>
</div>
</body>
</html>
Related
Im trying to echo the information that is inserted to my database. As im pretty new to coding php im not really sure how i could manage to do this. My database name is "nyheter" and the table is "post". So i want to selecte the data from db and echo it on the page.
<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$link = mysqli_connect("localhost", "root", "", "nyheter");
// Check connection
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
//get results from database
$result = mysqli_query($connection,"SELECT * FROM post");
$all_property = array(); //declare an array for saving property
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<link rel="stylesheet" href="nyheter.css" type="text/css" />
<link rel="stylesheet" href="read.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.dynamicmaxheight.js"></script>
</head>
<body>
<div class="allt-2">
<div class="content">
<img src="http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png"/ alt="" >
<h3><?php echo $Name?></h3>
</div>
<section class="section js-dynamic-height" data-maxheight="150" >
<p class="dynamic-height-wrap"> Hej
</p>
<button class="js-dynamic-show-hide button" title="Läs mer" data-replace-text="Läs mindre">Läs mer</button>
</section>
<img class="ny-img" src="http://placehold.it/500x320"/>
</div>
</body>
<script>
$(document).ready(function(){
$('.js-dynamic-height').dynamicMaxHeight();
});
</script>
</body>
</html>
You're selecting everything from the database. So you've to use a loop to display the content you've selected from the database.
Write something similar to this:
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo "name: " . $row["name"]."<br>";
}
} else {
echo "0 results";
}
mysqli_close($conn); ?>
Hope this was helpful.
Here's my codes
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Control Panel</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="css/nprogress.css" rel="stylesheet">
<!-- iCheck -->
<link href="css/green.css" rel="stylesheet">
<!-- Datatables -->
<link href="css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="css/fixedHeader.bootstrap.min.css" rel="stylesheet">
<link href="css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="css/scroller.bootstrap.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div class="col-md-12 left_col">
<div class="left_col scroll-view">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_content">
<table id="datatable-buttons" class="table table-striped table-bordered">
<thead>
<tr>
<th>S/N</th>
<th>Date</th>
<th>IP Address</th>
<th>Activation</th>
</tr>
</thead>
<tbody>
<tr>
<td>get data from db</td>
<td>get data from db</td>
<td>get data from db</td>
<td>get data from db</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="js/fastclick.js"></script>
<!-- NProgress -->
<script src="js/nprogress.js"></script>
<!-- iCheck -->
<script src="js/icheck.min.js"></script>
<!-- Datatables -->
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.min.js"></script>
<script src="js/dataTables.buttons.min.js"></script>
<script src="js/buttons.bootstrap.min.js"></script>
<script src="js/buttons.flash.min.js"></script>
<script src="js/buttons.html5.min.js"></script>
<script src="js/buttons.print.min.js"></script>
<script src="js/dataTables.fixedHeader.min.js"></script>
<script src="js/dataTables.keyTable.min.js"></script>
<script src="js/dataTables.responsive.min.js"></script>
<script src="js/responsive.bootstrap.js"></script>
<script src="js/dataTables.scroller.min.js"></script>
<script src="js/jszip.min.js"></script>
<script src="js/pdfmake.min.js"></script>
<script src="js/vfs_fonts.js"></script>
<!-- Custom Theme Scripts -->
<script src="js/custom.min.js"></script>
</body>
</html>
PHP
<?php
$servername = "remotedbIP";
$username = "root";
$password = "Password";
$dbname = "installation";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, date, ip, activate FROM software";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "id: " . $row["id"]. " - date: " . $row["date"]. " - ip: " . $row["ip"]. " - activate: " . $row["activate"]. " <br>";
}
} else {
echo "0 results";
}
$conn->close();
?>
I am trying to display the data retrieved by the php file using the html table format with bootstrap. I am not sure how to do that. I tried to follow a few guidelines but I couldn't figure out. Any direction towards the right guideline or help would be really appreciated.
Also I am trying to hide the ID from the mysql db and instead show a locally displayed serial number, is it possible to achieve that, if yes how?
Thank you so much.
Step 1 .Put your database connection codes in database_connection.php
$servername = "remotedbIP";
$username = "root";
$password = "Password";
$dbname = "installation";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
Step 2. Than include the connection in header of index page
include("database_connection.php");
Step 3. add these php code inside table tbody And remove the previous codes
<?php
$sql = "SELECT id, date, ip, activate FROM software";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td> $row['id'] </td>";
echo "<td> $row['date'] </td>";
echo "<td> $row['ip'] </td>";
echo "<td> $row['activate'] </td>";
echo "</tr>";
}
} else {
echo "0 results";
}
$conn->close();
?>
The problem is that I have an html table with short info about employees that is taken from MySQL database. I'm trying to make a button with some ID that will open a modal window with full info about employee with the same value in it's field called 'ButtonID'. I tried to make desired query and set it to some variable in php and then access it in javascript but it didn't end well.
<!--
in <input id = "1" type="button" value="Full Info" input id equals to sql
'ButtonID' fields value
-->
Edit:
<form action="">
<input id = "1" type="button" value="Full Info"
onclick="fullInfo()">
</form>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Список сотрудников</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class = "header">
<img src = "img/header.png"></img>
</div>
<div class = "container">
<?php
echo "<table id='table_id' class = 'table table-striped'>";
echo "<thead>
<tr>
<th>№</th>
<th>ФИО</th>
<th>Имя транслитом</th>
<th>Дата рождения</th>
<th>Должность</th>
<th>Дата приёма</th>
<th>№ удостоверения</th>
<th>Полная информация</th>
</tr>
</thead>
";
class TableRows extends RecursiveIteratorIterator {
function __construct($it) {
parent::__construct($it, self::LEAVES_ONLY);
}
function current() {
return "<td>" . parent::current(). "</td>";
}
function beginChildren() {
echo "<tr>";
}
function endChildren() {
echo "</tr>" . "\n";
}
}
$servername = "localhost";
$username = "user";
$password = "password";
$dbname = "test";
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname;charset=utf8", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $conn->prepare("SELECT number, fullname, engname,birthdaydate, position, recruitmentDate,id,buttonid FROM employees");
$ids = $conn->prepare("SELECT * FROM employees");
$stmt->execute();
// set the resulting array to associative
$result = $stmt->setFetchMode(PDO::FETCH_ASSOC);
foreach(new TableRows(new RecursiveArrayIterator($stmt->fetchAll())) as $k=>$v) {
echo $v;
}
}
catch(PDOException $e) {
echo "Error: " . $e->getMessage();
}
$conn = null;
echo "</table>";
?>
</div>
<div class = "footer">
<img src = "img/footer.jpg"></img>
</div>
<!--<link rel="stylesheet" type="text/css" href="css/styles.css">-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#table_id').DataTable( {
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.13/i18n/Russian.json"
}
} );
} );
</script>
<!--
<script>
function fullInfo(){
var ids = <?php echo json_encode($ids); ?>;
for (int i = 0;i<ids.length;i++){
if (ids['buttonID'] == this.id){
alert ("good");
}
}
};
</script>
-->
</body>
</html>
You create a function that will process a call to your site like this:
http://my-site.com/employee.php?id=12
employee.php (idea)
$stmt = $conn->prepare("SELECT * FROM employees WHERE id=:id");
$stmt->execute(array(':id' => $_GET['id']));
$employee = $stmt->fetch(PDO::FETCH_ASSOC);
print "<ul>";
//list the employee data
foreach($employee as $key => $value)
{
$key = htmlspecialchars($key, ENT_QUOTES, 'UTF-8');
$value = htmlspecialchars($value, ENT_QUOTES, 'UTF-8')
print "<li>". $key .': ' . $value . '</li>';
}
print "</ul>";
I suggest you to use an <a> tag instead of <button> as you have a link here, not a form. Just stylize it with CSS. In the column "Полная информация" of your table create a link:
<a target="_blank" href=\"/employee.php?id=$row['id']\">Полная информация</a>
This will open a new page. Process the request with PHP, I gave you the sample code.
Then add the ornaments like making the window modal, changing it's size etc.
For each row echo a button with its id as the employees id.
Add a letter before the id on the button to make sure it doesn't get repeated.
echo "<button id='emp*$employeeid*'>view</button>
<head>
<link type='text/css' href='css/osx.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/osx.js'></script>
</head>
<?php
$myuser = 3;
$a = mysql_query('SELECT cmc.coursemoduleid, cma.sourcecmid, cmc.userid
FROM course_modules_completion, course_modules_availability cma
WHERE cmc.userid = '.$myuser.'');
echo '<table>
<tr><th>Course Module ID</th><
<th>Course Module ID</th>
</tr>';
foreach($a as $aa)
{
$mid = $aa->coursemoduleid;
$sid = $aa->sourcecmid;
$user = $aa->userid;
<tr><td>'.$user.'</td>
<td>'.$mid.'</td>
<td>'.$sid.'</td>
<td>
<div id="container">
<div id="content"><div id="osx-modal">View More
</div></div>
<div id="osx-modal-content">
<div class="close">X</div>
<div id="osx-modal-data">';
echo $user.'Welcome Here';
</div></div>
</td>
</tr>';
}
echo '</table>';
?>
I want to get $user value in popup (If suppose If the $myuser is 6 in a table then even i should get 6 inside the popup when I click viewmore). My popup was working exactly no errors in jquery just I need to pass $user value inside popup.
Right now, it displays only the first userid 9 in all popups.
Could anyone suggest me?
You need to give the user id to the popup.
<script type='text/javascript'>
function showUser(userID)
{
var userWindow = window.open(url, "User", "width=600,height=400");
}
</script>
<a href="#" class="osx" onclick="showUser(<?= $user ?>)">
I have a SlickGrid set up, it is reading data from my database with PHP, my problem is arising when i try to save the data back to my database, I am trying to use JSON to give me an array that I can then use to write back to the database, i have see this thread explaining this:
Saving changes in SlickGrid
So I have the hidden form element in my code, and am using JSON to encode the data variable, the assign it to the data hidden input on the form, this form posts to a page called save_price.php, the trouble is when I print_r, or var_dump the data variable, I get null as an output, I think it might be something to do with how I am using PHP to add the content into the data variable, either that or I am doing something really obviously wrong, hopefully you can see what the problem is, there isn't a great deal of documentation online about retrieving/saving to a db with PHP, so I'm kinda stuck banging my head against the wall on this one, here's my code:
Ok so I found the problem, just incase anyone is struggling to get this all to work, here is the working code, it gets data from a database, then sends the changed data to another page for processing, it nees a little bit of refinements, that will happen once I've got it all implemented:
<?php
include("includes/check_session.php");
require_once('includes/functions.php');
require_once('includes/config.php');
$data = '';
$i = 0;
$query = "
SELECT * FROM `prices`";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
$data .= '
data['.$i.'] = {
id: "'.$row['id'].'",
title: "'.$row['title'].'",
duration: "'.$row['duration'].'",
percentComplete: "'.$row['percentComplete'].'",
start: "'.$row['start'].'",
finish: "'.$row['finish'].'",
effortDriven: "'.$row['effortDriven'].'"
};
';
$i++;
echo $data;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<?php // include("includes/cms_head_scripts.php"); ?>
<link rel="stylesheet" href="css/slick.grid.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/examples.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" src="js/jquery.json.js"></script>
</head>
<body>
<div id="content_cont">
<div id="main">
<div style="position:relative">
<div style="width:600px;">
<div id="myGrid" style="width:100%;height:500px;"></div>
</div>
</div>
pricing
</div><!-- #main -->
</div><!-- #content_cont -->
<script src="lib/firebugx.js"></script>
<script src="lib/jquery-ui-1.8.5.custom.min.js"></script>
<script src="lib/jquery.event.drag-2.0.min.js"></script>
<script src="slick.core.js"></script>
<script src="plugins/slick.cellrangeselector.js"></script>
<script src="plugins/slick.cellselectionmodel.js"></script>
<script src="slick.editors.js"></script>
<script src="slick.grid.js"></script>
<script type="text/javascript">
var grid;
var data = [];
var columns = [
{id:"title", name:"Title", field:"title", editor:TextCellEditor},
{id:"duration", name:"Duration", field:"duration", editor:TextCellEditor},
{id:"%", name:"% Complete", field:"percentComplete", editor:TextCellEditor},
{id:"start", name:"Start", field:"start", editor:TextCellEditor},
{id:"finish", name:"Finish", field:"finish", editor:TextCellEditor},
{id:"effort-driven", name:"Effort Driven", field:"effortDriven", editor:TextCellEditor}
];
var options = {
editable: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: true
};
$(function() {
<?php echo $data ?>
grid = new Slick.Grid($("#myGrid"), data, columns, options);
})
</script>
<form method="POST" action="save_price.php">
<input type="submit" value="Save">
<input type="hidden" name="data" value="">
</form>
<script type="text/javascript">
$(function() {
$("form").submit(
function() {
$("input[name='data']").val($.JSON.encode(data));
}
);
});
</script>
</body>
</html>