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