dygraphs

<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> .KEYW {color: #933;} .COMM {color: #bbb; font-style: italic;} .NUMB {color: #393;} .STRN {color: #393;} .REGX {color: #339;} .line {border-right: 1px dotted #666; color: #666; font-style: normal;} </style></head><body><pre> 1 /** 2 * @license 3 * Copyright 2006 Dan Vanderkam (danvdk@gmail.com) 4 * MIT-licenced: https://opensource.org/licenses/MIT 5 */ 6 7 /** 8 * @fileoverview Based on PlotKit.CanvasRenderer, but modified to meet the 9 * needs of dygraphs. 10 * 11 * In particular, support for: 12 * - grid overlays 13 * - high/low bands 14 * - dygraphs attribute system 15 */ 16 17 /** 18 * The DygraphCanvasRenderer class does the actual rendering of the chart onto 19 * a canvas. It's based on PlotKit.CanvasRenderer. 20 * @param {Object} element The canvas to attach to 21 * @param {Object} elementContext The 2d context of the canvas (injected so it 22 * can be mocked for testing.) 23 * @param {Layout} layout The DygraphLayout object for this graph. 24 * @constructor 25 */ 26 27 /*global Dygraph:false */ 28 "use strict"; 29 30 import * as utils from './dygraph-utils'; 31 import Dygraph from './dygraph'; 32 33 /** 34 * @constructor 35 * 36 * This gets called when there are "new points" to chart. This is generally the 37 * case when the underlying data being charted has changed. It is _not_ called 38 * in the common case that the user has zoomed or is panning the view. 39 * 40 * The chart canvas has already been created by the Dygraph object. The 41 * renderer simply gets a drawing context. 42 * 43 * @param {Dygraph} dygraph The chart to which this renderer belongs. 44 * @param {HTMLCanvasElement} element The <canvas> DOM element on which to draw. 45 * @param {CanvasRenderingContext2D} elementContext The drawing context. 46 * @param {DygraphLayout} layout The chart's DygraphLayout object. 47 * 48 * TODO(danvk): remove the elementContext property. 49 */ 50 var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) { 51 this.dygraph_ = dygraph; 52 53 this.layout = layout; 54 this.element = element; 55 this.elementContext = elementContext; 56 57 this.height = dygraph.height_; 58 this.width = dygraph.width_; 59 60 // --- check whether everything is ok before we return 61 if (!utils.isCanvasSupported(this.element)) { 62 throw "Canvas is not supported."; 63 } 64 65 // internal state 66 this.area = layout.getPlotArea(); 67 68 // Set up a clipping area for the canvas (and the interaction canvas). 69 // This ensures that we don't overdraw. 70 var ctx = this.dygraph_.canvas_ctx_; 71 ctx.beginPath(); 72 ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h); 73 ctx.clip(); 74 75 ctx = this.dygraph_.hidden_ctx_; 76 ctx.beginPath(); 77 ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h); 78 ctx.clip(); 79 }; 80 81 /** 82 * Clears out all chart content and DOM elements. 83 * This is called immediately before render() on every frame, including 84 * during zooms and pans. 85 * @private 86 */ 87 DygraphCanvasRenderer.prototype.clear = function() { 88 this.elementContext.clearRect(0, 0, this.width, this.height); 89 }; 90 91 /** 92 * This method is responsible for drawing everything on the chart, including 93 * lines, high/low bands, fills and axes. 94 * It is called immediately after clear() on every frame, including during pans 95 * and zooms. 96 * @private 97 */ 98 DygraphCanvasRenderer.prototype.render = function() { 99 // attaches point.canvas{x,y} 100 this._updatePoints(); 101 102 // actually draws the chart. 103 this._renderLineChart(); 104 }; 105 106 /** 107 * Returns a predicate to be used with an iterator, which will 108 * iterate over points appropriately, depending on whether 109 * connectSeparatedPoints is true. When it's false, the predicate will 110 * skip over points with missing yVals. 111 */ 112 DygraphCanvasRenderer._getIteratorPredicate = function(connectSeparatedPoints) { 113 return connectSeparatedPoints ? 114 DygraphCanvasRenderer._predicateThatSkipsEmptyPoints : 115 null; 116 }; 117 118 DygraphCanvasRenderer._predicateThatSkipsEmptyPoints = 119 function(array, idx) { 120 return array[idx].yval !== null; 121 }; 122 123 /** 124 * Draws a line with the styles passed in and calls all the drawPointCallbacks. 125 * @param {Object} e The dictionary passed to the plotter function. 126 * @private 127 */ 128 DygraphCanvasRenderer._drawStyledLine = function(e, 129 color, strokeWidth, strokePattern, drawPoints, 130 drawPointCallback, pointSize) { 131 var g = e.dygraph; 132 // TODO(konigsberg): Compute attributes outside this method call. 133 var stepPlot = g.getBooleanOption("stepPlot", e.setName); 134 135 if (!utils.isArrayLike(strokePattern)) { 136 strokePattern = null; 137 } 138 139 var drawGapPoints = g.getBooleanOption('drawGapEdgePoints', e.setName); 140 141 var points = e.points; 142 var setName = e.setName; 143 var iter = utils.createIterator(points, 0, points.length, 144 DygraphCanvasRenderer._getIteratorPredicate( 145 g.getBooleanOption("connectSeparatedPoints", setName))); 146 147 var stroking = strokePattern && (strokePattern.length >= 2); 148 149 var ctx = e.drawingContext; 150 ctx.save(); 151 if (stroking) { 152 if (ctx.setLineDash) ctx.setLineDash(strokePattern); 153 } 154 155 var pointsOnLine = DygraphCanvasRenderer._drawSeries( 156 e, iter, strokeWidth, pointSize, drawPoints, drawGapPoints, stepPlot, color); 157 DygraphCanvasRenderer._drawPointsOnLine( 158 e, pointsOnLine, drawPointCallback, color, pointSize); 159 160 if (stroking) { 161 if (ctx.setLineDash) ctx.setLineDash([]); 162 } 163 164 ctx.restore(); 165 }; 166 167 /** 168 * This does the actual drawing of lines on the canvas, for just one series. 169 * Returns a list of [canvasx, canvasy] pairs for points for which a 170 * drawPointCallback should be fired. These include isolated points, or all 171 * points if drawPoints=true. 172 * @param {Object} e The dictionary passed to the plotter function. 173 * @private 174 */ 175 DygraphCanvasRenderer._drawSeries = function(e, 176 iter, strokeWidth, pointSize, drawPoints, drawGapPoints, stepPlot, color) { 177 178 var prevCanvasX = null; 179 var prevCanvasY = null; 180 var nextCanvasY = null; 181 var isIsolated; // true if this point is isolated (no line segments) 182 var point; // the point being processed in the while loop 183 var pointsOnLine = []; // Array of [canvasx, canvasy] pairs. 184 var first = true; // the first cycle through the while loop 185 186 var ctx = e.drawingContext; 187 ctx.beginPath(); 188 ctx.strokeStyle = color; 189 ctx.lineWidth = strokeWidth; 190 191 // NOTE: we break the iterator's encapsulation here for about a 25% speedup. 192 var arr = iter.array_; 193 var limit = iter.end_; 194 var predicate = iter.predicate_; 195 196 for (var i = iter.start_; i < limit; i++) { 197 point = arr[i]; 198 if (predicate) { 199 while (i < limit && !predicate(arr, i)) { 200 i++; 201 } 202 if (i == limit) break; 203 point = arr[i]; 204 } 205 206 // FIXME: The 'canvasy != canvasy' test here catches NaN values but the test 207 // doesn't catch Infinity values. Could change this to 208 // !isFinite(point.canvasy), but I assume it avoids isNaN for performance? 209 if (point.canvasy === null || point.canvasy != point.canvasy) { 210 if (stepPlot && prevCanvasX !== null) { 211 // Draw a horizontal line to the start of the missing data 212 ctx.moveTo(prevCanvasX, prevCanvasY); 213 ctx.lineTo(point.canvasx, prevCanvasY); 214 } 215 prevCanvasX = prevCanvasY = null; 216 } else { 217 isIsolated = false; 218 if (drawGapPoints || prevCanvasX === null) { 219 iter.nextIdx_ = i; 220 iter.next(); 221 nextCanvasY = iter.hasNext ? iter.peek.canvasy : null; 222 223 var isNextCanvasYNullOrNaN = nextCanvasY === null || 224 nextCanvasY != nextCanvasY; 225 isIsolated = (prevCanvasX === null && isNextCanvasYNullOrNaN); 226 if (drawGapPoints) { 227 // Also consider a point to be "isolated" if it's adjacent to a 228 // null point, excluding the graph edges. 229 if ((!first && prevCanvasX === null) || 230 (iter.hasNext && isNextCanvasYNullOrNaN)) { 231 isIsolated = true; 232 } 233 } 234 } 235 236 if (prevCanvasX !== null) { 237 if (strokeWidth) { 238 if (stepPlot) { 239 ctx.moveTo(prevCanvasX, prevCanvasY); 240 ctx.lineTo(point.canvasx, prevCanvasY); 241 } 242 243 ctx.lineTo(point.canvasx, point.canvasy); 244 } 245 } else { 246 ctx.moveTo(point.canvasx, point.canvasy); 247 } 248 if (drawPoints || isIsolated) { 249 pointsOnLine.push([point.canvasx, point.canvasy, point.idx]); 250 } 251 prevCanvasX</span