Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Refactored to use instance variables.

  • Loading branch information...
commit aa21779b4b1687712f35028f45df4b6aacc0b37e 1 parent 0c60dff
@topfunky authored
Showing with 80 additions and 61 deletions.
  1. +80 −61 lib/topfunky-sparkline.js
View
141 lib/topfunky-sparkline.js
@@ -1,72 +1,91 @@
-//= require "raphael-min"
-//= require "cufon-yui"
-//= require "04b21_400.font"
-
-/*
- Usage:
- TopfunkySparkline('chart',
- [42, 15, 21, 7],
- { width:400,
- height:30,
- title:"Monthly Revenue",
- target:25,
- good_threshold:20});
-*/
-var TopfunkySparkline = function(elementName, datapoints, opts) {
+
+/*jslint white: false, onevar: true, browser: true, devel: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: true, strict: false, newcap: true, immed: true */
+/*global Raphael */
+
+// Usage:
+// new TopfunkySparkline('chart',
+// [42, 15, 21, 7],
+// { width:400,
+// height:30,
+// title:"Monthly Revenue",
+// target:25,
+// goodThreshold:20});
+
+function TopfunkySparkline(elementName, datapoints, opts) {
+
+ if ( !(this instanceof arguments.callee) ) {
+ return new arguments.callee(elementName, datapoints, opts);
+ }
this.width = opts.width;
this.height = opts.height;
- this.bar_width = opts.bar_width || 3;
- this.spacing = opts.spacing || 1;
- this.color_good = opts.color_good || "#6699cc";
- this.color_bad = opts.color_bad || "#a8c0d8";
- this.color_target = opts.color_target || "#ffffcc";
- this.good_threshold = opts.good_threshold || 20;
- this.target = opts.target || 15;
+ this.barWidth = opts.barWidth || 3;
+ this.spacing = opts.spacing || 1;
+ this.colorGood = opts.colorGood || "#6699cc";
+ this.colorBad = opts.colorBad || "#a8c0d8";
+ this.colorTarget = opts.colorTarget || "#ffffcc";
+ this.goodThreshold = opts.goodThreshold || 20;
+ this.target = opts.target || 15;
- this.paper = Raphael(elementName, this.width, this.height);
+ this.draw = function () {
- // Normalize
- var normalizedDatapoints = [];
- var maximumDatavalue = Math.max.apply( Math, datapoints );
+ this.paper = Raphael(elementName, this.width, this.height);
- for (var i = 0; i < datapoints.length; i++) {
- normalizedDatapoints[i] = datapoints[i] / maximumDatavalue;
- }
+ // Normalize
+ var normalizedDatapoints = [],
+ maximumDatavalue = Math.max.apply( Math, datapoints ),
+ i = 0,
+ barColor,
+ xOffset,
+ yOffset,
+ bar,
+ targetLine;
- // Bars
- for (var i = 0; i < datapoints.length; i++) {
- var bar_color;
- if (datapoints[i] >= good_threshold)
- bar_color = color_good;
- else
- bar_color = color_bad;
-
- var x_offset = i*(bar_width+spacing) + this.width - datapoints.length*(bar_width+spacing);
- var y_offset = parseInt(height - normalizedDatapoints[i]*height);
- var bar = paper.rect(x_offset,
- y_offset,
- bar_width,
- Math.ceil(normalizedDatapoints[i]*height))
- bar.attr({stroke:'transparent', fill:bar_color});
- }
+ for (i = 0; i < datapoints.length; i = i+1) {
+ normalizedDatapoints[i] = datapoints[i] / maximumDatavalue;
+ }
+
+ // Bars
+ for (i = 0; i < datapoints.length; i = i+1) {
+ if (datapoints[i] >= this.goodThreshold) {
+ barColor = this.colorGood;
+ } else {
+ barColor = this.colorBad;
+ }
+
+ 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});
+ }
+
+ // 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});
+
+ // Title
+ if (opts.title) {
+ this.paper.text(0, 9, opts.title).attr({
+ "text-anchor": "start",
+ "font-family": "'Myriad Pro', 'Lucida Grande', 'Helvetica Neue', Helvetica, sans-serif",
+ "font-weight": "bold",
+ "font-size": 12,
+ "fill": "white"
+ });
+ this.paper.text(0, 8, opts.title).attr({
+ "text-anchor": "start",
+ "font-family": "'Myriad Pro', 'Lucida Grande', 'Helvetica Neue', Helvetica, sans-serif",
+ "font-weight": "bold",
+ "font-size": 12,
+ "fill": "black"
+ });
+ }
+ };
- // Target line
- var targetLine = paper.rect(0, parseInt(height - (target/maximumDatavalue)*height), width, 1)
- targetLine.attr({stroke:"transparent", fill:color_target});
-
- // Text title
- var titleObject = paper.print(2,
- (this.height - 6),
- opts.title.toUpperCase(),
- paper.getFont("04b21", 400), 8);
- var titleWidth = titleObject.getBBox().width;
- paper.rect(0, (this.height - 12),
- titleWidth + 6, 12).attr({stroke:'transparent', fill:'white'});
-
- // HACK: Redraw title over background after font calculations
- paper.print(2, (this.height - 6),
- opts.title.toUpperCase(), paper.getFont("04b21", 400), 8).attr({fill:"#555555"});
+ this.draw();
}
Please sign in to comment.
Something went wrong with that request. Please try again.