'];
-
- var axes = allAxes();
- for (var j = 0; j < axes.length; ++j) {
- var axis = axes[j], box = axis.box;
- if (!axis.show)
- continue;
- //debug: html.push('
')
- html.push('
');
- for (var i = 0; i < axis.ticks.length; ++i) {
- var tick = axis.ticks[i];
- if (!tick.label || tick.v < axis.min || tick.v > axis.max)
- continue;
-
- var pos = {}, align;
-
- if (axis.direction == "x") {
- align = "center";
- pos.left = Math.round(plotOffset.left + axis.p2c(tick.v) - axis.labelWidth/2);
- if (axis.position == "bottom")
- pos.top = box.top + box.padding;
- else
- pos.bottom = canvasHeight - (box.top + box.height - box.padding);
- }
- else {
- pos.top = Math.round(plotOffset.top + axis.p2c(tick.v) - axis.labelHeight/2);
- if (axis.position == "left") {
- pos.right = canvasWidth - (box.left + box.width - box.padding)
- align = "right";
- }
- else {
- pos.left = box.left + box.padding;
- align = "left";
- }
- }
-
- pos.width = axis.labelWidth;
-
- var style = ["position:absolute", "text-align:" + align ];
- for (var a in pos)
- style.push(a + ":" + pos[a] + "px")
-
- html.push('
' + tick.label + '
');
- }
- html.push('
');
- }
-
- html.push('
');
-
- placeholder.append(html.join(""));
- }
-
- function drawSeries(series) {
- if (series.lines.show)
- drawSeriesLines(series);
- if (series.bars.show)
- drawSeriesBars(series);
- if (series.points.show)
- drawSeriesPoints(series);
- }
-
- function drawSeriesLines(series) {
- function plotLine(datapoints, xoffset, yoffset, axisx, axisy) {
- var points = datapoints.points,
- ps = datapoints.pointsize,
- prevx = null, prevy = null;
-
- ctx.beginPath();
- for (var i = ps; i < points.length; i += ps) {
- var x1 = points[i - ps], y1 = points[i - ps + 1],
- x2 = points[i], y2 = points[i + 1];
-
- if (x1 == null || x2 == null)
- continue;
-
- // clip with ymin
- if (y1 <= y2 && y1 < axisy.min) {
- if (y2 < axisy.min)
- continue; // line segment is outside
- // compute new intersection point
- x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
- y1 = axisy.min;
- }
- else if (y2 <= y1 && y2 < axisy.min) {
- if (y1 < axisy.min)
- continue;
- x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
- y2 = axisy.min;
- }
-
- // clip with ymax
- if (y1 >= y2 && y1 > axisy.max) {
- if (y2 > axisy.max)
- continue;
- x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
- y1 = axisy.max;
- }
- else if (y2 >= y1 && y2 > axisy.max) {
- if (y1 > axisy.max)
- continue;
- x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
- y2 = axisy.max;
- }
-
- // clip with xmin
- if (x1 <= x2 && x1 < axisx.min) {
- if (x2 < axisx.min)
- continue;
- y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
- x1 = axisx.min;
- }
- else if (x2 <= x1 && x2 < axisx.min) {
- if (x1 < axisx.min)
- continue;
- y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
- x2 = axisx.min;
- }
-
- // clip with xmax
- if (x1 >= x2 && x1 > axisx.max) {
- if (x2 > axisx.max)
- continue;
- y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
- x1 = axisx.max;
- }
- else if (x2 >= x1 && x2 > axisx.max) {
- if (x1 > axisx.max)
- continue;
- y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
- x2 = axisx.max;
- }
-
- if (x1 != prevx || y1 != prevy)
- ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset);
-
- prevx = x2;
- prevy = y2;
- ctx.lineTo(axisx.p2c(x2) + xoffset, axisy.p2c(y2) + yoffset);
- }
- ctx.stroke();
- }
-
- function plotLineArea(datapoints, axisx, axisy) {
- var points = datapoints.points,
- ps = datapoints.pointsize,
- bottom = Math.min(Math.max(0, axisy.min), axisy.max),
- i = 0, top, areaOpen = false,
- ypos = 1, segmentStart = 0, segmentEnd = 0;
-
- // we process each segment in two turns, first forward
- // direction to sketch out top, then once we hit the
- // end we go backwards to sketch the bottom
- while (true) {
- if (ps > 0 && i > points.length + ps)
- break;
-
- i += ps; // ps is negative if going backwards
-
- var x1 = points[i - ps],
- y1 = points[i - ps + ypos],
- x2 = points[i], y2 = points[i + ypos];
-
- if (areaOpen) {
- if (ps > 0 && x1 != null && x2 == null) {
- // at turning point
- segmentEnd = i;
- ps = -ps;
- ypos = 2;
- continue;
- }
-
- if (ps < 0 && i == segmentStart + ps) {
- // done with the reverse sweep
- ctx.fill();
- areaOpen = false;
- ps = -ps;
- ypos = 1;
- i = segmentStart = segmentEnd + ps;
- continue;
- }
- }
-
- if (x1 == null || x2 == null)
- continue;
-
- // clip x values
-
- // clip with xmin
- if (x1 <= x2 && x1 < axisx.min) {
- if (x2 < axisx.min)
- continue;
- y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
- x1 = axisx.min;
- }
- else if (x2 <= x1 && x2 < axisx.min) {
- if (x1 < axisx.min)
- continue;
- y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
- x2 = axisx.min;
- }
-
- // clip with xmax
- if (x1 >= x2 && x1 > axisx.max) {
- if (x2 > axisx.max)
- continue;
- y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
- x1 = axisx.max;
- }
- else if (x2 >= x1 && x2 > axisx.max) {
- if (x1 > axisx.max)
- continue;
- y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
- x2 = axisx.max;
- }
-
- if (!areaOpen) {
- // open area
- ctx.beginPath();
- ctx.moveTo(axisx.p2c(x1), axisy.p2c(bottom));
- areaOpen = true;
- }
-
- // now first check the case where both is outside
- if (y1 >= axisy.max && y2 >= axisy.max) {
- ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.max));
- ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.max));
- continue;
- }
- else if (y1 <= axisy.min && y2 <= axisy.min) {
- ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.min));
- ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.min));
- continue;
- }
-
- // else it's a bit more complicated, there might
- // be a flat maxed out rectangle first, then a
- // triangular cutout or reverse; to find these
- // keep track of the current x values
- var x1old = x1, x2old = x2;
-
- // clip the y values, without shortcutting, we
- // go through all cases in turn
-
- // clip with ymin
- if (y1 <= y2 && y1 < axisy.min && y2 >= axisy.min) {
- x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
- y1 = axisy.min;
- }
- else if (y2 <= y1 && y2 < axisy.min && y1 >= axisy.min) {
- x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
- y2 = axisy.min;
- }
-
- // clip with ymax
- if (y1 >= y2 && y1 > axisy.max && y2 <= axisy.max) {
- x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
- y1 = axisy.max;
- }
- else if (y2 >= y1 && y2 > axisy.max && y1 <= axisy.max) {
- x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
- y2 = axisy.max;
- }
-
- // if the x value was changed we got a rectangle
- // to fill
- if (x1 != x1old) {
- ctx.lineTo(axisx.p2c(x1old), axisy.p2c(y1));
- // it goes to (x1, y1), but we fill that below
- }
-
- // fill triangular section, this sometimes result
- // in redundant points if (x1, y1) hasn't changed
- // from previous line to, but we just ignore that
- ctx.lineTo(axisx.p2c(x1), axisy.p2c(y1));
- ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2));
-
- // fill the other rectangle if it's there
- if (x2 != x2old) {
- ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2));
- ctx.lineTo(axisx.p2c(x2old), axisy.p2c(y2));
- }
- }
- }
-
- ctx.save();
- ctx.translate(plotOffset.left, plotOffset.top);
- ctx.lineJoin = "round";
-
- var lw = series.lines.lineWidth,
- sw = series.shadowSize;
- // FIXME: consider another form of shadow when filling is turned on
- if (lw > 0 && sw > 0) {
- // draw shadow as a thick and thin line with transparency
- ctx.lineWidth = sw;
- ctx.strokeStyle = "rgba(0,0,0,0.1)";
- // position shadow at angle from the mid of line
- var angle = Math.PI/18;
- plotLine(series.datapoints, Math.sin(angle) * (lw/2 + sw/2), Math.cos(angle) * (lw/2 + sw/2), series.xaxis, series.yaxis);
- ctx.lineWidth = sw/2;
- plotLine(series.datapoints, Math.sin(angle) * (lw/2 + sw/4), Math.cos(angle) * (lw/2 + sw/4), series.xaxis, series.yaxis);
- }
-
- ctx.lineWidth = lw;
- ctx.strokeStyle = series.color;
- var fillStyle = getFillStyle(series.lines, series.color, 0, plotHeight);
- if (fillStyle) {
- ctx.fillStyle = fillStyle;
- plotLineArea(series.datapoints, series.xaxis, series.yaxis);
- }
-
- if (lw > 0)
- plotLine(series.datapoints, 0, 0, series.xaxis, series.yaxis);
- ctx.restore();
- }
-
- function drawSeriesPoints(series) {
- function plotPoints(datapoints, radius, fillStyle, offset, shadow, axisx, axisy, symbol) {
- var points = datapoints.points, ps = datapoints.pointsize;
-
- for (var i = 0; i < points.length; i += ps) {
- var x = points[i], y = points[i + 1];
- if (x == null || x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max)
- continue;
-
- ctx.beginPath();
- x = axisx.p2c(x);
- y = axisy.p2c(y) + offset;
- if (symbol == "circle")
- ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false);
- else
- symbol(ctx, x, y, radius, shadow);
- ctx.closePath();
-
- if (fillStyle) {
- ctx.fillStyle = fillStyle;
- ctx.fill();
- }
- ctx.stroke();
- }
- }
-
- ctx.save();
- ctx.translate(plotOffset.left, plotOffset.top);
-
- var lw = series.points.lineWidth,
- sw = series.shadowSize,
- radius = series.points.radius,
- symbol = series.points.symbol;
- if (lw > 0 && sw > 0) {
- // draw shadow in two steps
- var w = sw / 2;
- ctx.lineWidth = w;
- ctx.strokeStyle = "rgba(0,0,0,0.1)";
- plotPoints(series.datapoints, radius, null, w + w/2, true,
- series.xaxis, series.yaxis, symbol);
-
- ctx.strokeStyle = "rgba(0,0,0,0.2)";
- plotPoints(series.datapoints, radius, null, w/2, true,
- series.xaxis, series.yaxis, symbol);
- }
-
- ctx.lineWidth = lw;
- ctx.strokeStyle = series.color;
- plotPoints(series.datapoints, radius,
- getFillStyle(series.points, series.color), 0, false,
- series.xaxis, series.yaxis, symbol);
- ctx.restore();
- }
-
- function drawBar(x, y, b, barLeft, barRight, offset, fillStyleCallback, axisx, axisy, c, horizontal, lineWidth) {
- var left, right, bottom, top,
- drawLeft, drawRight, drawTop, drawBottom,
- tmp;
-
- // in horizontal mode, we start the bar from the left
- // instead of from the bottom so it appears to be
- // horizontal rather than vertical
- if (horizontal) {
- drawBottom = drawRight = drawTop = true;
- drawLeft = false;
- left = b;
- right = x;
- top = y + barLeft;
- bottom = y + barRight;
-
- // account for negative bars
- if (right < left) {
- tmp = right;
- right = left;
- left = tmp;
- drawLeft = true;
- drawRight = false;
- }
- }
- else {
- drawLeft = drawRight = drawTop = true;
- drawBottom = false;
- left = x + barLeft;
- right = x + barRight;
- bottom = b;
- top = y;
-
- // account for negative bars
- if (top < bottom) {
- tmp = top;
- top = bottom;
- bottom = tmp;
- drawBottom = true;
- drawTop = false;
- }
- }
-
- // clip
- if (right < axisx.min || left > axisx.max ||
- top < axisy.min || bottom > axisy.max)
- return;
-
- if (left < axisx.min) {
- left = axisx.min;
- drawLeft = false;
- }
-
- if (right > axisx.max) {
- right = axisx.max;
- drawRight = false;
- }
-
- if (bottom < axisy.min) {
- bottom = axisy.min;
- drawBottom = false;
- }
-
- if (top > axisy.max) {
- top = axisy.max;
- drawTop = false;
- }
-
- left = axisx.p2c(left);
- bottom = axisy.p2c(bottom);
- right = axisx.p2c(right);
- top = axisy.p2c(top);
-
- // fill the bar
- if (fillStyleCallback) {
- c.beginPath();
- c.moveTo(left, bottom);
- c.lineTo(left, top);
- c.lineTo(right, top);
- c.lineTo(right, bottom);
- c.fillStyle = fillStyleCallback(bottom, top);
- c.fill();
- }
-
- // draw outline
- if (lineWidth > 0 && (drawLeft || drawRight || drawTop || drawBottom)) {
- c.beginPath();
-
- // FIXME: inline moveTo is buggy with excanvas
- c.moveTo(left, bottom + offset);
- if (drawLeft)
- c.lineTo(left, top + offset);
- else
- c.moveTo(left, top + offset);
- if (drawTop)
- c.lineTo(right, top + offset);
- else
- c.moveTo(right, top + offset);
- if (drawRight)
- c.lineTo(right, bottom + offset);
- else
- c.moveTo(right, bottom + offset);
- if (drawBottom)
- c.lineTo(left, bottom + offset);
- else
- c.moveTo(left, bottom + offset);
- c.stroke();
- }
- }
-
- function drawSeriesBars(series) {
- function plotBars(datapoints, barLeft, barRight, offset, fillStyleCallback, axisx, axisy) {
- var points = datapoints.points, ps = datapoints.pointsize;
-
- for (var i = 0; i < points.length; i += ps) {
- if (points[i] == null)
- continue;
- drawBar(points[i], points[i + 1], points[i + 2], barLeft, barRight, offset, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal, series.bars.lineWidth);
- }
- }
-
- ctx.save();
- ctx.translate(plotOffset.left, plotOffset.top);
-
- // FIXME: figure out a way to add shadows (for instance along the right edge)
- ctx.lineWidth = series.bars.lineWidth;
- ctx.strokeStyle = series.color;
- var barLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2;
- var fillStyleCallback = series.bars.fill ? function (bottom, top) { return getFillStyle(series.bars, series.color, bottom, top); } : null;
- plotBars(series.datapoints, barLeft, barLeft + series.bars.barWidth, 0, fillStyleCallback, series.xaxis, series.yaxis);
- ctx.restore();
- }
-
- function getFillStyle(filloptions, seriesColor, bottom, top) {
- var fill = filloptions.fill;
- if (!fill)
- return null;
-
- if (filloptions.fillColor)
- return getColorOrGradient(filloptions.fillColor, bottom, top, seriesColor);
-
- var c = $.color.parse(seriesColor);
- c.a = typeof fill == "number" ? fill : 0.4;
- c.normalize();
- return c.toString();
- }
-
- function insertLegend() {
- placeholder.find(".legend").remove();
-
- if (!options.legend.show)
- return;
-
- var fragments = [], rowStarted = false,
- lf = options.legend.labelFormatter, s, label;
- for (var i = 0; i < series.length; ++i) {
- s = series[i];
- label = s.label;
- if (!label)
- continue;
-
- if (i % options.legend.noColumns == 0) {
- if (rowStarted)
- fragments.push('');
- fragments.push('