Retrieving data from server using jquery $.get function

Question

I am creating a real-time graph with flot library and using jquery $.get function. I want the graph to be updated every 5 seconds retrieving the recorded data. The X axis is in time mode. I have been trying to retrieve the necessary data but i can't get it yet. The .php file is fine because it connects to the postgresql database and writes the data into the requested variable. I think that my problem is in the $.get function. Can you please help me to find if my Javascript code is fine? Thanks in advance

    <script type="text/javascript">
$(function () {
var data=[];
    var data_inicial = [];
    var data_actual = [];
    var x;
    var y;

    function data_init() 
    {
            $.get("param_pozos_linea1.php", function(data1) {  x= data1; });
            data_inicial.push([x]); 
            return data_inicial;
    }

    function actualiza_data() 
    {
            $.get("param_pozos_linea2.php", function(data2) {  y= data2; });
            data_actual.push(y); 
            return data_actual;
    }

    // control de velocidad 
    var updateInterval = 500;
    $("#updateInterval").val(updateInterval).change(function () {
        var v = $(this).val();
        if (v && !isNaN(+v)) {
            updateInterval = +v;
            if (updateInterval < 1)
                updateInterval = 1;

            $(this).val("" + updateInterval);
        }
    });

    // setup plot
    var options = {
        series: { shadowSize: 0 }, // drawing is faster without shadows
        yaxis: { min: 0, max: 100 },
        xaxis: { mode: "time",tickLength: 5, timeformat: "%d/%m - %h:%M %p"}
    };
    var plot = $.plot($("#placeholder"),  data_init() , options);

    function update() {
        plot.setData([ actualiza_data() ]);
        plot.draw();

        setTimeout(update, updateInterval);
    }

    update();
});
</script>

The retrieved data from "param_pozos_linea1.php" file loooks like this:

[1355767803000,0],[1355767502000,0],[1355767202000,0],[1355766902000,0],[1355766602000,0],[1355766302000,0],[1355766002000,0],[1355765702000,0],[1355765402000,0],[1355765103000,2570.17],[1355764803000,2569.63]

And the retrieved data from "param_pozos_linea2.php" looks like this: [1355767803000,0]

So the requested data isn't wrapped in a pair of container []'s? — Mike Robinson
– Mike Robinson, Commented Dec 17, 2012 at 22:58

epascarello · Accepted Answer · 2012-12-17 23:21:29Z

2

The get request is asynchronous, it is impossible for it to work in a synchronous manner like you think it does.

function data_init() 
{
        $.get("param_pozos_linea1.php", function(data1) {  x= data1; }); <-- calls the server asynchronously
        data_inicial.push([x]); <-- is called before code is set on server, so it is setting it with what ever the last value was
        return data_inicial;  <-- returns something you do not want
}

what you want to do is call the function that set the data

function data_init() 
{
        $.get("param_pozos_linea1.php", 
            function(data1) {  
               data_inicial.push([data1]); 
               callYourPlotFunction(data_inicial);
            }
        );
}

answered Dec 17, 2012 at 23:21

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Retrieving data from server using jquery $.get function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related