I'm using Raphael.js to help in creating a Stripchart, but unfortunately it's not displaying the actual data in IE8. The grid for the chart is displaying but that's about it. Does anything in the code jump out at you as to why this may be an issue? Just looking for a second set of eyes, thanks!
/*
* accelerometer charts, needs raphael-min.js
*/
function Stripchart(element) {
var ret = new SChart(element);
return ret;
}
function SChart(element) {
vpwidth = element.offsetWidth;
vpheight = element.offsetHeight;
tzero = 0;
mspertick = 100.0;
bwidth = 0;
bheight = 0;
mgperpx = 1000.0 / 30.0;
chanwidth = 2;
labelheight = 8;
labelevery = 30000;
arraymax = vpwidth * (mspertick/5) * 2;
xchan = new Array(arraymax);
ychan = new Array(arraymax);
zchan = new Array(arraymax);
clock = new Array(arraymax);
head = 0;
tail = 0;
Paper = Raphael(element, vpwidth, vpheight);
this.svg_line = function(x1, y1, x2, y2) {
var ret = "M" + parseInt(x1) + " " + parseInt(y1) + " L" + parseInt(x2) + " " + parseInt(y2);
return ret;
}
this.clear = function() {
Paper.clear();
}
this.draw_grid = function(torigin) {
epsilon = this.clockToTick(torigin-tzero) % 10;
yzero = vpheight / 2;
tline = 0;
tlast = (parseInt(torigin/labelevery) + 1) * labelevery;
for (i = vpwidth-bwidth - epsilon ; i > bwidth; i-= 10) {
svg = this.svg_line(i, bheight, i, vpheight-bheight);
l = Paper.path(svg);
l.attr("stroke", "#eee");
l.attr("stroke-width", "1");
l.attr("opacity", 0.75);
}
for (i = 0; i < torigin-tzero; i += labelevery) {
if(i > torigin - this.tickToClock(vpwidth-bwidth*2) - tzero) {
xpos = vpwidth - bwidth - this.clockToTick(torigin - tzero - i);
minutes = parseInt(i/60000);
seconds = parseInt((i%60000)/1000);
if(seconds < 10) {
seconds = "0" + seconds;
}
timestring = "" + minutes + ":" + seconds;
Paper.text(xpos, vpheight-bheight-(labelheight/2)-1, timestring);
}
}
for (i = yzero; i > bheight; i -= 15) {
svg = this.svg_line(bwidth, i, vpwidth-bwidth, i);
l = Paper.path(svg);
l.attr("stroke", "#eee");
l.attr("stroke-width", "1");
l.attr("opacity", 0.75);
}
for (i = yzero; i < vpheight-bheight; i += 15) {
svg = this.svg_line(bwidth, i, vpwidth-bwidth, i);
l = Paper.path(svg);
l.attr("stroke", "#eee");
l.attr("stroke-width", "1");
l.attr("opacity", 0.75);
}
var svg = this.svg_line(bwidth, yzero, vpwidth-bwidth, yzero);
var l = Paper.path(svg);
l.attr("stroke-width", "1");
l.attr("stroke", "#ddd");
l.attr("opacity", 0.75);
var r = Paper.rect(bwidth, bheight, vpwidth-bwidth*2, vpheight-bheight*2);
r.attr("stroke-width", "2");
r.attr("stroke", "#ccc");
r.attr("opacity", 0.75);
}
this.draw_channel = function(data, color) {
var now;
var svg_path = ""
var mean_datum = 0;
var this_tick;
var prev_tick;
var count;
var xorig = vpwidth-bwidth;
var yorig = vpheight / 2;
// this.text(150, 40, "head = " + head + " tail = " + tail);
if (head == tail) {
return;
}
i = this.prev(head);
now = this.clockToTick(clock[i]);
prev_tick = now;
count = 0;
mean_datum = 0;
// this.text(150, 30, now + " " + i);
// console.log("Start " + this.prev(head) + " end " + this.prev(tail) + " max " + arraymax);
for(i = this.prev(head); i != this.prev(tail); i = this.prev(i)) {
this_tick = this.clockToTick(clock[i]);
if(this_tick == prev_tick) {
mean_datum += data[i];
++count;
} else {
mean_datum = parseInt(mean_datum / count);
if(svg_path.length == 0) {
svg_path = "M";
} else {
svg_path += "L";
}
svg_path += parseInt(xorig - now + prev_tick) + " ";
yplot = yorig - this.chanToPx(mean_datum);
if(yplot < 1) {
yplot = 1;
} else if(yplot > vpheight - bheight) {
yplot = vpheight - bheight;
}
svg_path += parseInt(yplot);
mean_datum = data[i];
count = 1;
prev_tick = this_tick;
}
if(xorig - now + this_tick <= bwidth) {
break;
}
}
var chan_path = Paper.path(svg_path);
if(color == "#00f") {
// console.log(svg_path);
}
chan_path.attr("stroke", color);
chan_path.attr("stroke-path", 1);
chan_path.attr("stroke-width", chanwidth);
chan_path.attr("opacity", 0.9);
}
this.text = function(x, y, s) {
Paper.text(x, y, s);
}
this.prev = function(index) {
var ret;
ret = index - 1;
if(ret <= 0) {
ret += arraymax;
}
return ret;
}
this.next = function(index) {
var ret;
ret = index + 1;
if(ret >= arraymax) {
ret -= arraymax;
}
return ret;
}
this.dequeue = function() {
if(head != tail) {
tail = this.next(tail);
}
}
this.enqueue = function() {
var ret = head;
head = this.next(head);
// detect collision
if(this.next(head) == tail) {
this.dequeue();
}
return ret;
}
this.add_datum = function(time, x, y, z) {
// assume java applet has already handled clock rollover
var entry = this.enqueue();
if(tzero == 0) {
tzero = parseInt(time);
}
clock[entry] = parseInt(time);
xchan[entry] = parseInt(x);
ychan[entry] = parseInt(y);
zchan[entry] = parseInt(z);
// console.log("Adding datum " + entry + " head " + head + " tail " + tail);
// clock[head] = parseInt((parseInt(time) + (mspertick / 2)) / mspertick);
// xchan[head] = parseInt((parseInt(x) + (mgperpx / 2)) / mgperpx);
// ychan[head] = parseInt((parseInt(y) + (mgperpx / 2)) / mgperpx);
// zchan[head] = parseInt((parseInt(z) + (mgperpx / 2)) / mgperpx);
// this.text(150, 30, "(" + clock[head] + ", " + xchan[head] + ", " + ychan[head] + ", " + zchan[head] + ")");
// while(clock[head] - clock[tail] > vpwidth - (bwidth * 2)) {
// tail++;
// if (tail >= arraymax) {
// tail -= arraymax;
// }
// }
}
this.tickToClock = function(tick) {
ret = tick * mspertick;
return ret;
}
this.clockToTick = function(clock_ms) {
ret = parseInt(((mspertick / 2) + clock_ms) / mspertick);
return ret;
}
this.chanToPx = function(chan) {
ret = parseInt((chan + (mgperpx / 2)) / mgperpx);
return ret;
}
this.draw = function() {
var top = this.prev(head);
this.clear();
this.draw_grid(clock[top]);
this.draw_channel(xchan, "#00f");
this.draw_channel(ychan, "#0f0");
this.draw_channel(zchan, "#f00");
}
this.reset = function() {
tzero = 0;
head = 0;
tail = 0;
}
this.add_test_datum = function(tick) {
// add some jitter +/- 16ms
time = tick * mspertick + 16 - Math.floor(Math.random() * 32);
x = Math.floor(Math.random() * 1000) - Math.floor(Math.random() * 1000);
y = 1000 + Math.floor(Math.random() * 1000) - Math.floor(Math.random() * 1000);
z = -1000 + Math.floor(Math.random() * 1000) - Math.floor(Math.random() * 1000);
time = "" + time;
x = "" + x;
y = "" + y;
z = "" + z;
this.add_datum(time, x, y, z);
}
this.test_animate = function(self) {
var tid;
var tcount = 0;
var tmax = 500;
function interval_display() {
for (i=0 ; i<10; i++) {
tcount++;
self.add_test_datum(tcount);
}
self.draw(tcount);
if(tcount > tmax) {
clearInterval(tid);
}
}
tid = setInterval(interval_display, 2500);
}
}