I use fleet diagrams to display ecg signals. The requirement is that the background of the chart look exactly like an ecg graphic document.
All inner gray lines must be aligned with exact dots to draw perfect squares on the ecg sheet. However, there are several lines that are not evenly spaced (they are closer to each other), which makes the ecg graph background incorrect.
Here is what my code does:
MARKING: I wrote a function to create labels on the x and y axis. Markings are dark pink lines on the chart. These markings will be generated on the x and y axis after 4 gray lines (which make up the smaller gray squares inside the large dark pink boxes). It seems that they are drawn correctly.
TONGS: I redefined my own Flot loop generator by writing two functions that generate ticks along the x and y axis. On the x axis, every 40 ms represents one tick (one gray line), and on the y axis 0.1 millivolts represents one gray line. Despite the fact that the functions generate the correct arrays with the correct values for ticks, the tick interval on the fleet chart is small. Some tick lines are more closely spaced, which is incorrect.
Not all ticks are drawn incorrectly. However, those that have the wrong interval are significant in number and are visible with a closer inspection of the chart. For starters, the 4th column and line of the graph have uneven lines. (In a browser outside of jsfiddle, this becomes the third row and third column). These uneven ticks are repeated randomly throughout the chart.
. JSFiddle
- ? ? .
JavaScript:
$(function() {
var d2=[];
function markingsArray(axes) {
var markings = [];
for (var x = 200; x < axes.xaxis.max; x += 200)
markings.push({ xaxis: { from: x, to: x },color: "#EE1983" });
for (var y = -5; y < axes.yaxis.max; y += 0.5)
markings.push({ yaxis: { from: y, to: y },color: "#EE1983" });
return markings;
}
var options = {
series: {
shadowSize: 0,
lines: {
lineWidth: 1,
}
},
yaxis: {
ticks: function(axis){
var res = [];
var tickDrawCounter = 1;
var tickIncrement=0.1;
for(var i=-4.9;i<5;i+=tickIncrement){
if(tickDrawCounter<5){
res.push([parseFloat(i).toFixed(1),""]);
tickDrawCounter++;
}else{
tickDrawCounter=1;
}
}
return res;
},
min: -5,
max: 5
},
xaxis: {
ticks: function(axis) {
var res = [];
var tickDrawCounter = 1;
var tickIncrement=40;
for(var i=tickIncrement;i<8000;i+=tickIncrement){
if(tickDrawCounter<5){
res.push([parseFloat(i),""]);
tickDrawCounter++;
}else
tickDrawCounter=1;
}
return res;
},
min:0,
max:8000,
},
colors: ["#0000A0"],
grid:{
markings: markingsArray,
backgroundColor:"pink",
markingsLineWidth:1,
}
}
$.plot("#placeholder",[ d2],options);
$("#footer").prepend("Flot " + $.plot.version + " – ");
}
);