JavaScript自动更新图

时间:2013-07-18 11:32:19

标签: javascript

Hello StackOverFlow我不想打扰你们,但我真的很难用JavaScript而且我正在寻找一种方法来简单地监控这个Javascript,以便从我的一个php文件中获取Y变量。

示例:http://foo.com/bar.php所以我可以拥有用户数据的实时图表

非常感谢你的帮助我很感激

以下代码是我猜测生成随机数据的示例JavaScript代码。

/* Lines with autodrowing */

$(function () {
    // we use an inline data source in the example, usually data would
    // be fetched from a server
    var data = [], totalPoints = 200;
    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] : 50;
            var y = prev + Math.random() * 10 - 5;
            if (y < 0)
                y = 0;
            if (y > 100)
                y = 100;
            data.push(y);
        }

        // zip the generated y values with the x values
        var res = [];
        for (var i = 0; i < data.length; ++i)
            res.push([i, data[i]])
        return res;
    }

    // setup 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;
            if (updateInterval > 2000)
                updateInterval = 2000;
            $(this).val("" + updateInterval);
        }
    });

    // setup plot
    var options = {
        yaxis: { min: 0, max: 100 },
        xaxis: { min: 0, max: 100 },
        colors: ["#aed267"],
        series: {
                   lines: { 
                        lineWidth: 2, 
                        fill: true,
                        fillColor: { colors: [ { opacity: 0.4 }, { opacity: 0 } ] },
                        //"#dcecf9"
                        steps: false

                    }
               }
    };
    var plot = $.plot($(".updating"), [ getRandomData() ], options);

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

        setTimeout(update, updateInterval);
    }

    update();
});

1 个答案:

答案 0 :(得分:0)

我不确定你的问题是什么。 如果您只想从服务器获取Y值,请执行ajax调用:

var yVal;
$.ajax({
      url:"/yourserv?action=getYValue",
      success: function(data){
         yVal = data;
      }
  });