Permalink
Browse files

Added support for new "area" style for layouts, which simply draws a

filled polygon with all the data points in the graph. Useful for drawing
min-max charts of values (requires some pre-processing though).
  • Loading branch information...
1 parent 60e7603 commit 50fb53161441d978100aa28d7a72164d1aa2ecdd @cederberg cederberg committed Aug 8, 2008
Showing with 859 additions and 604 deletions.
  1. +70 −6 PlotKit/Canvas.js
  2. +9 −7 PlotKit/Layout.js
  3. +713 −591 PlotKit/PlotKit_Packed.js
  4. +67 −0 PlotKit/SweetCanvas.js
View
@@ -176,18 +176,18 @@ PlotKit.CanvasRenderer.prototype.render = function() {
if (this.layout.style == "bar") {
this._renderBarChart();
this._renderBarAxis();
- }
- else if (this.layout.style == "pie") {
+ } else if (this.layout.style == "pie") {
this._renderPieChart();
this._renderPieAxis();
- }
- else if (this.layout.style == "line") {
+ } else if (this.layout.style == "line") {
this._renderLineChart();
this._renderLineAxis();
- }
- else if (this.layout.style == "point") {
+ } else if (this.layout.style == "point") {
this._renderLineAxis();
this._renderPointChart();
+ } else if (this.layout.style == "area") {
+ this._renderLineAxis();
+ this._renderAreaChart();
}
};
@@ -434,6 +434,70 @@ PlotKit.CanvasRenderer.prototype._renderPointChart = function() {
}
};
+PlotKit.CanvasRenderer.prototype._renderAreaChart = function() {
+ var context = this.element.getContext("2d");
+ var colorCount = this.options.colorScheme.length;
+ var colorScheme = this.options.colorScheme;
+ var setNames = MochiKit.Base.keys(this.layout.datasets);
+ var setCount = setNames.length;
+ var bind = MochiKit.Base.bind;
+ var partial = MochiKit.Base.partial;
+
+ for (var i = 0; i < setCount; i++) {
+ var setName = setNames[i];
+ var color = colorScheme[i%colorCount];
+
+ // setup graphics context
+ context.save();
+ if (this.options.fillColorTransform && color[this.options.fillColorTransform]) {
+ context.fillStyle = color[this.options.fillColorTransform]().toRGBString();
+ } else {
+ context.fillStyle = color.toRGBString();
+ }
+ if (this.options.strokeColor) {
+ context.strokeStyle = this.options.strokeColor.toRGBString();
+ } else if (this.options.strokeColorTransform) {
+ context.strokeStyle = color[this.options.strokeColorTransform]().toRGBString();
+ } else {
+ context.strokeStyle = color.toRGBString();
+ }
+ context.lineWidth = this.options.strokeWidth;
+
+ // create paths
+ var makePath = function(ctx) {
+ ctx.beginPath();
+ var startX = null;
+ var startY = null;
+ var addPoint = function(ctx_, point) {
+ if (point.name == setName) {
+ var x = this.area.w * point.x + this.area.x;
+ var y = this.area.h * point.y + this.area.y;
+ if (startX == null) {
+ ctx_.moveTo(x, y);
+ startX = x;
+ startY = y;
+ } else {
+ ctx_.lineTo(x, y);
+ }
+ }
+ };
+ MochiKit.Iter.forEach(this.layout.points, partial(addPoint, ctx), this);
+ ctx.lineTo(startX, startY);
+ ctx.closePath();
+ };
+
+ if (this.options.shouldFill) {
+ bind(makePath, this)(context);
+ context.fill();
+ }
+ if (this.options.shouldStroke) {
+ bind(makePath, this)(context);
+ context.stroke();
+ }
+ context.restore();
+ }
+};
+
PlotKit.CanvasRenderer.prototype._renderBarAxis = function() {
this._renderAxis();
}
View
@@ -173,14 +173,12 @@ PlotKit.Layout.prototype.evaluate = function() {
this._evaluateBarCharts();
}
this._evaluateBarTicks();
- }
- else if (this.style == "line" || this.style == "point") {
- this._evaluateLineCharts();
- this._evaluateLineTicks();
- }
- else if (this.style == "pie") {
+ } else if (this.style == "pie") {
this._evaluatePieCharts();
this._evaluatePieTicks();
+ } else {
+ this._evaluateLineCharts();
+ this._evaluateLineTicks();
}
};
@@ -476,7 +474,11 @@ PlotKit.Layout.prototype._evaluateLineCharts = function() {
for (var setName in this.datasets) {
var dataset = this.datasets[setName];
if (PlotKit.Base.isFuncLike(dataset)) continue;
- dataset.sort(function(a, b) { return MochiKit.Base.compare(parseFloat(a[0]), parseFloat(b[0])); });
+ if (this.style != "area") {
+ dataset.sort(function(a, b) {
+ return MochiKit.Base.compare(parseFloat(a[0]), parseFloat(b[0]));
+ });
+ }
for (var j = 0; j < dataset.length; j++) {
var item = dataset[j];
var point = {
Oops, something went wrong.

0 comments on commit 50fb531

Please sign in to comment.