Flot Realtime Graph

[RedOne_NL]

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

 

[iarp]

Have you had a look at the browsers console to see if any javascript errors are occurring? In chrome F12 and go to the Console tab.