Skip to content

Commit 2b1b29b

Browse files
Pete Walkeretimberg
Pete Walker
authored and
etimberg
committed
Fixed #28, fixes #15, fixes #1
Added a new option to the annotation plugin to allow configuration of when the annotations should be drawn. Documentation has been updated to reflect this, have also run `gulp build`
1 parent 048d7d3 commit 2b1b29b

File tree

6 files changed

+81
-7
lines changed

6 files changed

+81
-7
lines changed

‎Chart.Annotation.js‎

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ Chart.Annotation = Chart.Annotation || {};
9393

9494
// Default options if none are provided
9595
var defaultOptions = Chart.Annotation.defaults = {
96+
drawTime: "afterDraw", // defaults to drawing after draw
9697
annotations: [] // default to no annotations
9798
};
9899

@@ -111,11 +112,17 @@ var updateFunctions = Chart.Annotation.updateFunctions = {
111112
box: boxAnnotation.update
112113
};
113114

115+
var drawTimeOptions = Chart.Annotation.drawTimeOptions = {
116+
afterDraw: "afterDraw",
117+
afterDatasetsDraw: "afterDatasetsDraw",
118+
beforeDatasetsDraw: "beforeDatasetsDraw",
119+
};
120+
114121
// Chartjs Zoom Plugin
115122
var AnnotationPlugin = Chart.PluginBase.extend({
116123
beforeInit: function(chartInstance) {
117124
var options = chartInstance.options;
118-
options.annotation = helpers.configMerge(options.annotation, Chart.Annotation.defaults);
125+
options.annotation = helpers.configMerge(Chart.Annotation.defaults, options.annotation);
119126

120127
var annotationConfigs = options.annotation.annotations;
121128
if (isArray(annotationConfigs)) {
@@ -132,7 +139,7 @@ var AnnotationPlugin = Chart.PluginBase.extend({
132139
}
133140
},
134141
afterScaleUpdate: function(chartInstance) {
135-
// Once scales are ready, update
142+
// Once scales are ready, update
136143
var annotationObjects = chartInstance._annotationObjects;
137144
var annotationOpts = chartInstance.options.annotation;
138145

@@ -149,6 +156,31 @@ var AnnotationPlugin = Chart.PluginBase.extend({
149156
},
150157

151158
afterDraw: function(chartInstance, easingDecimal) {
159+
this.drawAnnotations(
160+
Chart.Annotation.drawTimeOptions.afterDraw,
161+
chartInstance,
162+
easingDecimal
163+
);
164+
},
165+
afterDatasetsDraw: function(chartInstance, easingDecimal) {
166+
this.drawAnnotations(
167+
Chart.Annotation.drawTimeOptions.afterDatasetsDraw,
168+
chartInstance,
169+
easingDecimal
170+
);
171+
},
172+
beforeDatasetsDraw: function(chartInstance, easingDecimal) {
173+
this.drawAnnotations(
174+
Chart.Annotation.drawTimeOptions.beforeDatasetsDraw,
175+
chartInstance,
176+
easingDecimal
177+
);
178+
},
179+
drawAnnotations: function(drawTime, chartInstance, easingDecimal) {
180+
var annotationOpts = chartInstance.options.annotation;
181+
if (annotationOpts.drawTime != drawTime) {
182+
return;
183+
}
152184
// If we have annotations, draw them
153185
var annotationObjects = chartInstance._annotationObjects;
154186
if (isArray(annotationObjects)) {
@@ -176,6 +208,7 @@ module.exports = function(Chart) {
176208
var view = this._view;
177209

178210
// Canvas setup
211+
ctx.save();
179212
ctx.lineWidth = view.borderWidth;
180213
ctx.strokeStyle = view.borderColor;
181214

@@ -189,6 +222,7 @@ module.exports = function(Chart) {
189222
ctx.moveTo(view.x1, view.y1);
190223
ctx.lineTo(view.x2, view.y2);
191224
ctx.stroke();
225+
ctx.restore();
192226
}
193227
});
194228

‎Chart.Annotation.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎README.md‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,13 @@ To configure the annotations plugin, you can simply add new config options to yo
1919
value: '25',
2020
borderColor: 'red',
2121
borderWidth: 2
22-
}]
22+
}],
23+
// Defines when the annotations are drawn.
24+
// This allows positioning of the annotation relative to the other
25+
// elements of the graph.
26+
// Should be one of: afterDraw, afterDatasetsDraw, beforeDatasetsDraw
27+
// See http://www.chartjs.org/docs/#advanced-usage-creating-plugins
28+
drawTime: "afterDraw" // (default)
2329
}
2430
}
2531
```
@@ -56,7 +62,7 @@ Vertical or horizontal lines are supported.
5662
```
5763

5864
### Box Annotations
59-
Box annotations are supported. If one of the axes is not specified, the box will take the entire chart dimension.
65+
Box annotations are supported. If one of the axes is not specified, the box will take the entire chart dimension.
6066

6167
The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the box is expanded out to the edges
6268

‎samples/box.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@
127127
}]
128128
},
129129
annotation: {
130+
drawTime: "beforeDatasetsDraw",
130131
annotations: [{
131132
type: 'box',
132133
xScaleID: 'x-axis-1',

‎samples/horizontal-line.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@
127127
}]
128128
},
129129
annotation: {
130+
drawTime: "beforeDatasetsDraw",
130131
annotations: [{
131132
type: 'line',
132133
mode: 'horizontal',

‎src/chart.annotation.js‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ Chart.Annotation = Chart.Annotation || {};
99

1010
// Default options if none are provided
1111
var defaultOptions = Chart.Annotation.defaults = {
12+
drawTime: "afterDraw", // defaults to drawing after draw
1213
annotations: [] // default to no annotations
1314
};
1415

@@ -27,11 +28,17 @@ var updateFunctions = Chart.Annotation.updateFunctions = {
2728
box: boxAnnotation.update
2829
};
2930

31+
var drawTimeOptions = Chart.Annotation.drawTimeOptions = {
32+
afterDraw: "afterDraw",
33+
afterDatasetsDraw: "afterDatasetsDraw",
34+
beforeDatasetsDraw: "beforeDatasetsDraw",
35+
};
36+
3037
// Chartjs Zoom Plugin
3138
var AnnotationPlugin = Chart.PluginBase.extend({
3239
beforeInit: function(chartInstance) {
3340
var options = chartInstance.options;
34-
options.annotation = helpers.configMerge(options.annotation, Chart.Annotation.defaults);
41+
options.annotation = helpers.configMerge(Chart.Annotation.defaults, options.annotation);
3542

3643
var annotationConfigs = options.annotation.annotations;
3744
if (isArray(annotationConfigs)) {
@@ -48,7 +55,7 @@ var AnnotationPlugin = Chart.PluginBase.extend({
4855
}
4956
},
5057
afterScaleUpdate: function(chartInstance) {
51-
// Once scales are ready, update
58+
// Once scales are ready, update
5259
var annotationObjects = chartInstance._annotationObjects;
5360
var annotationOpts = chartInstance.options.annotation;
5461

@@ -65,6 +72,31 @@ var AnnotationPlugin = Chart.PluginBase.extend({
6572
},
6673

6774
afterDraw: function(chartInstance, easingDecimal) {
75+
this.drawAnnotations(
76+
Chart.Annotation.drawTimeOptions.afterDraw,
77+
chartInstance,
78+
easingDecimal
79+
);
80+
},
81+
afterDatasetsDraw: function(chartInstance, easingDecimal) {
82+
this.drawAnnotations(
83+
Chart.Annotation.drawTimeOptions.afterDatasetsDraw,
84+
chartInstance,
85+
easingDecimal
86+
);
87+
},
88+
beforeDatasetsDraw: function(chartInstance, easingDecimal) {
89+
this.drawAnnotations(
90+
Chart.Annotation.drawTimeOptions.beforeDatasetsDraw,
91+
chartInstance,
92+
easingDecimal
93+
);
94+
},
95+
drawAnnotations: function(drawTime, chartInstance, easingDecimal) {
96+
var annotationOpts = chartInstance.options.annotation;
97+
if (annotationOpts.drawTime != drawTime) {
98+
return;
99+
}
68100
// If we have annotations, draw them
69101
var annotationObjects = chartInstance._annotationObjects;
70102
if (isArray(annotationObjects)) {

0 commit comments

Comments
 (0)