Gráficos com JavaScript em tempo real [RESOLVIDO]

Bom dia estou tentando fazer um grafico em tempo real, estou usando jQuery e Flot, mas esta acontecendo alguma coisa errada, por que o grafico não ta sendo atualizado.
abaixo esta o codigo p vcs darem uma olhada, obrigado!

<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples</title>
     <script type="text/javascript" language="javascript"
	src='<%=request.getContextPath()%>/js/jquery.js'></script>
    <script type="text/javascript" language="javascript"
	src='<%=request.getContextPath()%>/js/flot.js'></script>
 </head>
    <body>
    <h1>Testando Biblioteca Flot</h1>

    <div id="placeholder" style="width:600px;height:300px;"></div>

     <input id="atualizarIntervalo" type="text" value="" style="text-align: right;>

<script type="text/javascript">
$(function () {
  
    var data = [], totalPontos = 300;
    function getRandomData() {
        if (data.length > 0)
            data = data.slice(1);

        while (data.length < totalPontos) {
            var prev = data.length > 0 ? data[data.length - 1] : 50;
            var y = prev + Math.random() * 10 - 5;
            if (y < 0)
                y = 0;
            if (y > 100)
                y = 100;
            data.push(y);

        }

        var res = [];
        for (var i = 0; i < data.length; ++i)
            res.push([i, data[i]])
        return res;
    }

    var atualizarIntervalo = 30;
    $("#atualizarIntervalo").val(atualizarIntervalo).change(function () {
        var v = $(this).val();
        if (v && !isNaN(+v)) {
            atualizarIntervalo = +v;
            if (atualizarIntervalo < 1)
                atualizarIntervalo = 1;
            if (atualizarIntervalo > 2000)
                atualizarIntervalo = 2000;
            $(this).val("" + atualizarIntervalo);
        }
    });

   var opções = {
        series: { shadowSize: 0 },
        yaxis: { min: 0, max: 100 },
        xaxis: { show: false }
    };
    var plot = $.plot($("#placeholder"), [ getRandomData() ], opções);

    function atualiza() {
        plot.setData([ getRandomData() ]);
        plot.draw();
        
        setTimeout(atualiza, atualizaIntervalo);
    }

    atualiza();
});
</script>

 </body>
</html>

2 Respostas

Topicos relacionados