I have two files. One is tempTesting.php and another is using flot to graph the data displayed on project.html. But I cannot get the value from the tempTesting.php and display it on project.html. When I run the project.html it gives me a syntax error on this line:
var dat = <?php echo $return; ?>;
tempTesting.php
<?php
$return="[123456789,22.55],[234567891,22.32]";
$maxtemp=-10;
$mintemp=50;
?>
project.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flot For Temperature Project</title>
<script src="jquery.js" language="javascript" type="text/javascript"></script>
<script src="jquery.flot.js" language="javascript" type="text/javascript"></script>
<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.pack.js"></script><![endif]-->
<script type="text/javascript" src="jquery.flot.time.js"></script>
<script type="text/javascript" src="jquery.flot.symbol.js"></script>
<script type="text/javascript" src="jquery.colorhelpers.js"></script>
<script type="text/javascript" src="jquery.flot.canvas.js"></script>
<script type="text/javascript" src="jquery.flot.categories.js"></script>
<script type="text/javascript" src="jquery.flot.crosshair.js"></script>
<script type="text/javascript" src="jquery.fillbetween.js"></script>
<script type="text/javascript" src="jquery.flot.image.js"></script>
<script type="text/javascript" src="jquery.flot.navigate.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
var dat = <?php echo $return;?>;
var options = {
xaxis: { mode: "time", timeformat: "%h:%M %d.%m.%y", labelWidth: "10" },
series: {
lines: { show: true, fill: true, fillColor: "rgba(0,0,0,0.2)" },
points: { show: true, fill: false },
shadowSize: 5,
color: "rgba(0,0,0,0.8)"
},
grid: { hoverable: true, clickable: true },
yaxis: { min: <?php echo $mintemp-2;?> , max: <?php echo $maxtemp+2;?>, tickFormatter: function (v, axis) { return v.toFixed(axis.tickDecimals) +"°C" }},
selection: { mode: "x", color: "rgba(125,0,0,0.6)" },
legend: { show: true, position: "se", backgroundOpacity: 0.4, backgroundColor: "rgb(255,255,255)", labelBoxBorderColor: "rgb(0,0,0)"},
};
var plot = $.plot($("#placeholder"),[ { data: dat, label: "Study Temp", color:"#333"} ], options);
var overview = $.plot($("#overview"), [ { data: dat, label: "Min: °C, Max: °C", color: "#333"} ], {
series: {
color: "rgba(0,0,0,0.8)",
lines: { show: true, lineWidth: 1, fill: true, fillColor: "rgba(0,0,0,0.2)" },
shadowSize: 0
},
xaxis: { ticks: [], mode: "time" },
yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
selection: { mode: "x", color: "rgba(125,0,0,0.6)" },
legend: { show: true, position: "se", backgroundOpacity: 1, backgroundColor: "rgb(255,255,255)", labelBoxBorderColor: "rgb(0,0,0)" }});
$("#placeholder").bind("plotselected", function (event, ranges) {
plot = $.plot($("#placeholder"), [dat],
$.extend(true, {}, options, {
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
}));
overview.setSelection(ranges, true);
});
$("#overview").bind("plotselected", function (event, ranges) {
plot.setSelection(ranges);
});
var humanTime;
var jstime;
function showTimes(t) {
var datum = new Date(parseFloat(t));
humanTime = datum.toUTCString();
}
function showTooltip(x, y, contents) {
$('' + contents + '').css( {
position: 'absolute',
display: 'none',
top: y + 25,
left: x + 0,
border: '2px solid #777',
padding: '2px',
'font-family': 'Arial',
'font-size:': '1.2em',
'font-weight': 'bold',
'background-color': '#ddd',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(0),
y = item.datapoint[1].toFixed(2);
showTimes(x);
showTooltip(item.pageX, item.pageY,
y + "°C (at " + humanTime + "+1000)");
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
});
</script>
</head >
<body>
<?php
include('tempTesting.php');
?>
<div id="placeholder" style="height:300px;width=100px;"></div>
<div id="overview"></div>
<p>Flot Temperature realtime update. Below here is the Information</p>
</body>
</html>
Try var dat = "<?php echo $return; ?>"; instead.
Without quotes, if $return contains a string, javascript will interpret it as a variable, which is I think not the desired result.
Also, I you didn't set you server configuration to execute PHP in HTML files, this won't work since your file has a '.html' extension. Just rename your file to 'project.php' and it should be OK.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments