Commit | Line | Data |
---|---|---|
cbe41be1 DV |
1 | /** |
2 | * @license | |
3 | * Copyright 2012 Dan Vanderkam (danvdk@gmail.com) | |
4 | * MIT-licensed (http://opensource.org/licenses/MIT) | |
5 | */ | |
0cd1ad15 | 6 | /*global Dygraph:false */ |
cbe41be1 | 7 | |
cbe41be1 DV |
8 | /* |
9 | ||
10 | Current bits of jankiness: | |
a353dfe3 DV |
11 | - Direct layout access |
12 | - Direct area access | |
cbe41be1 DV |
13 | |
14 | */ | |
15 | ||
16 | "use strict"; | |
17 | ||
cbe41be1 DV |
18 | /** |
19 | * Draws the gridlines, i.e. the gray horizontal & vertical lines running the | |
20 | * length of the chart. | |
21 | * | |
22 | * @constructor | |
23 | */ | |
24 | var grid = function() { | |
25 | }; | |
26 | ||
27 | grid.prototype.toString = function() { | |
28 | return "Gridline Plugin"; | |
29 | }; | |
30 | ||
31 | grid.prototype.activate = function(g) { | |
32 | return { | |
98eb4713 | 33 | willDrawChart: this.willDrawChart |
cbe41be1 DV |
34 | }; |
35 | }; | |
36 | ||
98eb4713 | 37 | grid.prototype.willDrawChart = function(e) { |
cbe41be1 DV |
38 | // Draw the new X/Y grid. Lines appear crisper when pixels are rounded to |
39 | // half-integers. This prevents them from drawing in two rows/cols. | |
40 | var g = e.dygraph; | |
41 | var ctx = e.drawingContext; | |
42 | var layout = g.layout_; | |
43 | var area = e.dygraph.plotter_.area; | |
44 | ||
45 | function halfUp(x) { return Math.round(x) + 0.5; } | |
46 | function halfDown(y){ return Math.round(y) - 0.5; } | |
47 | ||
48 | var x, y, i, ticks; | |
7f6a7190 | 49 | if (g.getOptionForAxis('drawGrid', 'y')) { |
e8b3c7b4 DE |
50 | var axes = ["y", "y2"]; |
51 | var strokeStyles = [], lineWidths = [], drawGrid = [], stroking = [], strokePattern = []; | |
52 | for (var i = 0; i < axes.length; i++) { | |
7f6a7190 | 53 | drawGrid[i] = g.getOptionForAxis('drawGrid', axes[i]); |
e8b3c7b4 DE |
54 | if (drawGrid[i]) { |
55 | strokeStyles[i] = g.getOptionForAxis('gridLineColor', axes[i]); | |
56 | lineWidths[i] = g.getOptionForAxis('gridLineWidth', axes[i]); | |
57 | strokePattern[i] = g.getOptionForAxis('gridLinePattern', axes[i]); | |
58 | stroking[i] = strokePattern[i] && (strokePattern[i].length >= 2); | |
9e906ae6 DE |
59 | } |
60 | } | |
cbe41be1 DV |
61 | ticks = layout.yticks; |
62 | ctx.save(); | |
e8b3c7b4 | 63 | // draw grids for the different y axes |
fd6b8dad DV |
64 | ticks.forEach(tick => { |
65 | if (!tick.has_tick) return; | |
bd6ee5dc DV |
66 | var axis = tick.axis; |
67 | if (drawGrid[axis]) { | |
e8c70e4e | 68 | ctx.save(); |
9e906ae6 | 69 | if (stroking[axis]) { |
e8c70e4e | 70 | if (ctx.setLineDash) ctx.setLineDash(strokePattern[axis]); |
9e906ae6 DE |
71 | } |
72 | ctx.strokeStyle = strokeStyles[axis]; | |
73 | ctx.lineWidth = lineWidths[axis]; | |
74 | ||
75 | x = halfUp(area.x); | |
bd6ee5dc | 76 | y = halfDown(area.y + tick.pos * area.h); |
9e906ae6 DE |
77 | ctx.beginPath(); |
78 | ctx.moveTo(x, y); | |
79 | ctx.lineTo(x + area.w, y); | |
9e906ae6 DE |
80 | ctx.stroke(); |
81 | ||
e8c70e4e | 82 | ctx.restore(); |
97adf46b | 83 | } |
fd6b8dad | 84 | }); |
cbe41be1 DV |
85 | ctx.restore(); |
86 | } | |
87 | ||
e8b3c7b4 | 88 | // draw grid for x axis |
7f6a7190 | 89 | if (g.getOptionForAxis('drawGrid', 'x')) { |
cbe41be1 DV |
90 | ticks = layout.xticks; |
91 | ctx.save(); | |
e8b3c7b4 | 92 | var strokePattern = g.getOptionForAxis('gridLinePattern', 'x'); |
9e906ae6 DE |
93 | var stroking = strokePattern && (strokePattern.length >= 2); |
94 | if (stroking) { | |
e8c70e4e | 95 | if (ctx.setLineDash) ctx.setLineDash(strokePattern); |
9e906ae6 | 96 | } |
e8b3c7b4 DE |
97 | ctx.strokeStyle = g.getOptionForAxis('gridLineColor', 'x'); |
98 | ctx.lineWidth = g.getOptionForAxis('gridLineWidth', 'x'); | |
fd6b8dad DV |
99 | ticks.forEach(tick => { |
100 | if (!tick.has_tick) return; | |
bd6ee5dc | 101 | x = halfUp(area.x + tick.pos * area.w); |
cbe41be1 DV |
102 | y = halfDown(area.y + area.h); |
103 | ctx.beginPath(); | |
104 | ctx.moveTo(x, y); | |
105 | ctx.lineTo(x, area.y); | |
106 | ctx.closePath(); | |
107 | ctx.stroke(); | |
fd6b8dad | 108 | }); |
9e906ae6 | 109 | if (stroking) { |
e8c70e4e | 110 | if (ctx.setLineDash) ctx.setLineDash([]); |
9e906ae6 | 111 | } |
cbe41be1 DV |
112 | ctx.restore(); |
113 | } | |
42a9ebb8 | 114 | }; |
cbe41be1 DV |
115 | |
116 | grid.prototype.destroy = function() { | |
117 | }; | |
118 | ||
6ecc0739 | 119 | export default grid; |