0

Estoy intentando mostrar en una gráfica animada un valor que estoy leyendo constantemente de la base de datos MySQL (El valor son revoluciones por minuto de una maquina). El problema es, la gráfica con funciones random funciona correctamente, ahora estoy intentando pasarle el valor de la base de datos pero no se refresca, se queda fijo.

Por un lado tengo la consulta con PHP a MySQL dentro de un DIV que se refresca cada segundo, y lo almaceno en el valor de un input oculto:

<script type="text/javascript">

        setInterval("my_function88();",1000); 
        function my_function88(){
          $('#refresh88').load(location.href + ' #time88');
        }
</script>

<div id="time88">
    <div id="refresh88">
        <?php
          $sql = mysqli_query($conexion,"SELECT RPM AS ULTIMRPM FROM actual");
          $rowRPM = mysqli_fetch_assoc($sql);


         $RPMactual=$rowRPM['ULTIMRPM'];

        ?>
        <input id='RPPM' type='hidden' value='<?=$RPMactual?>' />       

    </div>

</div>

El script de la grafica (en jQuery) es el siguiente:

<script>
      $(function() {
            // we use an inline data source in the example, usually data would
            // be fetched from a server
           // ==============================================================
            // Real Time Visits
            // ==============================================================
            var data = [5, 10, 15, 20, 15, 30, 40],
                totalPoints = 350;

            function getRandomData() {
                if (data.length > 0) data = data.slice(1);
                // Do a random walk
                while (data.length < totalPoints) {
                    var prev = data.length > 0 ? data[data.length - 1] : 10,
                        y = $('#RPPM').val();

                    data.push($('#RPPM').val());
                }
                // Zip the generated y values with the x values
                var res = [];
                for (var i = 0; i < data.length; ++i) {
                    res.push([i, data[$('#RPPM').val()]])
                }
                return res;
            }
            // Set up the control widget
            var updateInterval = 1000;
            $("#updateInterval").val(updateInterval).change(function() {
                var v = $(this).val();
                if (v && !isNaN(+v)) {
                    updateInterval = +v;
                    if (updateInterval < 1) {
                        updateInterval = 1;
                    } else if (updateInterval > 1000) {
                        updateInterval = 1000;
                    }
                    $(this).val("" + updateInterval);
                }
            });
            var plot = $.plot("#real-time", [getRandomData()], {
                series: {
                    shadowSize: 1, // Drawing is faster without shadows
                    lines: { fill: true, fillColor: 'transparent' },
                },
                yaxis: {
                    min: 0,
                    max: 350,
                    show: true
                },
                xaxis: {
                    show: false
                },
                colors: ["#488c13"],
                grid: {
                    color: "#AFAFAF",
                    hoverable: true,
                    borderWidth: 0,
                    backgroundColor: 'transparent'
                },
                tooltip: true,
                tooltipOpts: {
                    content: "Visits: <?php echo $RPMactual?>",
                    defaultTheme: false
                }
            });
            window.onresize = function(event) {
                $.plot($("#real-time"), [getRandomData()]);
            }

            function update() {
                plot.setData([getRandomData()]);
                // Since the axes don't change, we don't need to call plot.setupGrid()
                plot.draw();
                setTimeout(update, updateInterval);
            }


                console.log("document ready");
                var offset = 0;
                plot1();

                function plot1() {
                    var sin = []
                        , cos = [];
                    for (var i = 0; i < 12; i += 0.2) {
                        sin.push([i, Math.sin(i + offset)]);
                        cos.push([i, Math.cos(i + offset)]);
                    }
                    var options = {
                        series: {
                            lines: {
                                show: true
                            }
                            , points: {
                                show: true
                            }
                        }
                        , grid: {
                            hoverable: true //IMPORTANT! this is needed for tooltip to work
                        }
                        , yaxis: {
                            min: -1.2
                            , max: 1.2
                        }
                        , colors: ["#ee7951", "#4fb9f0"]
                        , grid: {
                            color: "#AFAFAF"
                            , hoverable: true
                            , borderWidth: 0
                            , backgroundColor: '#FFF'
                        }
                        , tooltip: true
                        , tooltipOpts: {
                            content: "'%s' of %x.1 is %y.4"
                            , shifts: {
                                x: -60
                                , y: 25
                            }
                        }
                    };
                    var plotObj = $.plot($("#flot-line-chart"), [{
                        data: sin
                        , label: "sin(x)"
                    , }, {
                        data: cos
                        , label: "cos(x)"
                        }], options);
                }

        });


    </script>

Donde le paso el valor del input con ID "RPPM", el cual se refresca cada segundo en el DIV.

Gracias de antemano.

Un saludo.

////////EDITO\\\\

Ahora uso AJAX para consultar el valor constantemente, lo almaceno en el valor de un input e intento pasarselo al script de la gráfica y esta vez ni me muestra la linea:

