Search the Community

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