I'm using CodeIgniter framework. In my View, I have the following table which is automatically populated from the data extracted from database via Controller and the Model. How can I represent them in Google Charts? My knowledge on AJAX, JSON, etc. are less therefore I cannot jump into Google Chart API right now. Are there any alternative ways to represent them in Google Charts or something similar?
<?php foreach ($query->result_array() as $row): { ?>
<tr class="success">
<td><?php echo $row['room_number'];?></td>
<td><?php echo $row['start_date'];?></td>
<td><?php echo $row['end_date'];?></td>
<td><?php echo $row['pos_food_bev'];?></td>
<td><?php echo $row['total'];?></td>
<td><?php echo $row['payment_status'];?></td>
<td><?php echo $row['guest_status'];?></td>
</tr>
<?php } ?>
<?php endforeach; ?>
It would be nice if you provide more info, here's some code for a bar chart I've made, just to explain how you could pass php data to be used by a javascript script
<html>
<head>
<?php
$hits = array(
array("day"=>10,"count" =>53),
array("day"=>11,"count" =>67),
array("day"=>12,"count" =>85),
array("day"=>13,"count" =>57),
array("day"=>14,"count" =>65),
array("day"=>15,"count" =>71),
array("day"=>16,"count" =>85),
array("day"=>17,"count" =>106),
array("day"=>18,"count" =>55),
array("day"=>19,"count" =>96),
);
//this counter will be used later on the foreach
$counter = count($hits);?>
<meta charset="utf-8">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Day',
'Number of hits'],
<?php foreach ($hits as $key =>$hit):?>
<?php /*if the key is equal to the counter-1 it means we've reached
the end of our array in that case the javascript array,
won't have a comma at the end, or else it'll give a
unexpected identifier error*/
if(($counter-1)==$key):?>
['<?=$hit["day"]?>', <?=$hit["count"]?>]
<?php else:?>
['<?=$hit["day"]?>', <?=$hit["count"]?>],
<?php endif;?>
<?php endforeach;?>
]);
var options = {
title: 'Number of hits per day',
hAxis: {title: 'Day', titleTextStyle: {color: 'blue'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Related
I have php code which displays a table, the contents of which are displayed from a table in the database. One of the fields is a status field. There is a "Change" button which should change an "Inactive" status to "Active" and vice versa.
I need to know how to go about writing the code for the "change" button. Whether it should be written in jquery or it can be written in php also.
The code is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="indexStyle.css">
<title>User List</title>
</head>
<body>
<table border="2" bgcolor="#50D5CE">
<tr>
<td>SL. No</td>
<td>Name</td>
<td>Mobile Number</td>
<td>Status</td>
</tr>
<?php include ('header.php');
include ('includes/connect.php');
$dbconn = new connect();
$fields = "first_name,last_name,mobile_number,status";
$user_details = $dbconn->select($fields,"user_details","1");
$c=1;
for($i = 0; $i < count($user_details);$i++){
?>
<tr>
<td><?php echo $c ?></td>
<td><?php echo $user_details[$i][0]." ".$user_details[$i][1]; ?></td>
<td><?php echo $user_details[$i][2] ?></td>
<td><?php if($user_details[$i][3] == 0) {
echo "Inactive"; }
else echo "Active"; ?>
<input type="button" name="change_status" id ="change_status" value="Change"/></td>
</tr>
<?php $c++;
} ?>
</table>
</body>
</html>
jQuery is Javascript and runs on the user's computer, while PHP runs on the server. The thing is that the user has to trigger the database update and the server has to execute it. As a result, you need to send an AJAX request using jQuery and your server-side has to execute the update.
change input: ↓
<input type="button" name="change_status" id ="change_status" value="Change" onclick="update_status(<?php echo $user_details[$i][2]; ?>,<?php echo $user_details[$i][3]; ?>)"/>
<script>
function update_status(mob_no,sta)
{
$.ajax({
type: "POST",
url: "update_status.php",
data: {mobno:mob_no,status:sta},
success: function(data){
// whatever you do here after success
}
}
</script>
UPDATE_STATUS.PHP
<?php
if(isset($_POST['mobno']) && isset($_POST['status']))
{
$mono= $_POST['mobno'];
$temp_status = 0;
if($_POST['status']==0)
$temp_status=1;
mysql_query("update user_details set status='$temp_status' where mobile_number ='$mono'");
}
?>
You can change it with PHP code or with jQuery AND PHP code.
This because you'll need a server-side langage (in your case PHP) to access your DB. So the server-side script is needed.
To run the server-side script, you can call a php page directly, or you can call it from an AJAX request (in your case jQuery).
I have a problem which is proving to be difficult. I have a forum with multiple responses to a question, being pulled from a database and displayed using a foreach loop (PHP). I want an 'edit your response' function and have a jquery function which will 'show' a block of HTML which includes and input underneath each response. The problem is, when I select the edit button on one response it acitvates the bloack of HRML under every response because its targetting the class 'theDiv'. Is it possible to have a jquery function that can select just one.......i.e.somehow have each response in the foreach loop have a dynamically created unique class that a jquery function can target? Really struggling to see how this can be done.....
<html>
<head>
<style type="text/css">
.theDiv{
display:none;
}
</style>
<link href="styles/threads_page.css" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function() {
$(".show").click(function() {
$(".theDiv").show("normal");
});
$(".hide").click(function() {
$(".theDiv").hide("normal");
});
});
</script>
</head>
<body>
<?php foreach($responses as $response):?>
<h3><?php echo $response->author . "<br/>";
echo $response->content;
echo "<div class=\"theDiv\">
<form action=\"question_gallery.php\" method=\"post\" class=\"form\">
<table>
<tr>
<td>
Edit your response:
<input class=\"question_field\" name=\"question\"/>
</td>
</tr>
</table>
</form>
</div>
<table>
<tr>
<td>
<button class=\"show\">Edit response</button>
</td>
<td>
<button class=\"hide\">Close</button>
</td>
</tr>
</table>
";} ?>
<?php endforeach; ?>
</body>
</html>
Traverse the DOM starting from $(this):
$(function() {
$(".show").click(function() {
$(this).closest("table").prev(".theDiv").show("normal");
});
$(".hide").click(function() {
$(this).closest("table").prev(".theDiv").hide("normal");
});
});
(this) is the element that you clicked on. .closest("table") searches up the DOM hierarchy to the containing <table> element. .prev(".theDiv") selects the element immediately before it, as long as it has class="theDiv". This works for your HTML because the table and div are in sequential pairs.
I am using a JW video player and the way it is implemented for a single video is as below
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
jwplayer("myElement").setup({
file: "<?php echo $dbVideoFile; ?>"
});
</script>
</div>
No what I want to do is that I want to do is loop through each existing video and to display a jw video player for each video. Only problem is that it is not quite working, it is only display the jsplayer for one video, the other videos do not show anything but blank. What am I doing wrong below:
<p>
<?php foreach ($arrVideoFile[$key] as $v) { ?>
<div id="myElement">Loading the player...
<script type="text/javascript">
jwplayer("myElement").setup({
file: "<?php echo 'VideoFiles/'.$v; ?>"
});
</script>
</div>
<?php } ?>
</p>
id tag should be unic so JWPlayer is confused when calling #myElement
Try incrementing a value and dynamically rename "myElement-" + i
I didn't get to test but that shoudl work:
<p>
<?php
$i = 0;
foreach ($arrVideoFile[$key] as $v) { ?>
<div id="myElement-<?php echo $i; ?>">Loading the player...
<script type="text/javascript">
jwplayer("myElement-<?php echo $i; ?>").setup({
file: "<?php echo 'VideoFiles/'.$v; ?>"
});
<?php $i++; ?>
</script>
</div>
<?php } ?>
</p>
I'm trying to put a rss feed on my webpage and would like to present the articles in a slideshow (Cycle 2).
I'm using a php script ("functions.php)to get the feed and everything works fine but I need help on how to update the feed every 5 minute to check if there are any new articles in the feed.
This is what I have in my div:
<div id="rss-news" class="cycle-slideshow"
data-cycle-fx="fade"
data-cycle-speed="500"
data-cycle-timeout="6000"
data-cycle-slides="> div"
>
<?php
include("functions.php");
//Runs function with feed url and number of posts as arguments
$my_rss = fetch_rss_feed('http://www.thefeed.com/rss', 10);
?>
<?php foreach ($my_rss as $k => $v) : ?>
<div>
<span class="title"><b><?php echo $v['title']; ?></b></span>
<!--<span class="date"><?php echo $v['date']; ?></span> -->
<span class="descr"><?php echo $v['descr']; ?></span>
<span class="enclosure"><img src="<?php echo $v['enclosure']; ?>"></span>
</div>
<?php endforeach; ?>
Update:
I've tried with this code. But it shows all articles at the same time - no cycling:
<html>
<head>
<title>Test</title>
<!--<link rel="stylesheet" href="style.css">-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script type="text/javascript">
function update() {
$("#notice_div").html('Loading..');
$.ajax({
type: 'GET',
url: 'getrss.php',
timeout: 2000,
success: function(data) {
$("#div-one").html(data);
$("#notice_div").html('');
window.setTimeout(update, 10000);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#notice_div").html('Timeout contacting server..');
window.setTimeout(update, 60000);
}
});
}
$(document).ready(function() {
update();
});
</script>
</head>
<body>
<div id="div-one" class="cycle-slideshow"
data-cycle-fx="fade"
data-cycle-speed="500"
data-cycle-timeout="6000"
data-cycle-slides="> div"
></div>
<div id="notice-div"></div>
</body>
</html>
Any ideas?
You need Javascript/jQuery for this, have a look at this here: Jquery/Ajax call with timer so basically you are setting up a function that gets called every 5min and this function pulls the new data and inserts it in the area where the slideshow is located (the jQuery .html() function will come in handy here)
I am using cakephp to develop a webpage that dynamically append data retrieved from server. The appended data can be turned in jquery accordions (not shown).
I've tried some suggestions as seen in other topics, but still nothing shows up on the webpage.
The javascript is as such:
<script type="text/javascript">
$.getJSON('viewmjcatjson.ctp', function(data){
var content = '<div id="majorcat">\n';
$.each(data, function(index,cat){
content += '<h2>' + cat.category + '</h2><div>\n';
content += cat.description + '</div>\n';
});
$("#majorcat").append(content);
});
</script>
The 'viewmjcatjson.ctp' is as such:
<?php
Configure::write('debug', 0);
echo json_encode($majorCategories);
?>
The json object returned is valid (checked with jsonlint)
[{
"MajorCategories":{
"category":"Corporate Governance",
"description":"description on Corporate Governance"
}
},
{
"MajorCategories":{
"category":"Earnings Report",
"description":"description on Earnings Report"
}
},
{
"MajorCategories":{
"category":"Equity",
"description":"Relating to stock"
}
},
{
"MajorCategories":{
"category":"Financial Issue",
"description":"The area of finance dealing with monetary decisions that business enterprises make and the tools and analysis used to make these decisions"
}
}
]
I am suspecting something is wrong in the each loop, but I am not sure.
EDIT
The entire php file containing the javascript.
<?php echo $html->script('jquery-1.5.1.min.js'); ?>
<?php echo $html->script('jquery-ui-1.8.13.custom.min.js'); ?>
<?php echo $html->css('ui-lightness/jquery-ui-1.8.13.custom.css'); ?>
<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/ui.core.js"></script>
<script type="text/javascript" src="development-bundle/ui/ui.accordion.js"></script>
<div class="users form">
<h1><?php echo $article['Article']['title']?></h1>
<p><small>Author: <?php echo $article['Article']['author_all']?></small></p>
<p><?php echo $article['Article']['full_text']?></p>
<br>
<hr>
<br>
<table>
<tr>
<td width="60%">
<div id="majorcat">
</div>
</td>
<td width="40%">
<div id="minorcat">
</div>
</td>
</tr>
</table>
</div>
<div class="actions">
<h3><?php __('Menu'); ?></h3>
<ul>
<li><?php echo $this->Html->link(__('Logout', true),
array('controller' => 'users', 'action' => 'logout'));?></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$.getJSON('viewmjcatjson.ctp', function(data){
var content = '<div id="majorcat">\n';
$.each(data, function(index,cat){
content += '<h2>' + cat.category + '</h2><div>\n';
content += cat.description + '</div>\n';
});
$("#majorcat").append(content);
});
})
</script>
<script type="text/javascript">
$(function(){
$.getJSON('viewmjcatjson.ctp', function(data){
var content = '<div>';
$.each(data, function(index,cat){
content += '<h2>' + cat.MajorCategories.category + '</h2> <div>';
content += cat.MajorCategories.description + '</div>';
});
$("#majorcat").append(content);
});
})
</script>
You're missing the document.ready
I noticed Firebug console showing that 'viewmjcatjson' is responding not with json-encoded data but with a HTML file. The contents is actually exactly the same as the PHP file.
So I deduced it could be a routing problem.
Changing to...
$.getJSON('../viewmjcatjson', function(data){
...solves the problem.
Thanks Interstellar_Coder for the fixed code though.