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 | */ | |
6 | ||
7 | Dygraph.Plugins.Grid = (function() { | |
8 | ||
9 | /* | |
10 | ||
11 | Current bits of jankiness: | |
a353dfe3 DV |
12 | - Direct layout access |
13 | - Direct area access | |
cbe41be1 DV |
14 | |
15 | */ | |
16 | ||
17 | "use strict"; | |
18 | ||
19 | ||
20 | /** | |
21 | * Draws the gridlines, i.e. the gray horizontal & vertical lines running the | |
22 | * length of the chart. | |
23 | * | |
24 | * @constructor | |
25 | */ | |
26 | var grid = function() { | |
27 | }; | |
28 | ||
29 | grid.prototype.toString = function() { | |
30 | return "Gridline Plugin"; | |
31 | }; | |
32 | ||
33 | grid.prototype.activate = function(g) { | |
34 | return { | |
98eb4713 | 35 | willDrawChart: this.willDrawChart |
cbe41be1 DV |
36 | }; |
37 | }; | |
38 | ||
98eb4713 | 39 | grid.prototype.willDrawChart = function(e) { |
cbe41be1 DV |
40 | // Draw the new X/Y grid. Lines appear crisper when pixels are rounded to |
41 | // half-integers. This prevents them from drawing in two rows/cols. | |
42 | var g = e.dygraph; | |
43 | var ctx = e.drawingContext; | |
44 | var layout = g.layout_; | |
45 | var area = e.dygraph.plotter_.area; | |
46 | ||
47 | function halfUp(x) { return Math.round(x) + 0.5; } | |
48 | function halfDown(y){ return Math.round(y) - 0.5; } | |
49 | ||
50 | var x, y, i, ticks; | |
51 | if (g.getOption('drawYGrid')) { | |
52 | ticks = layout.yticks; | |
53 | ctx.save(); | |
54 | ctx.strokeStyle = g.getOption('gridLineColor'); | |
55 | ctx.lineWidth = g.getOption('gridLineWidth'); | |
56 | for (i = 0; i < ticks.length; i++) { | |
57 | // TODO(danvk): allow secondary axes to draw a grid, too. | |
58 | if (ticks[i][0] !== 0) continue; | |
59 | x = halfUp(area.x); | |
60 | y = halfDown(area.y + ticks[i][1] * area.h); | |
61 | ctx.beginPath(); | |
62 | ctx.moveTo(x, y); | |
63 | ctx.lineTo(x + area.w, y); | |
64 | ctx.closePath(); | |
65 | ctx.stroke(); | |
66 | } | |
67 | ctx.restore(); | |
68 | } | |
69 | ||
70 | if (g.getOption('drawXGrid')) { | |
71 | ticks = layout.xticks; | |
72 | ctx.save(); | |
73 | ctx.strokeStyle = g.getOption('gridLineColor'); | |
74 | ctx.lineWidth = g.getOption('gridLineWidth'); | |
75 | for (i = 0; i < ticks.length; i++) { | |
76 | x = halfUp(area.x + ticks[i][0] * area.w); | |
77 | y = halfDown(area.y + area.h); | |
78 | ctx.beginPath(); | |
79 | ctx.moveTo(x, y); | |
80 | ctx.lineTo(x, area.y); | |
81 | ctx.closePath(); | |
82 | ctx.stroke(); | |
83 | } | |
84 | ctx.restore(); | |
85 | } | |
86 | } | |
87 | ||
88 | grid.prototype.destroy = function() { | |
89 | }; | |
90 | ||
91 | return grid; | |
92 | ||
93 | })(); |