Question

我想制作一个实时的Flot图表，它将从数据库中获取JSON数据。

我创建了所有文件，幸运的是我可以使用JSON数据制作图表，但问题是图表没有我想要的“流量”。

x轴不稳定。这真正意味着我的数组不会移动数据，但只有越来越长的json数据。

这是我想要的一个例子 - ＆gt; http://www.flotcharts.org/flot/examples/realtime/index.html

和我做的 - ＆gt; http://www.flotcharts.org/flot/examples/ajax/index.html（按'轮询数据'）。

所以，我的程序做的是：

[0,44],[1,45],[2,42]…,[n,87]  ==> 
[0,44],[1,45],[2,42]…,[n-1,87],[n,92]

(if x axis = 100 then will go 101)

我认为我应该做的是：

[0,44],[1,45],[2,42]…,[n,87]  ==> 
[1,45],[2,42],[3,48]…,[n-1,87],[n,92]

(if x axis =100 it will stay 100)

任何类型的解决方案/建议都会很棒！

提前致谢！

（以下代码试图找到解决方案..）

   <script type="text/javascript">
        $(document).ready(function(){
            var jsonDynamicData;
            var id = 9;
            var totalPoints = 10;
            getRandomData();
            function getRandomData() {
                var result = [];
                $.ajaxSetup({async:false});
                $.post('get_data_test.php', {id:id}, 
                    function(r){
                        jsonDynamicData = jQuery.parseJSON(r);
                        //console.log(jsonDynamicData);                 

                        if (jsonDynamicData.length > 0 ){
                            jsonDynamicData = jsonDynamicData.slice(1);
                        }

                        while(jsonDynamicData.length < totalPoints)
                        {
                            var prev = jsonDynamicData.length > 0 ? jsonDynamicData[jsonDynamicData.length - 1] : 100,
                                y = jsonDynamicData[jasonDynamicData.length];
                               // I'm pretty sure that y value is wrong...
                            jsonDynamicData.push(y);
                        };
                        // Zip the generated y values with the x values
                        for (var i = 0; i < jsonDynamicData.length; ++i) {
                            result.push([i, jsonDynamicData[i]])
                        }
                });
                return result;
            }

                // Set up the control widget
                var updateInterval = 2000;
                $("#updateInterval").val(updateInterval).change(function () {
                    var v = $(this).val();
                    if (v && !isNaN(+v)) {
                        updateInterval = +v;
                        if (updateInterval < 1) {
                            updateInterval = 1;
                        } else if (updateInterval > 2000) {
                            updateInterval = 2000;
                        }
                        $(this).val("" + updateInterval);
                    }
                });
                var options = {
                    series: {
                        shadowSize: 0   // Drawing is faster without shadows
                    },
                    xaxis: {
                        show: true
                    }
                };
                var plot = $.plot("#placeholder1", [ 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();

        });
    </script>

Answer 1

尝试使用shift（）而不是slice（1）。

实时flot图表＆＃39;稳定＆＃39; x轴？

1 个答案: