I have time series on x axis and some power watts info at y axis. The first time both the placeholder and overview graph display fine. When I select area of overview graph value change in placeholder graph but it nit shows or draw any line.
在x轴上有时间序列，在y轴上有一些功率。第一次占位符和概览图都显示良好。当我在占位符图中选择概览图的区域时，它不显示或画任何线。
JavaScript code:
JavaScript代码:
function graph(jsonarray) {
var options = {
yaxis: {
/* color:"#00FF00",
tickColor:"#FF0000",font: "sans 9px",reserveSpace: true,
axisLabel: "Watts",
axisLabelUseCanvas: true*/
},
xaxis: {
mode: "time",
timeformat: "%H:%M:%S",
minTickSize: [1, "second"]
},
lines: {
show: true
},
points: {
show: false,
hoverable: true
},
grid: {
show: true,
hoverable: true,
clickable: true,
backgroundColor: {
colors: ["#fff", "#eee"]
}
},
legend: {
show: false,
type: "canvas",
position: "se",
backgroundColor: "#ff4",
backgroundOpacity: 0.35
},
selection: {
mode: "xy"
}
}
var d2 = JSON.stringify(jsonarray);
var d1 = eval(jsonarray);
globalJson = d1;
var data = [];
for (var i = 0; i < d1.length; i++) {
var temp = (d1[i].datetime.time) + 19800000; //GMT 5:30 is added to get actul time
data.push([temp, d1[i].watts]);
}
var plot = $.plot($("#placeholder1"), [data], options);
var overviewoptions = {
legend: {
show: false
},
series: {
lines: {
show: true,
lineWidth: 1
},
shadowSize: 0
},
yaxis: {},
xaxis: {
mode: "time",
timeformat: "%H:%M:%S",
minTickSize: [1, "second"]
},
grid: {
color: "#999"
},
selection: {
mode: "xy"
}
}
var overview = $.plot("#overview", [data], overviewoptions);
// now connect the two
$("#placeholder1").bind("plotselected", function (event, ranges) {
// clamp the zooming to prevent eternal zoom
if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {
ranges.xaxis.to = ranges.xaxis.from + 0.00001;
}
if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) {
ranges.yaxis.to = ranges.yaxis.from + 0.00001;
}
// do the zooming
plot = $.plot("#placeholder1", trimData(eval(jsonarray), ranges.xaxis.from, ranges.xaxis.to),
$.extend(true, {}, overviewoptions, {
xaxis: {
min: ranges.xaxis.from,
max: ranges.xaxis.to
},
yaxis: {
min: ranges.yaxis.from,
max: ranges.yaxis.to
},
}));
// don't fire event on the overview to prevent eternal loop
overview.setSelection(ranges, true);
});
$("#overview").bind("plotselected", function (event, ranges) {
plot.setSelection(ranges);
});
return true;
}
two output image is below. (sorry could not attached (because I don't have 10 reputation). I could not find any clue why this happen when x and y axis value change but line is not drawn.
下面是两个输出图像。(抱歉不能附上(因为我没有10个信誉)。我找不到任何线索，为什么当x轴和y轴值发生变化时，却没有画出直线。
1 个解决方案
#1
1
Your original data is provided as an array like this:
您的原始数据是作为一个数组提供的:
[[time, watts], ...]
If your comment is accurate, then the output of trimData appears to be completely different. An array of objects would be interpreted as separate series, which would produce an empty result if you tried to plot them as a line.
如果你的评论是准确的，那么trimData的输出看起来是完全不同的。对象数组将被解释为单独的序列，如果您试图将它们绘制为一行，那么将产生一个空结果。
You should either fix trimData to match the original format or skip it entirely, since Flot will only show those points that appear within the range. The only reason to trim down the data is if you have a large amount, and are concerned about performance.
您应该修改trimData以匹配原始格式，或者完全跳过它，因为Flot只显示范围内的点。减少数据的唯一原因是如果您拥有大量数据，并且关心性能。
#1
1
Your original data is provided as an array like this:
您的原始数据是作为一个数组提供的:
[[time, watts], ...]
If your comment is accurate, then the output of trimData appears to be completely different. An array of objects would be interpreted as separate series, which would produce an empty result if you tried to plot them as a line.
如果你的评论是准确的，那么trimData的输出看起来是完全不同的。对象数组将被解释为单独的序列，如果您试图将它们绘制为一行，那么将产生一个空结果。
You should either fix trimData to match the original format or skip it entirely, since Flot will only show those points that appear within the range. The only reason to trim down the data is if you have a large amount, and are concerned about performance.
您应该修改trimData以匹配原始格式，或者完全跳过它，因为Flot只显示范围内的点。减少数据的唯一原因是如果您拥有大量数据，并且关心性能。