X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph-canvas.js;h=c3a829686777c00dec2ec875dee10e6a33063bff;hb=f6401bf68f1ccec4c891b2b6bf40982fb806b32d;hp=d8d5950cdf07251fb2ed11ca8790ad06ce862749;hpb=b0c3b7300e0faea480835763343e64884b169fb5;p=dygraphs.git diff --git a/dygraph-canvas.js b/dygraph-canvas.js index d8d5950..c3a8296 100644 --- a/dygraph-canvas.js +++ b/dygraph-canvas.js @@ -17,7 +17,7 @@ DygraphLayout = function(dygraph, options) { this.dygraph_ = dygraph; this.options = {}; // TODO(danvk): remove, use attr_ instead. - MochiKit.Base.update(this.options, options ? options : {}); + Dygraph.update(this.options, options ? options : {}); this.datasets = new Array(); }; @@ -37,13 +37,19 @@ DygraphLayout.prototype.evaluate = function() { DygraphLayout.prototype._evaluateLimits = function() { this.minxval = this.maxxval = null; - for (var name in this.datasets) { - var series = this.datasets[name]; - var x1 = series[0][0]; - if (!this.minxval || x1 < this.minxval) this.minxval = x1; - - var x2 = series[series.length - 1][0]; - if (!this.maxxval || x2 > this.maxxval) this.maxxval = x2; + if (this.options.dateWindow) { + this.minxval = this.options.dateWindow[0]; + this.maxxval = this.options.dateWindow[1]; + } else { + for (var name in this.datasets) { + if (!this.datasets.hasOwnProperty(name)) continue; + var series = this.datasets[name]; + var x1 = series[0][0]; + if (!this.minxval || x1 < this.minxval) this.minxval = x1; + + var x2 = series[series.length - 1][0]; + if (!this.maxxval || x2 > this.maxxval) this.maxxval = x2; + } } this.xrange = this.maxxval - this.minxval; this.xscale = (this.xrange != 0 ? 1/this.xrange : 1.0); @@ -58,6 +64,8 @@ DygraphLayout.prototype._evaluateLineCharts = function() { // add all the rects this.points = new Array(); for (var setName in this.datasets) { + if (!this.datasets.hasOwnProperty(setName)) continue; + var dataset = this.datasets[setName]; for (var j = 0; j < dataset.length; j++) { var item = dataset[j]; @@ -117,6 +125,7 @@ DygraphLayout.prototype.evaluateWithError = function() { // Copy over the error terms var i = 0; // index in this.points for (var setName in this.datasets) { + if (!this.datasets.hasOwnProperty(setName)) continue; var j = 0; var dataset = this.datasets[setName]; for (var j = 0; j < dataset.length; j++, i++) { @@ -146,7 +155,7 @@ DygraphLayout.prototype.removeAllDatasets = function() { * @param {Object} new_options an associative array of new properties */ DygraphLayout.prototype.updateOptions = function(new_options) { - MochiKit.Base.update(this.options, new_options ? new_options : {}); + Dygraph.update(this.options, new_options ? new_options : {}); }; // Subclass PlotKit.CanvasRenderer to add: @@ -165,37 +174,26 @@ DygraphCanvasRenderer = function(dygraph, element, layout, options) { // default options this.options = { - "strokeWidth": 0.5, - "drawXAxis": true, - "drawYAxis": true, - "axisLineColor": Color.blackColor(), - "axisLineWidth": 0.5, - "axisTickSize": 3, - "axisLabelColor": Color.blackColor(), - "axisLabelFont": "Arial", - "axisLabelFontSize": 9, - "axisLabelWidth": 50, - "drawYGrid": true, - "drawXGrid": true, - "gridLineColor": MochiKit.Color.Color.grayColor() + "strokeWidth": 0.5, + "drawXAxis": true, + "drawYAxis": true, + "axisLineColor": "black", + "axisLineWidth": 0.5, + "axisTickSize": 3, + "axisLabelColor": "black", + "axisLabelFont": "Arial", + "axisLabelFontSize": 9, + "axisLabelWidth": 50, + "drawYGrid": true, + "drawXGrid": true, + "gridLineColor": "rgb(128,128,128)" }; - MochiKit.Base.update(this.options, options); + Dygraph.update(this.options, options); this.layout = layout; this.element = element; this.container = this.element.parentNode; - // Stuff relating to Canvas on IE support - this.isIE = (/MSIE/.test(navigator.userAgent) && !window.opera); - - if (this.isIE && !isNil(G_vmlCanvasManager)) { - this.IEDelay = 0.5; - this.maxTries = 5; - this.renderDelay = null; - this.clearDelay = null; - this.element = G_vmlCanvasManager.initElement(this.element); - } - this.height = this.element.height; this.width = this.element.width; @@ -230,6 +228,7 @@ DygraphCanvasRenderer.prototype.clear = function() { var context = this.element.getContext("2d"); } catch (e) { + // TODO(danvk): this is broken, since MochiKit.Async is gone. this.clearDelay = MochiKit.Async.wait(this.IEDelay); this.clearDelay.addCallback(bind(this.clear, this)); return; @@ -255,7 +254,7 @@ DygraphCanvasRenderer.prototype.clear = function() { DygraphCanvasRenderer.isSupported = function(canvasName) { var canvas = null; try { - if (MochiKit.Base.isUndefinedOrNull(canvasName)) + if (typeof(canvasName) == 'undefined' || canvasName == null) canvas = document.createElement("canvas"); else canvas = canvasName; @@ -280,7 +279,7 @@ DygraphCanvasRenderer.prototype.render = function() { if (this.options.drawYGrid) { var ticks = this.layout.yticks; ctx.save(); - ctx.strokeStyle = this.options.gridLineColor.toRGBString(); + ctx.strokeStyle = this.options.gridLineColor; ctx.lineWidth = this.options.axisLineWidth; for (var i = 0; i < ticks.length; i++) { var x = this.area.x; @@ -296,7 +295,7 @@ DygraphCanvasRenderer.prototype.render = function() { if (this.options.drawXGrid) { var ticks = this.layout.xticks; ctx.save(); - ctx.strokeStyle = this.options.gridLineColor.toRGBString(); + ctx.strokeStyle = this.options.gridLineColor; ctx.lineWidth = this.options.axisLineWidth; for (var i=0; i 0) { for (var i = 0; i < this.layout.yticks.length; i++) { var tick = this.layout.yticks[i]; if (typeof(tick) == "function") return; @@ -351,7 +357,7 @@ DygraphCanvasRenderer.prototype._renderAxis = function() { context.closePath(); context.stroke(); - var label = DIV(labelStyle, tick[1]); + var label = makeDiv(tick[1]); var top = (y - this.options.axisLabelFontSize / 2); if (top < 0) top = 0; @@ -400,7 +406,7 @@ DygraphCanvasRenderer.prototype._renderAxis = function() { context.closePath(); context.stroke(); - var label = DIV(labelStyle, tick[1]); + var label = makeDiv(tick[1]); label.style.textAlign = "center"; label.style.bottom = "0px"; @@ -439,11 +445,15 @@ DygraphCanvasRenderer.prototype._renderLineChart = 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 errorBars = this.layout.options.errorBars; + + var setNames = []; + for (var name in this.layout.datasets) { + if (this.layout.datasets.hasOwnProperty(name)) { + setNames.push(name); + } + } var setCount = setNames.length; - var bind = MochiKit.Base.bind; - var partial = MochiKit.Base.partial; //Update Points for (var i = 0; i < this.layout.points.length; i++) { @@ -454,74 +464,25 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { // create paths var isOK = function(x) { return x && !isNaN(x); }; - var makePath = function(ctx) { - for (var i = 0; i < setCount; i++) { - var setName = setNames[i]; - var color = colorScheme[i%colorCount]; - var strokeX = this.options.strokeColorTransform; - // setup graphics context - context.save(); - context.strokeStyle = color.toRGBString(); - context.lineWidth = this.options.strokeWidth; - var point = this.layout.points[0]; - var pointSize = this.dygraph_.attr_("pointSize"); - var prevX = null, prevY = null; - var drawPoints = this.dygraph_.attr_("drawPoints"); - var points = this.layout.points; - for (var j = 0; j < points.length; j++) { - var point = points[j]; - if (point.name == setName) { - if (!isOK(point.canvasy)) { - // this will make us move to the next point, not draw a line to it. - prevX = prevY = null; - } else { - // A point is "isolated" if it is non-null but both the previous - // and next points are null. - var isIsolated = (!prevX && (j == points.length - 1 || - !isOK(points[j+1].canvasy))); - - if (!prevX) { - prevX = point.canvasx; - prevY = point.canvasy; - } else { - ctx.beginPath(); - ctx.moveTo(prevX, prevY); - prevX = point.canvasx; - prevY = point.canvasy; - ctx.lineTo(prevX, prevY); - ctx.stroke(); - } - - if (drawPoints || isIsolated) { - ctx.beginPath(); - ctx.fillStyle = color.toRGBString(); - ctx.arc(point.canvasx, point.canvasy, pointSize, 0, 360, false); - ctx.fill(); - } - } - } - } - } - }; - - var makeErrorBars = function(ctx) { + var ctx = context; + if (errorBars) { for (var i = 0; i < setCount; i++) { var setName = setNames[i]; var color = colorScheme[i % colorCount]; - var strokeX = this.options.strokeColorTransform; // setup graphics context - context.save(); - context.strokeStyle = color.toRGBString(); - context.lineWidth = this.options.strokeWidth; + ctx.save(); + ctx.strokeStyle = color; + ctx.lineWidth = this.options.strokeWidth; var prevX = -1; var prevYs = [-1, -1]; var count = 0; var yscale = this.layout.yscale; - // should be same color as the lines - var err_color = color.colorWithAlpha(0.15); - ctx.fillStyle = err_color.toRGBString(); + // should be same color as the lines but only 15% opaque. + var rgb = new RGBColor(color); + var err_color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',0.15)'; + ctx.fillStyle = err_color; ctx.beginPath(); for (var j = 0; j < this.layout.points.length; j++) { var point = this.layout.points[j]; @@ -529,7 +490,7 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { if (point.name == setName) { if (!point.y || isNaN(point.y)) { prevX = -1; - return; + continue; } var newYs = [ point.y - point.errorPlus * yscale, point.y + point.errorMinus * yscale ]; @@ -549,10 +510,56 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { } ctx.fill(); } - }; + } + + for (var i = 0; i < setCount; i++) { + var setName = setNames[i]; + var color = colorScheme[i%colorCount]; + + // setup graphics context + context.save(); + var point = this.layout.points[0]; + var pointSize = this.dygraph_.attr_("pointSize"); + var prevX = null, prevY = null; + var drawPoints = this.dygraph_.attr_("drawPoints"); + var points = this.layout.points; + for (var j = 0; j < points.length; j++) { + var point = points[j]; + if (point.name == setName) { + if (!isOK(point.canvasy)) { + // this will make us move to the next point, not draw a line to it. + prevX = prevY = null; + } else { + // A point is "isolated" if it is non-null but both the previous + // and next points are null. + var isIsolated = (!prevX && (j == points.length - 1 || + !isOK(points[j+1].canvasy))); + + if (!prevX) { + prevX = point.canvasx; + prevY = point.canvasy; + } else { + ctx.beginPath(); + ctx.strokeStyle = color; + ctx.lineWidth = this.options.strokeWidth; + ctx.moveTo(prevX, prevY); + prevX = point.canvasx; + prevY = point.canvasy; + ctx.lineTo(prevX, prevY); + ctx.stroke(); + } + + if (drawPoints || isIsolated) { + ctx.beginPath(); + ctx.fillStyle = color; + ctx.arc(point.canvasx, point.canvasy, pointSize, + 0, 2 * Math.PI, false); + ctx.fill(); + } + } + } + } + } - if (errorBars) - bind(makeErrorBars, this)(context); - bind(makePath, this)(context); context.restore(); };