flot plots interfering with each other - plot

Question

and thank you once again for your expert support. I have a rather nice implementation of flot, that has one very unfortunate bug. The plot routine works in a loop, so it creates as many plots as there are data files, that pass muster, in the directory. If there is only one data file, then only one plot, the resulting flot plot works fine and the check boxes turn the lines on and off as expected. If I have more than one data file and hence more than one flot plot.. only the bottom one seems to work correctly, the remainder lock up after either one toggle or none.
Can someone give me an idea how to create the flot plots so they do not interfere? I have read elsewhere that the function name does not need to be different, but have not verified this, and I did change the labels, but this added additional weirdness.
Quite a long code.. but it gives you most of what I know...
The first section here actually builds the data sets for flot... then the rest creates the plot...
<script type='text/javascript'>//<![CDATA[
$(function(){
var results = [
<?php
$downsample = 5;
for($k=0;$k<2; $k++){
//$k =0 is Left, $k = 1 is right
if ($k==0){
$side = "L";
$offset = 1;
} elseif ($k==1) {
$side = "R";
$offset = 0;
}
for ($m = 1; $m <= count($trackdata)-1; $m++){
echo "\n{\n\"label\": \"".$m.$side."\",\n"; //echo "\n{\n\"label\": \"".$m." ".$side."\",\n";
echo "\"data\": [";
for ($n=1;$n<=count($PSD[$m*3-2]);$n=$n+$downsample){
$tmp = "[".$PSD[$m*3-2][$n].",".$PSD[$m*3-$offset][$n]."]";
echo $tmp;
if ($n > count($PSD[$m*3-2])-$downsample){
echo "]}";
} else {
echo ",";
}
}
if ($m <> count($trackdata)-1){
echo ",";
} else if ($k<1){
echo ",";
}
}
}
echo "];";
?>
var options = {
legend: {
show: true
},
series: {
points: {
show: false
},
lines: {
show: true
}
},
grid: {
hoverable: true
},
xaxis: {
},
yaxis: {
}
};
var i = 0;
var track = 0;
choiceContainer = $("#labeler<?php echo $i ?>");
var table = $('<table />');
var row = $('<tr/>');
var cell = $('<td width=\"100\"/>');
var temp = $(table);
$.each(results, function(key, val) {
track = track + 1;
val.color = i;
++i;
l = val.label;
if (track == 1){
temp.append(row);
row.append(cell);
cell.append('Left Channel');
} else if(track == <?php echo $tracks ?>){
row = $('<tr/>');
temp.append(row);
cell = $('<td width=\"100\">');
row.append(cell);
cell.append('Right Channel');
} //else if ((track == 7) or (track == 14) or (track == 21) or (track == 28) or (track == 35)){
//}
cell = $('<td width=\"60\"/>');
row.append(cell);
var bar = $('<div style=\"width:18px; white-space:nowrap; float:left\"><bar />');
cell.append(bar);
var inp = $('<input name="' + l + '" id="' + l + '" type="checkbox" checked="checked">');
cell.append(inp);
var bits = $('<label>', {
text: l,
'for': l
});
cell.append(bits);
choiceContainer.append(temp);
});
function plotAccordingToChoices() {
var data = [];
choiceContainer.find("input:checked").each(function() {
var key = this.name;
for (var i = 0; i < results.length; i++) {
if (results[i].label === key) {
data.push(results[i]);
return true;
}
}
});
$.plot($("#placeholder<?php echo $i ?>"), data, options);
}
var previousPoint = null;
$("#placeholder<?php echo $i ?>").bind("plothover", function(event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, item.series.label + " $" + y);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 15,
border: '1px solid #fdd',
padding: '2px',
backgroundColor: '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
plotAccordingToChoices();
choiceContainer.find("input").change(plotAccordingToChoices);
$('.legendColorBox > div').each(function(i){
$(this).clone().prependTo(choiceContainer.find("bar").eq(i));
});
});//]]>
</script>

Answer 1

Okay.. so the dust settled and I did sort out my issue, along with cleaning up a few things. First of all, I created a function for the plot routine. This uncovered the issue I was having, where I was reusing the same variables for the divs into which the data was going, hence the mixed up results. By creating the function, and then driving the function with custom variables for each iteration, the plots operate independently as they should. – Mark
function flotplot(results, choiceContainer, plotholder, numtracks, legendcontainer){
// pass in results, choicecontainer, plotholder
// results = data
// choiceContainer = $("#labeler1");
// plotholder = $("#placeholder0");
var options = {
legend: {
show: true,
container: legendcontainer,
noColumns: 2,
sorted: false
},
series: {
points: {
show: false
},
lines: {
show: true
}
},
grid: {
hoverable: true
},
xaxes: [{
axisLabel: 'Frequency (Hz)',
}],
yaxes: [{
axisLabel: 'Power (dB)',
}],
crosshair: {
mode: "xy",
color: 001,
lineWidth: .5
}
};
var i = 0;
var track = 0;
var table = $('<table />');
var row = $('<tr/>');
var cell = $('<td width=\"100\"/>');
var temp = $(table);
$.each(results, function(key, val) {
track = track + 1;
val.color = i;
++i;
l = val.label;
if (track == 1){
temp.append(row);
row.append(cell);
cell.append('Left Channel');
} else if(track == numtracks){
row = $('<tr/>');
temp.append(row);
cell = $('<td width=\"100\">');
row.append(cell);
cell.append('Right Channel');
} //else if ((track == 7) or (track == 14) or (track == 21) or (track == 28) or (track == 35)){
//}
cell = $('<td width=\"70\"/>');
row.append(cell);
var bar = $('<div style=\"width:18px; white-space:nowrap; float:left\"><bar />');
cell.append(bar);
var inp = $('<input name="' + l + '" id="' + l + '" type="checkbox" checked="checked">');
cell.append(inp);
var bits = $('<label>', {
text: l,
'for': l
});
cell.append(bits);
choiceContainer.append(temp);
});
function plotAccordingToChoices() {
var data = [];
choiceContainer.find("input:checked").each(function() {
var key = this.name;
for (var i = 0; i < results.length; i++) {
if (results[i].label === key) {
data.push(results[i]);
return true;
}
}
});
$.plot(plotholder, data, options);
}
var previousPoint = null;
plotholder.bind("plothover", function(event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, item.series.label + " " + y + "dB");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 15,
border: '1px solid #fdd',
padding: '2px',
backgroundColor: '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
plotAccordingToChoices();
choiceContainer.find("input").change(plotAccordingToChoices);
$('.legendColorBox > div').each(function(i){
$(this).clone().prependTo(choiceContainer.find("bar").eq(i));
});
};//]]>
Here is the structure into which it writes:
echo "<div id=\"placeholder".$i."\" class=\"loading\" style=\"width:600px;height:300px;display: inline; position: relative; float: left\"></div>";
echo "<div id=\"legendholder".$i."\" class=\"loading\" style=\"width:200px; height:300px; display: inline; position: relative; float: left\"></div>";
echo "<div id=\"picker1\" style=\"clear: both\"><p id=\"choices".$i."\">Show the following Tracks:</p></div>";
echo "<div id=\"labeler".$i."\"></div>";