Hi, Hope you can help me
I am trying to make a realtime graph to show results from a Mysql database. I am working on it for 3 days but cant see it anymore
The story.
I put info by python in my database. I have 4 colums (datetime, fase1, fase2, fase3). The info I want to show in a graph realtime.
For your info I am still a php/js/python noob but working on it. I love the project. I tried more solutions provided by google but it seems they are not complete.
The code to pull info from mysql
<?php
$con = mysql_connect("localhost","########","########");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("piMeasure", $con);
$sth = mysql_query("SELECT Fase1 FROM 1x3fA");
$row1 = array();
$row1['name'] = 'fase1';
while($r = mysql_fetch_array($sth)) {
$row1['data'][] = $r['Fase1'];
}
$sth = mysql_query("SELECT Fase2 FROM 1x3fA");
$row2 = array();
$row2['name'] = 'fase2';
while($s = mysql_fetch_assoc($sth)) {
$row2['data'][] = $s['Fase2'];
}
$sth = mysql_query("SELECT Fase3 FROM 1x3fA");
$row3 = array();
$row3['name'] = 'fase3';
while($t = mysql_fetch_assoc($sth)) {
$row3['data'][] = $t['Fase3'];
}
$result = array();
array_push($result,$row1);
array_push($result,$row2);
array_push($result,$row3);
echo json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
The script for showing the graph.
<script type="text/javascript" src="../src/plugins/jquery.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="../src/plugins/jquery.flot.min.js"></script>
<script type="text/javascript" src="../src/plugins/jquery.flot.time.js"></script>
<script type="text/javascript" src="../src/plugins/jshashtable-2.1.js"></script>
<script type="text/javascript" src="../src/plugins/jquery.numberformatter-1.2.3.min.js"></script>
<script type="text/javascript" src="../src/plugins/jquery.flot.symbol.js"></script>
<script type="text/javascript" src="../src/plugins/jquery.flot.axislabels.js"></script>
<script>
var fase1 = [], fase2 = [], fase3 = [];
var dataset;
var totalPoints = 100;
var updateInterval = 1000;
var now = new Date().getTime();
var options = {
series: {
lines: {
lineWidth: 1.2
},
bars: {
align: "center",
fillColor: { colors: [{ opacity: 1 }, { opacity: 1}] },
barWidth: 500,
lineWidth: 1
}
},
xaxis: {
mode: "time",
tickSize: [60, "second"],
tickFormatter: function (v, axis) {
var date = new Date(v);
if (date.getSeconds() % 20 == 0) {
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return hours + ":" + minutes + ":" + seconds;
} else {
return "";
}
},
axisLabel: "Time",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxes: [
{
min: 0,
max: 100,
tickSize: 5,
tickFormatter: function (v, axis) {
if (v % 10 == 0) {
return v + "%";
} else {
return "";
}
},
axisLabel: "fase1",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 6
}, {
max: 5120,
position: "right",
axisLabel: "Disk",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 6
}
],
legend: {
noColumns: 0,
position:"nw"
},
grid: {
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
}
};
function initData() {
for (var i = 0; i < totalPoints; i++) {
var temp = [now += updateInterval, 0];
fase1.push(temp);
fase2.push(temp);
fase3.push(temp);
}
}
function GetData() {
$.ajaxSetup({ cache: false });
$.ajax({
url: "datapull.php",
dataType: 'json',
success: update,
error: function () {
setTimeout(GetData, updateInterval);
}
});
}
var temp;
function update(_data) {
fase1.shift();
fase2.shift();
fase3.shift();
now += updateInterval
temp = [now, _data.fase1];
fase1.push(temp);
temp = [now, _data.fase2];
fase2.push(temp);
temp = [now, _data.fase3];
fase3.push(temp);
dataset = [
{ label: "Fase1:" + _data.fase1 + "A", data: fase1, lines: { fill: true, lineWidth: 1.2 }, color: "#00FF00" },
{ label: "Fase2:" + _data.fase3 + "A", data: fase2, color: "#0044FF", bars: { show: true }, yaxis: 2 },
{ label: "Fase3:" + _data.fase3 + "A", data: fase3, lines: { lineWidth: 1.2}, color: "#FF0000" }
];
$.plot($("#flot-placeholder1"), dataset, options);
setTimeout(GetData, updateInterval);
}
$(document).ready(function () {
initData();
dataset = [
{ label: "fase1", data: fase1, lines:{fill:true, lineWidth:1.2}, color: "#00FF00" },
{ label: "fase2", data: fase2, color: "#0044FF", bars: { show: true }, yaxis: 2 },
{ label: "fase3", data: fase3, lines: { lineWidth: 1.2}, color: "#FF0000" }
];
$.plot($("#flot-placeholder1"), dataset, options);
setTimeout(GetData, updateInterval);
});
</script>
<!-- HTML -->
<body>
<div id="flot-placeholder1" style="width:1800px;height:800px;margin:0 auto"></div>
</body>
I have al the plugins/libs on the server
I hope you can help me
GrTz Red