@@ -27,7 +27,7 @@ DateGraphLayout.prototype = new PlotKit.Layout(); */ DateGraphLayout.prototype.evaluateWithError = function() { this.evaluate(); - if (!this.options.errorBars) return; + if (!this.options.dataHasErrorBars) return; // Copy over the error terms var i = 0; // index in this.points @@ -229,16 +229,19 @@ DateGraphCanvasRenderer.prototype._renderLineChart = function() { } }; // should be same color as the lines - var err_color = color.colorWithAlpha(0.15); - ctx.fillStyle = err_color.toRGBString(); - ctx.beginPath(); - MochiKit.Iter.forEach(this.layout.points, partial(errorTrapezoid, ctx), this); - ctx.fill(); + if (errorBars) { + var err_color = color.colorWithAlpha(0.15); + ctx.fillStyle = err_color.toRGBString(); + ctx.beginPath(); + MochiKit.Iter.forEach(this.layout.points, partial(errorTrapezoid, ctx), this); + ctx.fill(); + } } }; - if (errorBars) + if (this.layout.options.dataHasErrorBars) { bind(makeErrorBars, this)(context); + } bind(makePath, this)(context); context.restore(); }; dygraph-canvas.js @@ -4609,7 +4609,7 @@ PlotKit.Layout.call(this,"line",_1); DateGraphLayout.prototype=new PlotKit.Layout(); DateGraphLayout.prototype.evaluateWithError=function(){ this.evaluate(); -if(!this.options.errorBars){ +if(!this.options.dataHasErrorBars){ return; } var i=0; @@ -4765,14 +4765,16 @@ _40[1]=_46[1]; _39=_45.canvasx; } }; +if(_21){ var _47=_37.colorWithAlpha(0.15); ctx.fillStyle=_47.toRGBString(); ctx.beginPath(); MochiKit.Iter.forEach(this.layout.points,_24(_43,ctx),this); ctx.fill(); } +} }; -if(_21){ +if(this.layout.options.dataHasErrorBars){ _23(_35,this)(_17); } _23(_27,this)(_17); @@ -4806,6 +4808,7 @@ this.previousVerticalX_=-1; this.width_=parseInt(div.style.width,10); this.height_=parseInt(div.style.height,10); this.errorBars_=_54.errorBars||false; +this.dataHasErrorBars_=_54.dataHasErrorBars||this.errorBars_; this.stackedGraph_=_54.stackedGraph||false; this.fractions_=_54.fractions||false; this.strokeWidth_=_54.strokeWidth||DateGraph.DEFAULT_STROKE_WIDTH; @@ -4835,7 +4838,7 @@ this.labels_=[]; this.clickCallback_=_54.clickCallback||null; this.zoomCallback_=_54.zoomCallback||null; this.createInterface_(); -this.layoutOptions_={"errorBars":(this.errorBars_||this.customBars_),"stackedGraph":this.stackedGraph_,"xOriginIsZero":false,"yTickPrecision":5}; +this.layoutOptions_={"errorBars":(this.errorBars_||this.customBars_),"dataHasErrorBars":this.dataHasErrorBars_,"stackedGraph":this.stackedGraph_,"xOriginIsZero":false,"yTickPrecision":5}; MochiKit.Base.update(this.layoutOptions_,_54); this.setColors_(_54); this.layout_=new DateGraphLayout(this.layoutOptions_); @@ -5314,7 +5317,7 @@ var date=data[j][0]; _171[j]=[date,data[j][i]]; } _171=this.rollingAverage(_171,this.rollPeriod_); -var bars=this.errorBars_||this.customBars_; +var bars=this.dataHasErrorBars_; if(this.dateWindow_){ var low=this.dateWindow_[0]; var high=this.dateWindow_[1]; @@ -5337,30 +5340,38 @@ maxY=bars?y+_171[j][1][1]:y; } } } -if(bars){ +if(bars||this.stackedGraph_){ var vals=[]; for(var j=0;j<_171.length;j++){ -vals[j]=[_171[j][0],_171[j][1][0],_171[j][1][1],_171[j][1][2]]; -} -this.layout_.addDataset(this.labels_[i-1],vals); +var y; +if(bars){ +y=_171[j][1][0]; }else{ +y=_171[j][1]; +} if(this.stackedGraph_){ -var vals=[]; -for(var j=0;j<_171.length;j++){ if(sums[_171[j][0]]===undefined){ sums[_171[j][0]]=0; } -y=_171[j][1]+sums[_171[j][0]]; -vals[j]=[_171[j][0],(y)]; +y+=sums[_171[j][0]]; if(maxY==null||y>maxY){ maxY=y; } -sums[_171[j][0]]=sums[_171[j][0]]+_171[j][1]; +sums[_171[j][0]]+=y; } +if(bars){ +vals[j]=[_171[j][0],y,_171[j][1][1],_171[j][1][2]]; +}else{ +vals[j]=[_171[j][0],y]; +} +} +if(this.stackedGraph_){ _170.push([this.labels_[i-1],vals]); }else{ -this.layout_.addDataset(this.labels_[i-1],_171); +this.layout_.addDataset(this.labels_[i-1],vals); } +}else{ +this.layout_.addDataset(this.labels_[i-1],_171); } } if(_170.length!=0){ @@ -5452,7 +5463,7 @@ _179[i]=[_177[i][0],[1*mid/_189,1*(mid-low)/_189,1*(high-mid)/_189]]; } }else{ var _191=Math.min(_178-1,_177.length-2); -if(!this.errorBars_){ +if(!this.dataHasErrorBars_){ for(var i=0;i<_191;i++){ var sum=0; for(var j=0;j<i+1;j++){ @@ -5540,7 +5551,7 @@ var vals=_200[j].split("/"); _201[j]=[parseFloat(vals[0]),parseFloat(vals[1])]; } }else{ -if(this.errorBars_){ +if(this.dataHasErrorBars_){ for(var j=1;j<_200.length;j+=2){ _201[(j+1)/2]=[parseFloat(_200[j]),parseFloat(_200[j+1])]; } @@ -5617,9 +5628,7 @@ req.send(null); } }; DateGraph.prototype.updateOptions=function(_209){ -if(_209.errorBars){ -this.errorBars_=_209.errorBars; -} +this.errorBars_=_209.errorBars||false; var _210=this.stackedGraph_; this.stackedGraph_=_209.stackedGraph||false; this.shouldFill_=(this.stackedGraph_||false); dygraph-combined.js @@ -106,6 +106,7 @@ DateGraph.prototype.__init__ = function(div, file, labels, attrs) { this.width_ = parseInt(div.style.width, 10); this.height_ = parseInt(div.style.height, 10); this.errorBars_ = attrs.errorBars || false; + this.dataHasErrorBars_ = attrs.dataHasErrorBars || this.errorBars_; this.stackedGraph_ = attrs.stackedGraph || false; this.fractions_ = attrs.fractions || false; this.strokeWidth_ = attrs.strokeWidth || DateGraph.DEFAULT_STROKE_WIDTH; @@ -150,6 +151,7 @@ DateGraph.prototype.__init__ = function(div, file, labels, attrs) { // Create the PlotKit grapher this.layoutOptions_ = { 'errorBars': (this.errorBars_ || this.customBars_), + 'dataHasErrorBars': this.dataHasErrorBars_, 'stackedGraph': this.stackedGraph_, 'xOriginIsZero': false, 'yTickPrecision': 5 }; @@ -869,7 +871,7 @@ DateGraph.prototype.drawGraph_ = function(data) { series = this.rollingAverage(series, this.rollPeriod_); // Prune down to the desired range, if necessary (for zooming) - var bars = this.errorBars_ || this.customBars_; + var bars = this.dataHasErrorBars_; if (this.dateWindow_) { var low = this.dateWindow_[0]; var high= this.dateWindow_[1]; @@ -891,29 +893,64 @@ DateGraph.prototype.drawGraph_ = function(data) { } } - if (bars) { + if (bars || this.stackedGraph_) { + // If it is either of these we need to run through the series + var vals = []; + for (var j=0; j<series.length; j++) { + var y; + if (bars) { + y = series[j][1][0]; + } else { + y = series[j][1]; + } + if (this.stackedGraph_) { + if (sums[series[j][0]] === undefined) { + sums[series[j][0]] = 0; + } + y += sums[series[j][0]]; + if (maxY == null || y > maxY) + maxY = y; + + sums[series[j][0]] += y; + } + if (bars) { + vals[j] = [series[j][0], + y, series[j][1][1], series[j][1][2]]; + } else { + vals[j] = [series[j][0], y]; + } + } + if (this.stackedGraph_) { + datasets.push([this.labels_[i - 1], vals]); + } else { + this.layout_.addDataset(this.labels_[i - 1], vals); + } + } else { + this.layout_.addDataset(this.labels_[i - 1], series); + } + /* + if (this.stackedGraph_) { + if (sums[series[j][0]] === undefined) + sums[series[j][0]] = 0; + y = series[j][1] + sums[series[j][0]]; + vals[j] = [series[j][0], (y)]; + if (maxY == null || y > maxY) maxY = y; + sums[series[j][0]] = sums[series[j][0]] + series[j][1]; + } + + datasets.push([this.labels_[i - 1], vals]); + } else if (bars) { + console.log("Bars"); var vals = []; for (var j=0; j<series.length; j++) vals[j] = [series[j][0], series[j][1][0], series[j][1][1], series[j][1][2]]; this.layout_.addDataset(this.labels_[i - 1], vals); } else { - if (this.stackedGraph_) { - var vals = []; - for (var j=0; j<series.length; j++) { - if (sums[series[j][0]] === undefined) - sums[series[j][0]] = 0; - y = series[j][1] + sums[series[j][0]]; - vals[j] = [series[j][0], (y)]; - if (maxY == null || y > maxY) maxY = y; - sums[series[j][0]] = sums[series[j][0]] + series[j][1]; - } - - datasets.push([this.labels_[i - 1], vals]); - } else { this.layout_.addDataset(this.labels_[i - 1], series); } } + */ } if (datasets.length != 0) { if(!this.colorsChanged_) { @@ -1030,7 +1067,7 @@ DateGraph.prototype.rollingAverage = function(originalData, rollPeriod) { // Calculate the rolling average for the first rollPeriod - 1 points where // there is not enough data to roll over the full number of days var num_init_points = Math.min(rollPeriod - 1, originalData.length - 2); - if (!this.errorBars_){ + if (!this.dataHasErrorBars_){ for (var i = 0; i < num_init_points; i++) { var sum = 0; for (var j = 0; j < i + 1; j++) @@ -1145,11 +1182,12 @@ DateGraph.prototype.parseCSV_ = function(data) { var vals = inFields[j].split("/"); fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])]; } - } else if (this.errorBars_) { + } else if (this.dataHasErrorBars_) { // If there are error bars, values are (value, stddev) pairs - for (var j = 1; j < inFields.length; j += 2) - fields[(j + 1) / 2] = [parseFloat(inFields[j]), - parseFloat(inFields[j + 1])]; + for (var j = 1; j < inFields.length; j += 2) { + fields[(j + 1) / 2] = [parseFloat(inFields[j]), + parseFloat(inFields[j + 1])]; + } } else if (this.customBars_) { // Bars are a low;center;high tuple for (var j = 1; j < inFields.length; j++) { @@ -1257,9 +1295,7 @@ DateGraph.prototype.start_ = function() { * @param {Object} attrs The new properties and values */ DateGraph.prototype.updateOptions = function(attrs) { - if (attrs.errorBars) { - this.errorBars_ = attrs.errorBars; - } + this.errorBars_ = attrs.errorBars || false; var old_stacked = this.stackedGraph_; dygraph.js @@ -6,6 +6,7 @@ <![endif]--> <script type="text/javascript" src="../dygraph-combined.js"></script> <script type="text/javascript" src="../dygraph.js"></script> + <script type="text/javascript" src="../dygraph-canvas.js"></script> <script type="text/javascript" src="data.js"></script> </head> <body> @@ -13,6 +14,10 @@ <div id="g" style="width:600px; height:300px;"></div> <p>14-Day Rollup:</p> <div id="g30" style="width:600px; height:300px;"></div> + <p>14-day rollup with errorbars turned off:</p> + <div id="g-no" style="width:600px; height:300px;"></div> + <p>14-day rollup with errorbars turned off stacked:</p> + <div id="g-stacked" style="width:600px; height:300px;"></div> <script type="text/javascript"> g = new DateGraph( @@ -29,6 +34,23 @@ errorBars: true } ); + gno = new DateGraph( + document.getElementById("g-no"), + NoisyData, null, { + rollPeriod: 14, + errorBars: false, + dataHasErrorBars: true + } + ); + gstacked = new DateGraph( + document.getElementById("g-stacked"), + NoisyData, null, { + rollPeriod: 14, + errorBars: false, + dataHasErrorBars: true, + stackedGraph: true + } + ); </script> </body> </html> tests/noise.html 3e37b4bfddd266ec8730533021b9fa19b1472499 Ian Ownbey ian@tw-mbp13-iownbey.local http://github.com/iownbey/dygraphs/commit/49d6ee135139097d878d3065eb42aaacd9255c53 49d6ee135139097d878d3065eb42aaacd9255c53 2009-10-29T15:12:37-07:00 2009-10-29T15:12:37-07:00 Added the ability for error bars to be in data even when error bars arent shown f6797e45ea836205e05aa6487e9ea491f174bb78 Ian Ownbey ian@tw-mbp13-iownbey.local