I have a flot chart that calculates the max Y-axis value based on the last 100 data points and then plots successfully... BUT Sometimes, the running total of an ongoing plot (5 second delay with new data point plotted) exceeds the current max limit. Is there a way to have the Y-axis scale dynamically while plotting new points on the chart?
我有一个flot图表，根据最近的100个数据点计算出最大的y轴值，然后绘制成功……但有时，正在进行的图的运行总数(用新数据点绘制的5秒延迟)超过了当前的最大限制。有没有一种方法可以在绘制新点的同时动态绘制y轴标尺?
This is a valid question about how to dynamically scale the Y Axis of the chart if the current Y-axis is exceeded, since the chart is plotted over time with new points being added every 5 seconds, I was asking how to scale the Y-Axis to fit the NEW plot data if it reaches above the current Max Y Axis value..
这是一个有效的问题如何动态规模的Y轴图如果超出当前轴,因为图表绘制随着时间的推移,新的点添加每5秒,我问如何规模轴以适应新的情节数据是否达到高于当前的马克斯·Y轴值. .
UPDATE:
更新:
here is the code I use (Json returned data) as well as the plot update timer: The "highY" takes the last 100 datapoints from a database and sets the max value to the highest count + 10%
下面是我使用的代码(Json返回的数据)以及plot update timer:“highY”从数据库中获取最后100个数据点，并将最大值设置为最高计数+ 10%
<script type="text/javascript">
$(function () {
var str1 = [], totalPoints = 300;
var str2 = [], totalPoints = 300;
var pts1 = '';
var pts2 = '';
if (pts1 == "" || pts == null) { pts = '2012-10-02 17:17:02'; }
if (pts2 == "" || pts == null) { pts = '2012-10-02 17:17:02'; }
var maxYaxis = <?PHP echo $highY; ?>;
function getStr1() {
var ts1 = new Date().getTime();
var json1 = (function () {
var json1 = null;
var myURL = '<?PHP echo $updateURL; ?>?s=1&ts=' + ts1;
$.ajax({
'async': false,
'global': false,
'url': myURL,
'dataType': "json",
'success': function (data) {
json1 = data;
}
});
return json1;
})();
var y1 = json1['data']['avgpersec'];
var total_1 = json1['data']['running_total'];
document.getElementById('<?PHP echo $string1; ?>Total').innerHTML = total_1;
if (str1.length > 0) { str1 = str1.slice(1); }
while (str1.length < totalPoints) {
var prev = str1.length > 0 ? str1[str1.length - 1] : 50;
str1.push(y1);
}
// zip the generated y values with the x values
var res = [];
for (var i = 0; i < str1.length; ++i){ res.push([i, str1[i]]) }
return res;
}
function getStr2() {
var ts2 = new Date().getTime();
var json2 = (function () {
var json2 = null;
var myURL = '<?PHP echo $updateURL; ?>?s=2&ts=' + ts2;
$.ajax({
'async': false,
'global': false,
'url': myURL,
'dataType': "json",
'success': function (data) {
json2 = data;
}
});
return json2;
})();
var y2 = json2['data']['avgpersec'];
var total_2 = json2['data']['running_total'];
document.getElementById('<?PHP echo $string2; ?>Total').innerHTML = total_2;
if (str2.length > 0) { str2 = str2.slice(1); }
while (str2.length < totalPoints) {
var prev = str2.length > 0 ? str2[str2.length - 1] : 50;
str2.push(y2);
}
// zip the generated y values with the x values
var res = [];
for (var i = 0; i < str2.length; ++i){ res.push([i, str2[i]]) }
return res;
}
// setup control widget
var updateInterval = 5000;
$("#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 = {
series: { shadowSize: 0 }, // drawing is faster without shadows
yaxis: { min: 0, max: maxYaxis},
xaxis: { show: false },
colors: ["<?PHP echo $string1Color; ?>","<?PHP echo $string2Color; ?>"]
};
var plot = $.plot($("#placeholder"), [ getStr1(), getStr2() ], options);
function update() {
plot.setData([ getStr1(), getStr2() ]);
plot.draw();
setTimeout(update, updateInterval);
}
update();
});
</script>
What i am hoping to accomplish is to adjust the "$highY" (Y-axis) value real time as i plot new data points so that the chart will scale if the value of the new data plot point exceeds the current "yaxis { max: # }" set in the chart options.
我希望完成的是在绘制新数据点时调整“$highY”(y轴)的实时值，以便当新的数据点的值超过图表选项中设置的当前“yaxis {max: #}”时，图表将会伸缩。
1 个解决方案
#1
8
I'm assuming that right now you're using flot.setData and flot.draw?
我假设你现在用的是flot。setData flot.draw ?
The simplest solution is just to call $.plot with the new data each time you receive it. At various times, this has been recommended by the authors of the flot plugin as a reasonably efficient way of dealing with this situation. I've used this on graphs that refresh every second and found that it does not use an excessive amount of CPU on the user's computer, even with 3-4 graphs refreshing every second on one page.
最简单的解决方案就是调用$。每次接收到新数据时，绘制新数据。在不同的时候，flot插件的作者推荐这是一种合理有效的处理这种情况的方法。我在每一秒都刷新的图表上使用了这个，并且发现它不会在用户的计算机上使用过多的CPU，即使3-4个图表在一页上每秒刷新一次。
EDIT based on the code you added (and your suggested edit), I would change the update function to look like this:
根据您添加的代码(以及您建议的编辑)进行编辑，我将更新函数更改为如下所示:
function update() {
var data = [ getStr1(), getStr2() ];
//modify options to set the y max to the new y max
options.yaxis.max = maxYaxis;
$.plot($("#placeholder"), data, options);
setTimeout(update, updateInterval);
}
Additionally, you would add code to getStr and getStr that keep the maxYaxis variable up to date.
此外，还可以向getStr和getStr添加代码，使maxYaxis变量保持最新。
#1
8
I'm assuming that right now you're using flot.setData and flot.draw?
我假设你现在用的是flot。setData flot.draw ?
The simplest solution is just to call $.plot with the new data each time you receive it. At various times, this has been recommended by the authors of the flot plugin as a reasonably efficient way of dealing with this situation. I've used this on graphs that refresh every second and found that it does not use an excessive amount of CPU on the user's computer, even with 3-4 graphs refreshing every second on one page.
最简单的解决方案就是调用$。每次接收到新数据时，绘制新数据。在不同的时候，flot插件的作者推荐这是一种合理有效的处理这种情况的方法。我在每一秒都刷新的图表上使用了这个，并且发现它不会在用户的计算机上使用过多的CPU，即使3-4个图表在一页上每秒刷新一次。
EDIT based on the code you added (and your suggested edit), I would change the update function to look like this:
根据您添加的代码(以及您建议的编辑)进行编辑，我将更新函数更改为如下所示:
function update() {
var data = [ getStr1(), getStr2() ];
//modify options to set the y max to the new y max
options.yaxis.max = maxYaxis;
$.plot($("#placeholder"), data, options);
setTimeout(update, updateInterval);
}
Additionally, you would add code to getStr and getStr that keep the maxYaxis variable up to date.
此外，还可以向getStr和getStr添加代码，使maxYaxis变量保持最新。