Użytkownik "Pszemol" napisał w wiadomości grup
dyskusyjnych:lrm3c7$vkl$...@d...me...

>Podajcie link do witryny www - chetnie potestuje na Safari/iPhone4.

Na razie "NDA" odnośnie całości - za parę miesięcy będzie publikacja nt.
"Bardzo Poważnego Problemu" (nie-informatycznego) w jakimś peer reviewed coś
tam.

Jak ktoś chce, to może spróbować z samą grafiką: powinno (i na PC nawet to
robi) rysować wykresy XY nieco podobnie jak robi to Matlab. Jest tylko
rysowanie kolorowych linii (ciągłe, przerwane, ...), ale akurat to mi
wystarcza aż nadto. Kolejność ma znaczenie - wywołanie plot musi być po
axes.

vector1, vector2, ... to po prostu tablice liczb.

/**
* var plt = new Plot(canvas);
* plt.range('x',vector1,'y',vector2,'y',vector3, ... );
* plt.axes();
* plt.plot(vector1,vector2,'r-', vector1,vector2,'g-.', ... );
*/
function Plot(canvas) {
this.canvas = canvas;
this.xmin = null;
this.xmax = null;
this.xtic = null;
this.xmtic = null;
this.ymin = null;
this.ymax = null;
this.ytic = null;
this.ymtic = null;
this.fontSize = 12;
this.insetSize = 12;
this.font = this.fontSize + "px sans-serif";
this.text_extend =
this.canvas.getContext("2d").measureText("-1.23456")
.width;
this.margin_left = this.insetSize + this.text_extend;
this.margin_right = this.insetSize;
this.margin_top = this.insetSize;
this.margin_bottom = this.insetSize + this.fontSize;
this.ticSize = this.fontSize / 6;
this.width = this.canvas.width - this.margin_left - this.margin_right;
this.height = this.canvas.height - this.margin_top - this.margin_bottom;
this.fx = function (x) {
return ((x - this.xmin) / (this.xmax - this.xmin) * this.width);
}
this.fy = function (y) {
return ( - (y - this.ymin) / (this.ymax - this.ymin) * this.height);
}
this.prepareContext = function () {
var dc = this.canvas.getContext("2d");
dc.save();
dc.font = this.font;
dc.translate(0.5, 0.5);
dc.translate(this.margin_left, this.canvas.height - this.margin_bottom);
return dc;
}
this.releaseContext = function (dc) {
dc.restore();
}
}
Plot.prototype.axisStroke = function (dc) {
dc.strokeStyle = "#000";
dc.setLineDash([1, 0]);
dc.stroke();
}
Plot.prototype.gridStroke = function (dc, isNotMajorGrid) {
if (isNotMajorGrid) {
dc.strokeStyle = "#111";
dc.setLineDash([1, 2]);
} else {
dc.strokeStyle = "#222";
dc.setLineDash([2, 2]);
}
dc.stroke();
}
Plot.prototype.plotStroke = function (dc, lineStyle) {
if (lineStyle.search("r") != (-1))
dc.strokeStyle = "#f00";
else if (lineStyle.search("g") != (-1))
dc.strokeStyle = "#070";
else if (lineStyle.search("b") != (-1))
dc.strokeStyle = "#007";
else
dc.strokeStyle = "#000";
if (lineStyle.search("--") != (-1))
dc.setLineDash([12, 4]);
else if (lineStyle.search("-.") != (-1))
dc.setLineDash([12, 4, 4, 4]);
else if (lineStyle.search("-") != (-1))
dc.setLineDash([16, 0]);
else if (lineStyle.search(":") != (-1))
dc.setLineDash([4, 4]);
dc.stroke();
}
Plot.prototype.binsize = function (min_value, max_value, sections) {
var bin;
var factors = [1.0, 2.0, 2.5, 4.0, 5.0, 10.0];
var mtictab = [5, 4, 5, 4, 5, 5];
var delta = (max_value - min_value) / sections;
var magnitude = Math.floor(Math.log(delta) / Math.LN10);
var base = Math.exp(magnitude * Math.LN10);
var i = 0;
do {
bin = base * factors[i];
mtic = mtictab[i];
i++;
} while (i < factors.length && bin < delta)
var lo = Math.floor(min_value / bin) * bin;
var hi = Math.ceil(max_value / bin) * bin;
return {
bin : bin,
lo : lo,
hi : hi,
mtic : mtic
};
}
Plot.prototype.range = function (name1, vector1) {
var i = 0;
while (i < arguments.length) {
var name = arguments[i++];
var vector = arguments[i++];
var vector_min = Math.min.apply(Math, vector);
var vector_max = Math.max.apply(Math, vector);
switch (name) {
case 'x':
case 'X':
this.xmin = (this.xmin !== null) ? Math.min(this.xmin, vector_min) :
vector_min;
this.xmax = (this.xmax !== null) ? Math.max(this.xmax, vector_max) :
vector_max;
break;
case 'y':
case 'Y':
this.ymin = (this.ymin !== null) ? Math.min(this.ymin, vector_min) :
vector_min;
this.ymax = (this.ymax !== null) ? Math.max(this.ymax, vector_max) :
vector_max;
break;
}
}
}
Plot.prototype.axes = function (xBins, yBins) {
xBins = xBins || 9;
yBins = yBins || 7;
var bx = this.binsize(this.xmin, this.xmax, xBins);
this.xtic = bx.bin;
this.xmin = bx.lo;
this.xmax = bx.hi;
this.xmtic = bx.mtic;
var by = this.binsize(this.ymin, this.ymax, yBins);
this.ytic = by.bin;
this.ymin = by.lo;
this.ymax = by.hi;
this.ymtic = by.mtic;
var dc = this.prepareContext();
dc.textBaseline = "top";
for (var k = 0, x = this.xmin; x <= this.xmax; k++, x += this.xtic /
this.xmtic) {
var i = this.fx(x);
if ((k % this.xmtic) == 0) {
if (x != this.xmin)
dc.textAlign = "center";
else
dc.textAlign = "left";
if (this.width - i < this.text_extend / 2)
dc.textAlign = "right";
if (Math.abs(x) < Number.EPSILON * Math.abs(this.xmax - this.xmin))
dc.fillText(Number(0).toExponential(2), i, this.ticSize);
else
dc.fillText(x.toExponential(2), i, this.ticSize);
}
dc.beginPath();
dc.moveTo(i, 0);
dc.lineTo(i, -this.height);
this.gridStroke(dc, k % this.xmtic);
dc.beginPath();
dc.moveTo(i, 0);
dc.lineTo(i, this.ticSize);
this.axisStroke(dc);
}
dc.textAlign = "right";
dc.textBaseline = "middle";
for (var k = 0, y = this.ymin; y <= this.ymax; k++, y += this.ytic /
this.ymtic) {
var j = this.fy(y);
if (k % this.ymtic == 0) {
if (Math.abs(y) < Number.EPSILON * Math.abs(this.ymax - this.ymin))
dc.fillText(Number(0).toExponential(2), -2 * this.ticSize, j);
else
dc.fillText(y.toExponential(2), -2 * this.ticSize, j);
}
dc.beginPath();
dc.moveTo(0, j);
dc.lineTo(this.width, j);
this.gridStroke(dc, k % this.ymtic);
dc.beginPath();
dc.moveTo(0, j);
dc.lineTo(-this.ticSize, j);
this.axisStroke(dc);
}
dc.beginPath();
dc.moveTo(0, 0);
dc.lineTo(0, -this.height);
this.axisStroke(dc);
dc.beginPath();
dc.moveTo(0, 0);
dc.lineTo(this.width, 0);
this.axisStroke(dc);
this.releaseContext(dc);
}
Plot.prototype.plot = function (xvector, yvector, lineStyle) {
var iargin = 0;
var nargin = arguments.length;
while (iargin < nargin) {
xvector = arguments[iargin++];
yvector = arguments[iargin++];
if (iargin < nargin && typeof(arguments[iargin]) == typeof(""))
lineStyle = arguments[iargin++];
else
lineStyle = "r-";
if (this.xmin === null || this.xmax === null)
this.range('x', xvector);
if (this.ymin === null || this.ymax === null)
this.range('y', yvector);
var dc = this.prepareContext();
dc.beginPath();
var i = this.fx(xvector[0]);
var j = this.fy(yvector[0]);
dc.moveTo(i, j);
for (k = 0; k < xvector.length; k++) {
i = this.fx(xvector[k]);
j = this.fy(yvector[k]);
dc.lineTo(i, j);
}
this.plotStroke(dc, lineStyle);
this.releaseContext(dc);
}
}

//EOF