JQuery Flot issues when threshold is activated
I am trying to make a plot for a project that requires threshold and tracking.
So, I am following these examples as a reference
- http://flotcharts.org/flot/examples/tracking/index.html
- http://flotcharts.org/flot/examples/threshold/index.html
no threshold, graph with tracking works fine
but when activating the threshold, the tracking did not work on the 3rd and 4th lines, just work on the first 2 lines, everything else does not work
here is my code,
<script src="../../plugins/flot/jquery.flot.min.js" type="text/javascript"></script>
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
<script src="../../plugins/flot/jquery.flot.resize.min.js" type="text/javascript"></script>
<!-- FLOT crosshair PLUGIN - allows the chart to be tracking -->
<script src="../../plugins/flot/jquery.flot.crosshair.min.js" type="text/javascript"></script>
<script src="../../plugins/flot/jquery.flot.threshold.min.js" type="text/javascript"></script>
<script src="../../plugins/flot/jquery.flot.time.min.js" type="text/javascript"></script>
........
........
plot = $.plot("#PH-chart", [
{ data: PH1, color: "#3c8dbc", label: "PH1(x) = 0.00"},
{ data: PH2, color: "#00c0ef", label: "PH2(x) = 0.00" },
{ data: PH3, color: "#3cffff", label: "PH3(x) = 0.00"},
{ data: PH4, color: "#0ff0ef", label: "PH4(x) = 0.00" }
], {
series: {
threshold: {
below: 7,
color: "rgb(200, 20, 30)"
},
lines: {
show: true
}
},
crosshair: {
mode: "x"
},
grid: {
hoverable: true,
autoHighlight: true,
borderColor: "#f3f3f3",
borderWidth: 1,
tickColor: "#f3f3f3"
},
yaxis: {
max: 14
},
xaxis: {
show: true,
mode: "time",
minTickSize: [1, "hour"],
twelveHourClock: true
}
});
var legends = $("#PH-chart .legendLabel");
var updateLegendTimeout = null;
var latestPosition = null;
function updateLegend() {
updateLegendTimeout = null;
var pos = latestPosition;
var axes = plot.getAxes();
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
return;
}
var i, j, dataset = plot.getData();
for (i = 0; i < dataset.length; ++i) {
var series = dataset[i];
// Find the nearest points, x-wise
for (j = 0; j < series.data.length; ++j) {
if (series.data[j][0] > pos.x) {
break;
}
}
// Now Interpolate
var y,
p1 = series.data[j - 1],
p2 = series.data[j];
if (p1 == null) {
y = p2[1];
} else if (p2 == null) {
y = p1[1];
} else {
y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
}
legends.eq(i).text(series.label.replace(/x.*/, + series.data[j][0] + ") = " + y.toFixed(2)));
}
}
$("#PH-chart").bind("plothover", function (event, pos, item) {
latestPosition = pos;
if (!updateLegendTimeout) {
updateLegendTimeout = setTimeout(updateLegend, 50);
}
});
Another problem, I wrote a function that takes the current time in a return timestamp with a human readable form
1431964050616 -> May 18, 2015 5:47:31 am, I tested it and it works great, but when added to the diagram it is not.
function displayTime(currentTime) {
var str = "";
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var seconds = currentTime.getSeconds()
if (minutes < 10) {
minutes = "0" + minutes
}
if (seconds < 10) {
seconds = "0" + seconds
}
str += hours + ":" + minutes + ":" + seconds + " ";
if(hours > 11){
str += "PM"
} else {
str += "AM"
}
return str;
}
I am calling a function in the chart code to change it to, for example, PH1 (05:30:30 PM) = 11.2, but I don't know where the problem is!
legends.eq(i).text(series.label.replace(/x.*/, + displayTime(series.data[j][0]) + ") = " + y.toFixed(2)));
Hope it gets resolved, thanks in advance
+3
source to share
2 answers
The threshold plugin splits the data series into two parts: one above the threshold and one below. This makes six data series out of four (two have only values above the threshold). Two relevant changes to the code:
- skip row added by threshold plugin
- replace
i
withlegends.eq(i)
withlabelindex
as iti
works from 0 to 5 and there are only 4 labels in the legend
New code:
for (i = 0; i < dataset.length; i++) {
var series = dataset[i];
if (series.data.length == 0) {
continue; // if this is a threshold added series, skip it and continue with the next one
}
// Find the nearest points, x-wise
for (j = 0; j < series.data.length; j++) {
if (series.data[j][0] > pos.x) {
break;
}
}
// Now Interpolate
var y,
p1 = series.data[j - 1],
p2 = series.data[j];
if (p1 === undefined) {
y = p2[1];
} else if (p2 === undefined) {
y = p1[1];
} else {
y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
}
var labelindex = parseInt(series.label.substr(2, 1));
legends.eq(labelindex - 1).text(series.label.replace(/x.*/, +series.data[j][0] + ") = " + y.toFixed(2)));
}
See fiddle for working code.
0
source to share
I have a similar workaround that introduces a correction index c.
var c = 0;
for (i = 0; i < dataset.length; i++) {
var series = dataset[i];
if (series.data.length == 0) {
e = e + 1;
continue; // if this is a threshold added series, skip it and continue with the next one
}
// Find the nearest points, x-wise
for (j = 0; j < series.data.length; j++) {
if (series.data[j][0] > pos.x) {
break;
}
}
// Now Interpolate
var y,
p1 = series.data[j - 1],
p2 = series.data[j];
if (p1 === undefined) {
y = p2[1];
} else if (p2 === undefined) {
y = p1[1];
} else {
y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
}
legends.eq(i-c).text(series.label.replace(/x.*/, + series.data[j][0] + ") = " + y.toFixed(2)));
}
0
source to share