3 * Copyright 2012 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
6 Dygraph
.Plugins
.ChartLabels
= (function() {
10 // TODO(danvk): move chart label options out of dygraphs and into the plugin.
11 // TODO(danvk): only tear down & rebuild the DIVs when it's necessary.
13 var chart_labels
= function() {
14 this.title_div_
= null;
15 this.xlabel_div_
= null;
16 this.ylabel_div_
= null;
17 this.y2label_div_
= null;
20 chart_labels
.prototype.toString
= function() {
21 return "ChartLabels Plugin";
24 chart_labels
.prototype.activate
= function(g
) {
27 // clearChart: this.clearChart,
28 didDrawChart
: this.didDrawChart
32 // QUESTION: should there be a plugin-utils.js?
33 var createDivInRect
= function(r
) {
34 var div
= document
.createElement('div');
35 div
.style
.position
= 'absolute';
36 div
.style
.left
= r
.x
+ 'px';
37 div
.style
.top
= r
.y
+ 'px';
38 div
.style
.width
= r
.w
+ 'px';
39 div
.style
.height
= r
.h
+ 'px';
43 // Detach and null out any existing nodes.
44 chart_labels
.prototype.detachLabels_
= function() {
45 var els
= [ this.title_div_
,
49 for (var i
= 0; i
< els
.length
; i
++) {
52 if (el
.parentNode
) el
.parentNode
.removeChild(el
);
55 this.title_div_
= null;
56 this.xlabel_div_
= null;
57 this.ylabel_div_
= null;
58 this.y2label_div_
= null;
61 var createRotatedDiv
= function(g
, box
, axis
, classes
, html
) {
62 // TODO(danvk): is this outer div actually necessary?
63 var div
= document
.createElement("div");
64 div
.style
.position
= 'absolute';
66 // NOTE: this is cheating. Should be positioned relative to the box.
67 div
.style
.left
= '0px';
69 div
.style
.left
= box
.x
+ 'px';
71 div
.style
.top
= box
.y
+ 'px';
72 div
.style
.width
= box
.w
+ 'px';
73 div
.style
.height
= box
.h
+ 'px';
74 div
.style
.fontSize
= (g
.getOption('yLabelWidth') - 2) + 'px';
76 var inner_div
= document
.createElement("div");
77 inner_div
.style
.position
= 'absolute';
78 inner_div
.style
.width
= box
.h
+ 'px';
79 inner_div
.style
.height
= box
.w
+ 'px';
80 inner_div
.style
.top
= (box
.h
/ 2 - box.w / 2) + 'px';
81 inner_div
.style
.left
= (box
.w
/ 2 - box.h / 2) + 'px';
82 inner_div
.style
.textAlign
= 'center';
84 // CSS rotation is an HTML5 feature which is not standardized. Hence every
85 // browser has its own name for the CSS style.
86 var val
= 'rotate(' + (axis
== 1 ? '-' : '') + '90deg)';
87 inner_div
.style
.transform
= val
; // HTML5
88 inner_div
.style
.WebkitTransform
= val
; // Safari/Chrome
89 inner_div
.style
.MozTransform
= val
; // Firefox
90 inner_div
.style
.OTransform
= val
; // Opera
91 inner_div
.style
.msTransform
= val
; // IE9
93 if (typeof(document
.documentMode
) !== 'undefined' &&
94 document
.documentMode
< 9) {
95 // We're dealing w/ an old version of IE
, so we have to rotate the text
96 // using a BasicImage transform. This uses a different origin of rotation
97 // than HTML5 rotation (top left of div vs. its center).
98 inner_div
.style
.filter
=
99 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' +
100 (axis
== 1 ? '3' : '1') + ')';
101 inner_div
.style
.left
= '0px';
102 inner_div
.style
.top
= '0px';
105 var class_div
= document
.createElement("div");
106 class_div
.className
= classes
;
107 class_div
.innerHTML
= html
;
109 inner_div
.appendChild(class_div
);
110 div
.appendChild(inner_div
);
114 chart_labels
.prototype.layout
= function(e
) {
115 this.detachLabels_();
118 var div
= e
.chart_div
;
119 if (g
.getOption('title')) {
120 // QUESTION: should this return an absolutely-positioned div instead?
121 var title_rect
= e
.reserveSpaceTop(g
.getOption('titleHeight'));
122 this.title_div_
= createDivInRect(title_rect
);
123 this.title_div_
.style
.textAlign
= 'center';
124 this.title_div_
.style
.fontSize
= (g
.getOption('titleHeight') - 8) + 'px';
125 this.title_div_
.style
.fontWeight
= 'bold';
127 var class_div
= document
.createElement("div");
128 class_div
.className
= 'dygraph-label dygraph-title';
129 class_div
.innerHTML
= g
.getOption('title');
130 this.title_div_
.appendChild(class_div
);
131 div
.appendChild(this.title_div_
);
134 if (g
.getOption('xlabel')) {
135 var x_rect
= e
.reserveSpaceBottom(g
.getOption('xLabelHeight'));
136 this.xlabel_div_
= createDivInRect(x_rect
);
137 this.xlabel_div_
.style
.textAlign
= 'center';
138 this.xlabel_div_
.style
.fontSize
= (g
.getOption('xLabelHeight') - 2) + 'px';
140 var class_div
= document
.createElement("div");
141 class_div
.className
= 'dygraph-label dygraph-xlabel';
142 class_div
.innerHTML
= g
.getOption('xlabel');
143 this.xlabel_div_
.appendChild(class_div
);
144 div
.appendChild(this.xlabel_div_
);
147 if (g
.getOption('ylabel')) {
148 // It would make sense to shift the chart here to make room for the y-axis
149 // label, but the default yAxisLabelWidth is large enough that this results
150 // in overly-padded charts. The y-axis label should fit fine. If it
151 // doesn't, the yAxisLabelWidth option can be increased.
152 var y_rect
= e
.reserveSpaceLeft(0);
154 this.ylabel_div_
= createRotatedDiv(
156 1, // primary (left) y-axis
157 'dygraph-label dygraph-ylabel',
158 g
.getOption('ylabel'));
159 div
.appendChild(this.ylabel_div_
);
162 if (g
.getOption('y2label') && g
.numAxes() == 2) {
163 // same logic applies here as for ylabel.
164 var y2_rect
= e
.reserveSpaceRight(0);
165 this.y2label_div_
= createRotatedDiv(
167 2, // secondary (right) y-axis
168 'dygraph-label dygraph-y2label',
169 g
.getOption('y2label'));
170 div
.appendChild(this.y2label_div_
);
174 chart_labels
.prototype.didDrawChart
= function(e
) {
176 if (this.title_div_
) {
177 this.title_div_
.children
[0].innerHTML
= g
.getOption('title');
179 if (this.xlabel_div_
) {
180 this.xlabel_div_
.children
[0].innerHTML
= g
.getOption('xlabel');
182 if (this.ylabel_div_
) {
183 this.ylabel_div_
.children
[0].children
[0].innerHTML
= g
.getOption('ylabel');
185 if (this.y2label_div_
) {
186 this.y2label_div_
.children
[0].children
[0].innerHTML
= g
.getOption('y2label');
190 chart_labels
.prototype.clearChart
= function() {
193 chart_labels
.prototype.destroy
= function() {