<script type="text/javascript">

    function getTimeAJAX() {

        //GUARDAMOS EN UNA VARIABLE EL RESULTADO DE LA CONSULTA AJAX    

        var time = $.ajax({

            url: 'scripts/RPM.php', //indicamos la ruta donde se genera la hora
                dataType: 'text',//indicamos que es de tipo texto plano
                async: false     //ponemos el parámetro asyn a falso
        }).responseText;

        //actualizamos el div que nos mostrará la hora actual
        document.getElementById("myWatch").value = time;
    }

    //con esta funcion llamamos a la función getTimeAJAX cada segundo para actualizar el div que mostrará la hora
    setInterval(getTimeAJAX,1000);

    </script>

<script>
      $(function() {
            // we use an inline data source in the example, usually data would
            // be fetched from a server
           // ==============================================================
            // Real Time Visits
            // ==============================================================
            var data = [5, 10, 15, 20, 15, 30, 40],
                totalPoints = 350;

            function getRandomData() {
                if (data.length > 0) data = data.slice(1);
                // Do a random walk
                while (data.length < totalPoints) {
                    var prev = data.length > 0 ? data[data.length - 1] : 10,
                        y = $('#myWatch').val();

                    data.push($('#myWatch').val());
                }
                // Zip the generated y values with the x values
                var res = [];
                for (var i = 0; i < data.length; ++i) {
                    res.push([i, data[$('#myWatch').val()]])
                }
                return res;
            }
            // Set up the control widget
            var updateInterval = 1000;
            $("#updateInterval").val(updateInterval).change(function() {
                var v = $(this).val();
                if (v && !isNaN(+v)) {
                    updateInterval = +v;
                    if (updateInterval < 1) {
                        updateInterval = 1;
                    } else if (updateInterval > 1000) {
                        updateInterval = 1000;
                    }
                    $(this).val("" + updateInterval);
                }
            });
            var plot = $.plot("#real-time", [getRandomData()], {
                series: {
                    shadowSize: 1, // Drawing is faster without shadows
                    lines: { fill: true, fillColor: 'transparent' },
                },
                yaxis: {
                    min: 0,
                    max: 350,
                    show: true
                },
                xaxis: {
                    show: false
                },
                colors: ["#488c13"],
                grid: {
                    color: "#AFAFAF",
                    hoverable: true,
                    borderWidth: 0,
                    backgroundColor: 'transparent'
                },
                tooltip: true,
                tooltipOpts: {
                    content: "Visits: <?php echo $RPMactual?>",
                    defaultTheme: false
                }
            });
            window.onresize = function(event) {
                $.plot($("#real-time"), [getRandomData()]);
            }

            function update() {
                plot.setData([getRandomData()]);
                // Since the axes don't change, we don't need to call plot.setupGrid()
                plot.draw();
                setTimeout(update, updateInterval);
            }


                console.log("document ready");
                var offset = 0;
                plot1();

                function plot1() {
                    var sin = []
                        , cos = [];
                    for (var i = 0; i < 12; i += 0.2) {
                        sin.push([i, Math.sin(i + offset)]);
                        cos.push([i, Math.cos(i + offset)]);
                    }
                    var options = {
                        series: {
                            lines: {
                                show: true
                            }
                            , points: {
                                show: true
                            }
                        }
                        , grid: {
                            hoverable: true //IMPORTANT! this is needed for tooltip to work
                        }
                        , yaxis: {
                            min: -1.2
                            , max: 1.2
                        }
                        , colors: ["#ee7951", "#4fb9f0"]
                        , grid: {
                            color: "#AFAFAF"
                            , hoverable: true
                            , borderWidth: 0
                            , backgroundColor: '#FFF'
                        }
                        , tooltip: true
                        , tooltipOpts: {
                            content: "'%s' of %x.1 is %y.4"
                            , shifts: {
                                x: -60
                                , y: 25
                            }
                        }
                    };
                    var plotObj = $.plot($("#flot-line-chart"), [{
                        data: sin
                        , label: "sin(x)"
                    , }, {
                        data: cos
                        , label: "cos(x)"
                        }], options);
                }

        });


    </script>
3
  • cual es el problema, no toma el valor nuevo traido de la base de datos?, obtenlo una vez a finalizado el request del ajax Commented el 15 ene. 2019 a las 16:42
  • No entiendo, soy nuevo en AJAX. Disculpa.
    – user110210
    Commented el 15 ene. 2019 a las 16:47
  • osea, lo que debes hacer es comprobar que te está funcionando y trayendo el dato correctamente, seguido, y una vez haya acabado la llamada ajax (no la función, si no la llamada ajax, en el on success) asignar ese valor a tu gráfica, como estas en js puedes pasarlo directamente sin necesidad de pasarlo mediante un input. Commented el 15 ene. 2019 a las 16:52

1 respuesta 1

0

El código PHP se ejecuta cuando carga la página, por más que refresques el div en el cual está la consulta esta última no se volverá a ejecutar.

Para que puedas hacer llamadas Asíncronas puedes Utilizar AJAX y existen muchas librerías que te permiten hacerlo muy fácil (entre ellas JQUERY).

Utilizando AJAX puedes consultar un PHP que te arroje los datos cada X tiempo y actualizar tus datos.

Documentación AJAX - JQuery

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.