Permalink
Browse files

Use stroke and auxiliary functions to make crisper lines

  • Loading branch information...
topfunky committed Feb 15, 2010
1 parent 7ecb359 commit de13db84bb102adf8bc134057df64bb7b859b290
Showing with 46 additions and 8 deletions.
  1. +46 −8 lib/topfunky-sparkline.js
View
@@ -28,6 +28,27 @@ function TopfunkySparkline(elementName, datapoints, opts) {
this.goodThreshold = opts.goodThreshold || 20;
this.target = opts.target || 15;
+ ////
+ // Runs Math.ceil on all arguments to make a crisp rectangle.
+ // For best results, use a solid 1px stroke.
+
+ this.crispRect = function (x, y, width, height) {
+ return this.paper.rect(Math.ceil(x),
+ Math.ceil(y),
+ Math.ceil(width > 0 ? width-1 : width),
+ Math.ceil(height > 0 ? height-1 : height)
+ );
+ };
+
+ this.crispLine = function (x, y, width, height) {
+ return this.paper.path("M {x} {y} l {width} {height}".supplant({
+ 'x': Math.ceil(x),
+ 'y': Math.ceil(y),
+ 'width': Math.ceil(width),
+ 'height': Math.ceil(height)
+ }));
+ };
+
this.draw = function () {
this.paper = Raphael(elementName, this.width, this.height);
@@ -55,17 +76,23 @@ function TopfunkySparkline(elementName, datapoints, opts) {
}
xOffset = i*(this.barWidth + this.spacing) + this.width - datapoints.length*(this.barWidth + this.spacing);
- yOffset = parseInt(this.height - normalizedDatapoints[i] * this.height, 10);
- bar = this.paper.rect(xOffset,
- yOffset,
- this.barWidth,
- Math.ceil(normalizedDatapoints[i] * this.height));
- bar.attr({stroke: 'transparent', fill: barColor});
+ yOffset = this.height - normalizedDatapoints[i] * this.height;
+ bar = this.crispRect(xOffset,
+ yOffset,
+ this.barWidth,
+ normalizedDatapoints[i] * this.height);
+ bar.attr({
+ stroke: barColor,
+ fill: barColor
+ });
}
// Target line
- targetLine = this.paper.rect(0, parseInt(this.height - (this.target/maximumDatavalue)*this.height, 10), this.width, 1);
- targetLine.attr({stroke: "transparent", fill: this.colorTarget});
+ targetLine = this.crispLine(0,
+ this.height - (this.target/maximumDatavalue)*this.height,
+ this.width,
+ 0);
+ targetLine.attr({stroke: this.colorTarget, fill: 'transparent'});
// Title
if (opts.title) {
@@ -89,3 +116,14 @@ function TopfunkySparkline(elementName, datapoints, opts) {
this.draw();
}
+
+ // "{animal} on a {transport}".supplant({animal: "frog", transport: "rocket"})
+ String.prototype.supplant = function (o) {
+ return this.replace(/\{([^{}]*)\}/g,
+ function (a, b) {
+ var r = o[b];
+ return typeof r === 'string' || typeof r === 'number' ? r : a;
+ }
+ );
+ };
+

0 comments on commit de13db8

Please sign in to comment.