My PHP is working fine and I appear to be getting back the correct JSON data for FLOT, but I'm still getting a blank chart :-/
Here's the PHP:
foreach($result as $row) { //or whatever
$dataset1[] = array((int) $row['INDX'], (int) $row['RUNTIME'] );
}
echo json_encode($dataset1);
Here's a sample of the JSON it returns:
[[31,2303],[113,5697],[201,4485],[151,4404],[192,2668],[84,1082],[13,6003],[68,3628],[12,2115]]
Here's the function to plot:
$(function () {
$.plot($("#dashboard_div"), apudata);
console.log(apudata);
});
The console log shows correctly formatted JSON as above. I can cut and paste from the console log into a literal variable for that function and it works, but passing the JSON as a variable doesn't.
Ideas?Help?
Try using the code below. Set the 1000 (ms) interval to however often you want the graph to update. This is simply (very slightly edited) code from one of my previous posts that I put in the comments.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AJAX FLOT</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>
</head>
<body>
<div id="placeholder" style="width: 100%;height: 600px;"></div>
<div id="div" style="width: 100%; height: 100px;"></div>
<script type="text/javascript">
var options = {
lines: {
show: true
},
points: {
show: true
},
xaxis: {
mode: "time"
}
};
window.setInterval(function(){
$.getJSON('http://localhost/data.php', function (csv) {
dataOne = csv;
var plot = $.plot($('#placeholder'), [dataOne], options);
});
}, 1000);
</script>
</html>
Not sure if it matters, but the flot docs say to just pass the selector as a string to $.plot(), and not a jQuery object. So instead of
$.plot($('#dashboard_div'), apudata);
try
$.plot('#dashboard_div', apudata);
Related
I am trying to learn JQuery running sample codes dealing with SetInterval or Settimeout I find on the Internet, but they won't run or work. For instance, I have the following simple code, but it won't run or even give me error message.
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
<script type="text/javascript">
$(document).ready(function(){
setInterval(function() {
var number = 1 + Math.floor(Math.random() * 333);
$('#here').load(number);
},
1000);
});
</script>
</head>
<body>
<div id="here">dynamic content ?</div>
</body>
</html>
You first missed to add jquery library and second you should use .text() function rather than .load() function.
.load() function should use for ajax method.
One of the essential rules that should keep in mind that always put javascript code at the end of the page and before the end of the body tag
$(document).ready(function() {
setInterval(function() {
var number = 1 + Math.floor(Math.random() * 333);
$('#here').text(number);
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>
<body>
<div id="here">dynamic content ?</div>
</body>
</html>
I would like to add forms to a page in real time, but I'm not sure how to approach this.
Let's say that this is the class of my form:
class MyForm(FlaskForm):
my_field = StringField()
This is the html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button type="button" id="addNewForm">Add new form</button>
</body>
</html>
Which also includes this script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">/script>
<script type="text/javascript">
var form = '{{ form }}'
$("document").ready(function () {
$("#addNewForm").click(function () {
$("body").append(form)
});
});
</script>
Once I press the button I get back something like:
<forms.MyForm object at 0x000001C198CE5040>
I tried to extract the form HTML in order to pass it as an a string of html, but I can't find a way to do it (and suspect that there must be a better way).
What is the correct way of doing this?
Example is more easy to Understand.I tried to print a google document by through a side bar.
I have retrieved a script extract on the web.
My result is a printing the contents of the sidebar and not a google document printing .... oops
Can someone help me ?
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript">
function initButtonImprimer() {
var bouton = document.getElementById('button-imprimer');
bouton.onclick = function(e) {
print();
return false;
}
}
</script>
</head>
<body>
...
<div>
...
<input type="button" id="button-imprimer" value="Imprimer" />
...
</div>
...
<script type="text/javascript">
initButtonImprimer();
</script>
</body>
</html>
I have file named a.html with this code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Restaurant Gaststätte Gartenfreunde-Ehningen</title>
<meta charset="utf-8" />
<meta name="generator" content="iloapp 2.1"/>
<link rel="shortcut icon" href="//ilostatic.one.com/iloapp/gallery/images/favicon.ico" type="image/vnd.microsoft.icon"/>
</head>
<body>
<script>
(function () {
var script = document.createElement('script');
script.src = '//ilostatic.one.com/iloapp/gallery/js/init.js?' + (new Date).getTime();
document.documentElement.firstChild.appendChild(script);
})();
</script>
<noscript><iframe src="//ilostatic.one.com/iloapp/gallery/html/nojs_1_en-US.html" frameBorder="0" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></iframe></noscript>
</body>
</html>
It`s for a galerie who look like this: link
I want to include this here: link
Need some help here.
If you are using Jquery you can do the following:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
If you are looking to do raw Javascript DOM then you can do the following:
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
}
xhttp.open("GET", "b.html", true);
xhttp.send();
}
You could include an HTML code from another file without scripting using SSI (Sever
Side Includes).
Just name your file with .shtml extension and write something like at the place you want to include your file (e.g. index.html):
<!--#include virtual="/galerie/index.html" -->
Usually SSI works in .shtml files by default without any configuration.
Web server will work up .shtml file, looks for SSI directives inside it and process them.
I've succesfull integrated galerie in script. :) Thanks all guys for youre tips. I've used iframe . Finaly worked
I am having problems getting the webshims plugin canvas polyfill to work.
I get the following error in IE9 using IE7 mode:
SCRIPT438: Object doesn't support property or method 'fillRect'
problem.html, line 21 character 7
when I try to run this code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DealingTree</title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="/js/modernizr.js"> </script>
<script type="text/javascript" src="/js/jquery.js"> </script>
<script type="text/javascript" src="/js/sssl.js"> </script>
<script type="text/javascript" src="/js/webshims/js-webshim/minified/polyfiller.js"> </script>
</head>
<body>
<canvas id="savings" height="350" width="700"> </canvas>
<script type="text/javascript">
//<![CDATA[
window.FlashCanvasOptions = { disableContextMenu: true };
$.webshims.setOptions( 'canvas', { type: 'flashpro' } );
$.webshims.polyfill('canvas');
var canvas = $('#savings');
var context = canvas.getContext('2d');
context.fillStyle='#F00';
context.fillRect(0,0,700,350);
//]>
</script>
</body>
</html>
The problem happens whether I use the default (excanvas) or flashpro.
UPDATE: It appears to me that getContext() is returning a jQuery object instead of a context.
Help, please?
I received the following explanation from the plugin author, Alexander Farkas, via email:
The problem is the following. Webshims
does async polyfilling using a script
loader. Which is good for performance
in modern browsers. This also means,
that you have to wait untill the
canvas feature is ready.
Your code should be wrapped in a
domready event and everything is fine:
window.FlashCanvasOptions = { disableContextMenu: true };
$.webshims.setOptions( 'canvas', { type: 'flashpro' } );
$.webshims.polyfill('canvas');
$(function(){
var canvas = $('#savings');
var context = canvas.getContext('2d');
context.fillStyle='#F00';
context.fillRect(0,0,700,350);
});
You find more informations about your
problem in the documentation #
http://afarkas.github.com/webshim/demos/index.html#polyfill-ready