X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph-canvas.js;h=3db31a7ecf2c7e5ae251d597a21cd3a8eb7fe9fb;hb=87c1f3823b611a33c06b2f463ac993cbdad1e263;hp=26dd64666faca75ee8ae4b69ade43fcfdc74745a;hpb=80aaae18b251315808188a1a93a0237e6b199050;p=dygraphs.git diff --git a/dygraph-canvas.js b/dygraph-canvas.js index 26dd646..3db31a7 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: @@ -179,23 +188,12 @@ DygraphCanvasRenderer = function(dygraph, element, layout, options) { "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; @@ -333,7 +331,9 @@ DygraphCanvasRenderer.prototype._renderAxis = function() { var makeDiv = function(txt) { var div = document.createElement("div"); for (var name in labelStyle) { - div.style[name] = labelStyle[name]; + if (labelStyle.hasOwnProperty(name)) { + div.style[name] = labelStyle[name]; + } } div.appendChild(document.createTextNode(txt)); return div; @@ -345,7 +345,7 @@ DygraphCanvasRenderer.prototype._renderAxis = function() { context.lineWidth = this.options.axisLineWidth; if (this.options.drawYAxis) { - if (this.layout.yticks) { + if (this.layout.yticks && this.layout.yticks.length > 0) { for (var i = 0; i < this.layout.yticks.length; i++) { var tick = this.layout.yticks[i]; if (typeof(tick) == "function") return; @@ -446,9 +446,14 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { var colorCount = this.options.colorScheme.length; var colorScheme = this.options.colorScheme; var errorBars = this.layout.options.errorBars; + var fillGraph = this.layout.options.fillGraph; var setNames = []; - for (var name in this.layout.datasets) setNames.push(name); + for (var name in this.layout.datasets) { + if (this.layout.datasets.hasOwnProperty(name)) { + setNames.push(name); + } + } var setCount = setNames.length; //Update Points @@ -484,9 +489,9 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { var point = this.layout.points[j]; count++; if (point.name == setName) { - if (!point.y || isNaN(point.y)) { + if (!isOK(point.y)) { prevX = -1; - return; + continue; } var newYs = [ point.y - point.errorPlus * yscale, point.y + point.errorMinus * yscale ]; @@ -506,6 +511,54 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { } ctx.fill(); } + } else if (fillGraph) { + for (var i = 0; i < setCount; i++) { + var setName = setNames[i]; + var setNameLast; + if (i>0) setNameLast = setNames[i-1]; + var color = colorScheme[i % colorCount]; + + // setup graphics context + 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 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]; + count++; + if (point.name == setName) { + if (!isOK(point.y)) { + prevX = -1; + continue; + } + var pX = 1.0 + this.layout.minyval * this.layout.yscale; + if (pX < 0.0) pX = 0.0; + else if (pX > 1.0) pX = 1.0; + var newYs = [ point.y, pX ]; + newYs[0] = this.area.h * newYs[0] + this.area.y; + newYs[1] = this.area.h * newYs[1] + this.area.y; + if (prevX >= 0) { + ctx.moveTo(prevX, prevYs[0]); + ctx.lineTo(point.canvasx, newYs[0]); + ctx.lineTo(point.canvasx, newYs[1]); + ctx.lineTo(prevX, prevYs[1]); + ctx.closePath(); + } + prevYs[0] = newYs[0]; + prevYs[1] = newYs[1]; + prevX = point.canvasx; + } + } + ctx.fill(); + } } for (var i = 0; i < setCount; i++) { @@ -548,7 +601,8 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { if (drawPoints || isIsolated) { ctx.beginPath(); ctx.fillStyle = color; - ctx.arc(point.canvasx, point.canvasy, pointSize, 0, 360, false); + ctx.arc(point.canvasx, point.canvasy, pointSize, + 0, 2 * Math.PI, false); ctx.fill(); } }