I'm having a problem with my web server on raspberry pi. I have these two files( among others) : view_action.php and graph.html.
One of the function of the firs file is to to redirect the user to the file graph.html.
The graph.html is a copy of the realtime example of Flot chart. The files that i have to include on the code: jquery.js, jquery.flot.js and excanvas.min.js are on the same folder as the files above. So, the only thing changed on the graph.html is the path to these 3 files.
Here the graph.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Real-time updates</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript">
$(function() {
// We use an inline data source in the example, usually data would
// be fetched from a server
var data = [],
totalPoints = 300;
function getRandomData() {
if (data.length > 0)
data = data.slice(1);
// Do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50,
y = prev + Math.random() * 10 - 5;
if (y < 0) {
y = 0;
} else if (y > 100) {
y = 100;
}
data.push(y);
}
// Zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]])
}
return res;
}
// Set up the control widget
var updateInterval = 30;
$("#updateInterval").val(updateInterval).change(function () {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1) {
updateInterval = 1;
} else if (updateInterval > 2000) {
updateInterval = 2000;
}
$(this).val("" + updateInterval);
}
});
var plot = $.plot("#placeholder", [ getRandomData() ], {
series: {
shadowSize: 0 // Drawing is faster without shadows
},
yaxis: {
min: 0,
max: 100
},
xaxis: {
show: false
}
});
function update() {
plot.setData([getRandomData()]);
// Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – ");
});
</script>
</head>
<body>
<div id="header">
<h2>Real-time updates</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div>
<p>You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.</p>
<p>Time between updates: <input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> milliseconds</p>
</div>
<div id="footer">
Copyright © 2007 - 2014 IOLA and Ole Laursen
</div>
When the view_action.php redirect to graph.html it only appear the title and the info of the body. No graph. I think my webserver it isnt running javascript codes. What is the problem?
Thanks,
Ricardo
You need to specify a width and height for the placeholder div element (see the readme). In the original example this is done in the example.css. Check if the path to the CSS file is correct in your code (you have href="../examples.css").
Changing
<div id="placeholder" class="demo-placeholder"></div>
to
<div id="placeholder" class="demo-placeholder" style="width: 800px; height: 450px;"></div>
or similar should fix that issue if you don't want to use the CSS file.
I have a php code that deals with mapping markers in a google maps, and the coordinates needed are fetched from a certain data storage platform. My problem now is that the coordinates are always updating and when I run the php code it will only read the last entry of the coordinates. Is there a php function that allows a perpetual loop for the code even without opening the php code itself?
EDIT
This the php code is for the map plotter
<?
php
session_start();
require ("trial.php");
?>
<html>
<head>
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<table><col width="500px">
<tr>
<td>
<div id="map" style="height: 500px; width: 100%;">
</div>
<script type="text/javascript">
var locations = [
['Time', <?php echo $_SESSION["latitude"]?>, <?php echo $_SESSION["longitude"]?>, 1]
];
alert(locations[6][2]);
document.write(locations[6]);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: new google.maps.LatLng(14.5843976,120.9762802),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</td>
</tr>
</table>
</body>
</html>
This is the php code for the fetching
<?php
$_SESSION["longitude"] = file_get_contents("https://api.thingspeak.com/channels/Channel_ID/fields/1/last.txt");
$_SESSION["latitude"] = file_get_contents("https://api.thingspeak.com/channels/Channel_ID/fields/2/last.txt");
?>
I just have asked this question to a friend of mine. And he says I could just use a cron or cron job. And I will just research more into this function.
I am having an issue with Google Charts. I have created the exact format it shows in the example inside a PHP vaiable
['Time','Devices'],['08-12-2015 09:19:00',12],['08-12-2015 09:20:00',26],['08-12-2015 09:21:00',23],['08-12-2015 09:22:00',16],['08-12-2015 09:23:00',29],['08-12-2015 09:24:00',21],['08-12-2015 09:25:00',18],['08-12-2015 09:26:00',28],['08-12-2015 09:27:00',19],['08-12-2015 09:28:00',15],['08-12-2015 09:29:00',25],['08-12-2015 09:30:00',18],['08-12-2015 09:31:00',18],['08-12-2015 09:32:00',26],['08-12-2015 09:33:00',13],['08-12-2015 09:34:00',16],['08-12-2015 09:35:00',19],['08-12-2015 09:36:00',14],['08-12-2015 09:37:00',23],['08-12-2015 09:38:00',16],['08-12-2015 09:39:00',12],['08-12-2015 09:40:00',27],['08-12-2015 09:41:00',17],['08-12-2015 09:42:00',16],['08-12-2015 09:43:00',32],['08-12-2015 09:44:00',20],['08-12-2015 09:45:00',18],['08-12-2015 09:46:00',30],['08-12-2015 09:47:00',14],['08-12-2015 09:48:00',19],['08-12-2015 09:49:00',24],['08-12-2015 09:50:00',12],['08-12-2015 09:51:00',23],['08-12-2015 09:52:00',21],['08-12-2015 09:53:00',12],['08-12-2015 09:54:00',26],['08-12-2015 09:55:00',23],['08-12-2015 09:56:00',12],['08-12-2015 09:57:00',32],['08-12-2015 09:58:00',16],['08-12-2015 09:59:00',18],['08-12-2015 10:00:00',23],['08-12-2015 10:01:00',17],['08-12-2015 10:02:00',19],['08-12-2015 10:03:00',39],['08-12-2015 10:04:00',16],['08-12-2015 10:05:00',17],['08-12-2015 10:06:00',27],['08-12-2015 10:07:00',21],['08-12-2015 10:08:00',18],['08-12-2015 10:09:00',40],['08-12-2015 10:10:00',20],['08-12-2015 10:11:00',18],['08-12-2015 10:12:00',28],['08-12-2015 10:13:00',25],['08-12-2015 10:14:00',17],['08-12-2015 10:15:00',32],['08-12-2015 10:16:00',25],['08-12-2015 10:17:00',16],['08-12-2015 10:18:00',31]
I now want to place this inside the Chart example below but it does not work.
The variable that holds the above information is $outp. I tried to place it in but it does not work.
<html>
<head>
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1',
'packages':['corechart']
}]
}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
<?php echo $optp; ?>
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
If anyone can assist please, its driving me crazy.
Thanks
Rob
I am again here for same question again.
Now my old problem is solved. I have two files index.html and code.js
1) index.html
<html>
<head>
<title> perl </title>
<link rel="stylesheet" href="http://code.guru99.com/css/1140.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://code.guru99.com/css/styles.css" type="text/css" media="screen" />
<script src="http://code.guru99.com/php/lib/codemirror.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">></script>
<link rel="stylesheet" href="http://code.guru99.com/Sanjay/lib/codemirror.css" type="text/css" media="screen" />
<script src="code.js"></script>
<script type="text/javascript" src="http://code.guru99.com/perl/perl.js"></script>
<style>
.CodeMirror {
border: 1px solid #eee;
height: auto;
width : 600px;
}
.CodeMirror-scroll {
height: auto;
overflow-y: hidden;
overflow-x: auto;
}
</style>
</head>
<body>
Integer : whole numbers e.g. -3, 0, 69. The maximum value of an integer is platform-dependent. On a 32 bit machine, its usually around 2 billion. 64 bit machines usually have larger values. The constant PHP_INT_MAX is used to determine the maximum value.
<pre class="codeguru">say 'hi';</pre>
Let us now look at how PHP determines the data type depending on the attributes of the supplied data.
<pre class="codeguru">say 'hello';</pre>
Floating point numbers
<pre class="codeguru">say 'you r amazing';</pre>
Character strings
<pre class="codeguru">say 'i am fine';</pre>
</div>
<form class="hidden code-box" method="GET" name="sample">
<div dir="ltr"><textarea class="php" name="codeguru"></textarea></div>
<input type="button" value="Run" />
</br></br>
Output:</br></br>
<textarea id="print-result" disabled="true" cols="77"></textarea></br>
</form></div>
</body>
</html>
and code.js contain following code
$(document).ready(function()
{
$('pre.codeguru').each(function()
{
var pre = this;
var form = $('form[name=sample]').clone();
$(form).removeAttr('name');
$(form).removeClass('hidden');
$($(form).find('textarea')[0]).val($(pre).text());
var id = $(pre).attr('id');
$(form).find('div textarea[name=code]').first().attr('id', id);
$(pre).replaceWith(form);
});
var n = 0;
$('input[type=button]').each(function () {
$(this).click(function (x) {
return function () {
execute(x);
};
}(n++))
}
);
window.editors = [];
$('textarea[name=codeguru]').each(function()
{
window.editor = CodeMirror.fromTextArea(this,
{
lineNumbers: true,
matchBrackets: true,
mode: "application/x-httpd-perl",
tabMode: "shift"
});
editors.push(editor);
});
});
function execute(idx) {
p5pkg.CORE.print = function(List__) {
var i;
for (i = 0; i < List__.length; i++) {
document.getElementById('print-result').value+=p5str(List__[i])
}
return true;
};
p5pkg["main"]["v_^O"] = "browser";
p5pkg["main"]["Hash_INC"]["Perlito5/strict.pm"] = "Perlito5/strict.pm";
p5pkg["main"]["Hash_INC"]["Perlito5/warnings.pm"] = "Perlito5/warnings.pm";
var source = editors[idx].getValue();
alert(source);
var pos = 0;
var ast;
var match;
document.getElementById('print-result').value = "";
try {
var start = new Date().getTime();
var js_source = p5pkg["Perlito5"].compile_p5_to_js([source]);
var end = new Date().getTime();
var time = end - start;
// run
start = new Date().getTime();
eval(js_source);
end = new Date().getTime();
time = end - start;
}
catch(err) {
//document.getElementById('log-result').value += "Error:\n";
}
}
When I run this code its works fine give me output also. But my problem is that the output prints in one textarea only. I want to print the output in consecutive textarea.
This code in code.js prints the output.
p5pkg.CORE.print = function(List__) {
var i;
for (i = 0; i < List__.length; i++) {
document.getElementById('print-result').value += p5str(List__[i])
}
}
So what I have to do for print my output in consecutive textarea.Please please help me.
using same id for different elements in a page can create problems..
make the text area like this..
<textarea id="print-result" class='print-result' disabled="true" cols="77></textarea>
Modified code in code.js that prints the output is
p5pkg.CORE.print = function(List__) {
var i,concat='';
for (i = 0; i < List__.length; i++) {
concat=$(".print-result").eq(idx).val();
$(".print-result").eq(idx).val(concat+p5str(List__[i]));
}
return true;
}
Add name attribute to your textarea like
<textarea id="print-result" disabled="true" name="code" cols="77"></textarea>
in place of
<textarea id="print-result" disabled="true" cols="77"></textarea>
Updated
In your code I can't see a textarea having name="code", and you are using it.
Is it codeguru?
I wonder whether someone may be able to help me please.
The code below allows users to delete images from a gallery.
Full Script Minus Styling
<?php session_start();
$_SESSION['userid']=$_POST['userid'];
$_SESSION['locationid']=$_POST['locationid'];
//echo $_SESSION['userid'];
//echo $_SESSION['locationid'];
?>
<?php
$galleryPath = 'UploadedFiles/' . $_SESSION['userid'] . '/' . $_SESSION['locationid'] . '/';
$absGalleryPath = realpath($galleryPath) . DIRECTORY_SEPARATOR;
$descriptions = new DOMDocument('1.0');
$descriptions->load($absGalleryPath . 'files.xml');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=0.3">
<title>Galleria Twelve Theme</title>
<style>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script src="galleria/galleria-1.2.7.min.js"></script>
<script src="galleria/themes/twelve/galleria.twelve.min.js"></script>
<script src="galleria/plugins/history/galleria.history.min.js"></script>
<link rel="stylesheet" href="galleria/themes/twelve/galleria.twelve.css">
<style>
.galleria-thumbnails .btn-delete {
display: block; /* Or just use a div instead of a span*/
position: absolute; bottom : 0px; /*align at the bottom*/
width: 80px;
height: 17px;
cursor: pointer;
background: url(trash8.gif) no-repeat bottom; }
</style>
<script type="text/javascript">
Galleria.ready(function() {
this.$('thumblink').click();
$(".galleria-image").append(
"<span class='btn-delete ui-icon ui-icon-trash'></span>");
$(".btn-delete").live("click", function(){
// you do not need to find img and then src... just use id of image
var img = $(this).closest(".galleria-image").find("img");
var userid=$(".hiddenvals").attr('userid');
var locationid=$(".hiddenvals").attr('locationid');
// send the AJAX request
$.ajax({
url : 'delete3.php?userid='+userid+'&locationid='+locationid,
type : 'post',
data : { image : img.attr('src') },
success : function(){
alert('Deleting image... ');
img.parent().fadeOut('slow');
}
});
return false;
});
});
</script>
</head>
<body>
<ul id="navigation">
<li class="left">
<div align="center">← Add Images</div>
</li>
</ul>
<form id="viewimages" name="viewimages" class="page" action="index.php" method="post"> <input name="userid" class="hiddenvals" type="hidden" value="<?php echo $_SESSION['userid']; ?>"> <input name="locationid" class="hiddenvals" type="hidden" value="<?php echo $_SESSION['locationid']; ?>"></form>
<div class="content">
<h1>Galleria Twelve Theme</h1>
<p>Demonstrating a simple example.</p>
<!-- Adding gallery images. We use resized thumbnails here for better performance, but it’s not necessary -->
<div id="galleria">
<?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :
$xmlFile = $descriptions->documentElement->childNodes->item($i);
$name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');
$description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');
$source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));
?>
<img data-title="<b>Image Name: </b> <?php echo $name; ?>" data-description="<b>Description:</b> <?php echo $description; ?>" src="<?php echo $source; ?>">
<?php endfor; ?>
</body>
</html>
In essence, the user clicks on a delete icon, then the 'delete.php' script called in the code above deletes the image from the server. This all works well.
What I'm struggling with is how to pass two variable values to the 'delete.php' script. These are 'userid' and 'locationid'.
I've tried adding the following to the beginning of my 'delete.php':
<?php session_start();
$_SESSION['userid']=$_POST['userid'];
$_SESSION['locationid']=$_POST['locationid'];
But the values are not carried over. I suspect that this may be down to the fact the the forms 'POST' action is being used to navigate to another HTML page, although I'm no expert, so I may have got this wrong.
I've done quite a bit of reading and searched for tutorials on how to go about getting around this problem, but I've not found anything that seems to suggest a solution.
I just wondered whether someone may be able to look at this please, and offers some guidance on how I can pass these two values to my 'delete.php' script.
Many thanks and kind regards
If they are in the html page add them to the ajax request:
{ image : img.attr('src'), userid: "VALUE", locationid: "VALUE"},
Try to send ids from your html page like
$.ajax({
url : 'delete.php?userid=2&locationid=4',
........
Then in php
$uid=$_POST['userid'];
$locid=$_POST['locationid'];
If you want to get userid and locationid dynamically for each image.
FIRST; in you btn-delete class add uid and locid attribute. I suppose you are looping through PHP.
LIKE ===>
<input type="button" class="btn-delete" uid="2" locid="5">
Then in your script
<script type="text/javascript">
Galleria.ready(function() {
this.$('thumblink').click();
$(".galleria-image").append(
"<span class='btn-delete ui-icon ui-icon-trash'></span>");
$(".btn-delete").live("click", function(){
// you do not need to find img and then src... just use id of image
var img = $(this).closest(".galleria-image").find("img");
var uid=$(this).attr('uid');
var locid=$(this).attr('locid');
// send the AJAX request
$.ajax({
url : 'delete.php?userid='+uid+'&locationid='+locid,
type : 'post',
data : { image : img.attr('src') },
success : function(){
alert('Deleting image... ');
img.parent().fadeOut('slow');
}
});
return false;
});
});
</script>
var id=$(this).attr('id');
var userid=$('#userid').val();
var locationid=$('#locationid').val();
$.ajax({
url : 'delete.php',
type : 'post',
dataType : 'json',
data : { image : img.attr('src'), userid: userid, locationid: locationid},
,
success : function(){
alert('Deleting image... ');
img.parent().fadeOut('slow');
}
});
add dataType : 'json' and get posted value in delete.php by
$userid=$_POST['userid'];
$locationid=$_POST['locationid'];