X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph-canvas.js;h=70998bdc8359e9282ead69740ed7017ffb33ca50;hb=43af96e75cba5447301daf3fa4347729d115fdc8;hp=d1594f3b6a0b351ed5fb8ab4e38917c90a33a3b2;hpb=fc80a39612bb80a3f0ec537622bb104b5737a6ea;p=dygraphs.git diff --git a/dygraph-canvas.js b/dygraph-canvas.js index d1594f3..70998bd 100644 --- a/dygraph-canvas.js +++ b/dygraph-canvas.js @@ -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,10 +64,13 @@ 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]; var point = { + // TODO(danvk): here x: ((parseFloat(item[0]) - this.minxval) * this.xscale), y: 1.0 - ((parseFloat(item[1]) - this.minyval) * this.yscale), xval: parseFloat(item[0]), @@ -117,6 +126,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++) { @@ -177,7 +187,8 @@ DygraphCanvasRenderer = function(dygraph, element, layout, options) { "axisLabelWidth": 50, "drawYGrid": true, "drawXGrid": true, - "gridLineColor": "rgb(128,128,128)" + "gridLineColor": "rgb(128,128,128)", + "fillAlpha": 0.15, }; Dygraph.update(this.options, options); @@ -185,17 +196,6 @@ DygraphCanvasRenderer = function(dygraph, element, layout, options) { 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 +333,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 +347,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; @@ -445,13 +447,20 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { var context = this.element.getContext("2d"); var colorCount = this.options.colorScheme.length; var colorScheme = this.options.colorScheme; + var fillAlpha = this.options.fillAlpha; 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 + // Update Points + // TODO(danvk): here for (var i = 0; i < this.layout.points.length; i++) { var point = this.layout.points[i]; point.canvasx = this.area.w * point.x + this.area.x; @@ -463,6 +472,10 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { var ctx = context; if (errorBars) { + if (fillGraph) { + this.dygraph_.warn("Can't use fillGraph option with error bars"); + } + for (var i = 0; i < setCount; i++) { var setName = setNames[i]; var color = colorScheme[i % colorCount]; @@ -477,17 +490,19 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { 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)'; + var err_color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + + fillAlpha + ')'; 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 (!point.y || isNaN(point.y)) { + if (!isOK(point.y)) { prevX = -1; continue; } + // TODO(danvk): here var newYs = [ point.y - point.errorPlus * yscale, point.y + point.errorMinus * yscale ]; newYs[0] = this.area.h * newYs[0] + this.area.y; @@ -506,6 +521,56 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { } ctx.fill(); } + } else if (fillGraph) { + // TODO(danvk): merge this code with the logic above; they're very similar. + 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 + ',' + + fillAlpha + ')'; + 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 +613,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(); } }