From 1636e3717fe7b26eabb9caf4bf026ef6b262fa72 Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Fri, 31 Oct 2014 16:51:31 +0000 Subject: [PATCH 1/6] Add 'title' option to display a title on the left or right axes. This is primarily designed for the graph2d line graph. --- examples/graph2d/16_bothAxis_titles.html | 187 +++++++++++++++++++++++ lib/timeline/component/DataAxis.js | 58 ++++++- lib/timeline/component/css/dataaxis.css | 42 +++++ 3 files changed, 282 insertions(+), 5 deletions(-) create mode 100644 examples/graph2d/16_bothAxis_titles.html diff --git a/examples/graph2d/16_bothAxis_titles.html b/examples/graph2d/16_bothAxis_titles.html new file mode 100644 index 00000000..90929099 --- /dev/null +++ b/examples/graph2d/16_bothAxis_titles.html @@ -0,0 +1,187 @@ + + + + Graph2d | Both Axis Example + + + + + + + +

Graph2d | Both Axis Example

+
+ + + + + +
+ This example shows setting a title for the left and right axes. + + + + + + + + + + + + + + +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/lib/timeline/component/DataAxis.js b/lib/timeline/component/DataAxis.js index 31c486f2..4f428a51 100644 --- a/lib/timeline/component/DataAxis.js +++ b/lib/timeline/component/DataAxis.js @@ -30,6 +30,10 @@ function DataAxis (body, options, svg, linegraphOptions) { customRange: { left: {min:undefined, max:undefined}, right: {min:undefined, max:undefined} + }, + title: { + left: {text:undefined}, + right: {text:undefined} } }; @@ -38,7 +42,8 @@ function DataAxis (body, options, svg, linegraphOptions) { this.props = {}; this.DOMelements = { // dynamic elements lines: {}, - labels: {} + labels: {}, + title: {} }; this.dom = {}; @@ -108,7 +113,8 @@ DataAxis.prototype.setOptions = function (options) { 'iconWidth', 'width', 'visible', - 'customRange' + 'customRange', + 'title' ]; util.selectiveExtend(fields, this.options, options); @@ -252,7 +258,7 @@ DataAxis.prototype.redraw = function () { var showMinorLabels = this.options.showMinorLabels; var showMajorLabels = this.options.showMajorLabels; - // determine the width and height of the elemens for the axis + // determine the width and height of the elements for the axis props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0; props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0; @@ -280,6 +286,8 @@ DataAxis.prototype.redraw = function () { if (this.options.icons == true) { this._redrawGroupIcons(); } + + this._redrawTitle(orientation); } return changeCalled; }; @@ -359,8 +367,11 @@ DataAxis.prototype._redrawLabels = function () { this.conversionFactor = this.dom.frame.offsetHeight / step.marginRange; } - var offset = this.options.icons == true ? this.options.iconWidth + this.options.labelOffsetX + 15 : this.options.labelOffsetX + 15; - // this will resize the yAxis to accomodate the labels. + // Note that title is rotated, so we're using the height, not width! + var titleWidth = this.options.title[orientation].text === undefined ? 0 : this.props.titleCharHeight; + var offset = this.options.icons == true ? Math.max(this.options.iconWidth, titleWidth) + this.options.labelOffsetX + 15 : titleWidth + this.options.labelOffsetX + 15; + + // this will resize the yAxis to accommodate the labels. if (this.maxLabelSize > (this.width - offset) && this.options.visible == true) { this.width = this.maxLabelSize + offset; this.options.width = this.width + "px"; @@ -450,6 +461,30 @@ DataAxis.prototype._redrawLine = function (y, orientation, className, offset, wi } }; +/** + * Create a title for the axis + * @private + * @param orientation + */ +DataAxis.prototype._redrawTitle = function (orientation) { + DOMutil.prepareElements(this.DOMelements.title); + + // Check if the title is defined for this axes + if(this.options.title[orientation] == false || this.options.title[orientation].text === undefined) { + return; + } + var title = DOMutil.getDOMElement('div',this.DOMelements.title, this.dom.frame); + title.className = 'yAxis title ' + orientation; + title.innerHTML = this.options.title[orientation].text; + if (orientation == 'left') { + title.style.left = this.props.titleCharHeight + 'px'; + } + else { + title.style.right = this.props.titleCharHeight + 'px'; + } + + title.style.width = this.height + 'px'; +}; @@ -486,6 +521,19 @@ DataAxis.prototype._calculateCharSize = function () { this.dom.frame.removeChild(measureCharMajor); } + + if (!('titleCharHeight' in this.props)) { + var textTitle = document.createTextNode('0'); + var measureCharTitle = document.createElement('DIV'); + measureCharTitle.className = 'yAxis title measure'; + measureCharTitle.appendChild(textTitle); + this.dom.frame.appendChild(measureCharTitle); + + this.props.titleCharHeight = measureCharTitle.clientHeight; + this.props.titleCharWidth = measureCharTitle.clientWidth; + + this.dom.frame.removeChild(measureCharTitle); + } }; /** diff --git a/lib/timeline/component/css/dataaxis.css b/lib/timeline/component/css/dataaxis.css index 1fe4d71d..279899d5 100644 --- a/lib/timeline/component/css/dataaxis.css +++ b/lib/timeline/component/css/dataaxis.css @@ -44,6 +44,48 @@ width: auto; } +.vis.timeline .dataaxis .yAxis.title{ + position: absolute; + color: #4d4d4d; + white-space: nowrap; + bottom: 20px; + text-align: center; +} + +.vis.timeline .dataaxis .yAxis.title.measure{ + padding: 0px 0px 0px 0px; + margin: 0px 0px 0px 0px; + visibility: hidden; + width: auto; +} + +.vis.timeline .dataaxis .yAxis.title.left { + bottom: 0px; + -webkit-transform-origin: left top; + -moz-transform-origin: left top; + -ms-transform-origin: left top; + -o-transform-origin: left top; + transform-origin: left bottom; + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + transform: rotate(-90deg); +} + +.vis.timeline .dataaxis .yAxis.title.right { + bottom: 0px; + -webkit-transform-origin: right bottom; + -moz-transform-origin: right bottom; + -ms-transform-origin: right bottom; + -o-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + -o-transform: rotate(90deg); + transform: rotate(90deg); +} .vis.timeline .legend { background-color: rgba(247, 252, 255, 0.65); From 42c022437d0e3a541b296b188bcc2e0a2643b1a3 Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Sat, 1 Nov 2014 11:09:30 +0000 Subject: [PATCH 2/6] Tidy up example --- examples/graph2d/16_bothAxis_titles.html | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/examples/graph2d/16_bothAxis_titles.html b/examples/graph2d/16_bothAxis_titles.html index 90929099..76cf6391 100644 --- a/examples/graph2d/16_bothAxis_titles.html +++ b/examples/graph2d/16_bothAxis_titles.html @@ -38,12 +38,13 @@ -

Graph2d | Both Axis Example

+

Graph2d | Axis Title Example

@@ -166,7 +170,7 @@ function showTitle(axes, show) { var title; if(show == true) { - title = {text: "Title (" + axes + " axes)"}; + title = {text: "Title (" + axes + " axes)", style: "color: green;"}; } else { title = false; @@ -180,6 +184,19 @@ } } + var colors=['red','green','blue','black','yellow','purple','pink']; + function styleTitle(axes) { + var title; + title = {style: "color: " + colors[Math.floor(Math.random() * colors.length) + 1]}; + + if(axes == 'left') { + graph2d.setOptions({dataAxis: {title: {left: title}}}); + } + else { + graph2d.setOptions({dataAxis: {title: {right: title}}}); + } + } + \ No newline at end of file diff --git a/lib/timeline/component/DataAxis.js b/lib/timeline/component/DataAxis.js index 4f428a51..f80025b8 100644 --- a/lib/timeline/component/DataAxis.js +++ b/lib/timeline/component/DataAxis.js @@ -476,6 +476,12 @@ DataAxis.prototype._redrawTitle = function (orientation) { var title = DOMutil.getDOMElement('div',this.DOMelements.title, this.dom.frame); title.className = 'yAxis title ' + orientation; title.innerHTML = this.options.title[orientation].text; + + // Add style - if provided + if(this.options.title[orientation].style !== undefined) { + util.addCssText(title, this.options.title[orientation].style); + } + if (orientation == 'left') { title.style.left = this.props.titleCharHeight + 'px'; } From 846e2b32d4bdc3a75f4f433183087ba5192a93e8 Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Sun, 2 Nov 2014 12:29:27 +0000 Subject: [PATCH 5/6] Catch case where title is undefined --- examples/graph2d/16_bothAxis_titles.html | 1 - lib/timeline/component/DataAxis.js | 7 +++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/examples/graph2d/16_bothAxis_titles.html b/examples/graph2d/16_bothAxis_titles.html index bc073c7a..dbc86e78 100644 --- a/examples/graph2d/16_bothAxis_titles.html +++ b/examples/graph2d/16_bothAxis_titles.html @@ -151,7 +151,6 @@ dataAxis: { showMinorLabels: false, title: { - left: false, right: { text: 'Right (right axis)' } diff --git a/lib/timeline/component/DataAxis.js b/lib/timeline/component/DataAxis.js index f80025b8..214040cb 100644 --- a/lib/timeline/component/DataAxis.js +++ b/lib/timeline/component/DataAxis.js @@ -368,7 +368,10 @@ DataAxis.prototype._redrawLabels = function () { } // Note that title is rotated, so we're using the height, not width! - var titleWidth = this.options.title[orientation].text === undefined ? 0 : this.props.titleCharHeight; + var titleWidth = 0; + if(this.options.title[orientation] !== undefined) { + titleWidth = this.props.titleCharHeight; + } var offset = this.options.icons == true ? Math.max(this.options.iconWidth, titleWidth) + this.options.labelOffsetX + 15 : titleWidth + this.options.labelOffsetX + 15; // this will resize the yAxis to accommodate the labels. @@ -470,7 +473,7 @@ DataAxis.prototype._redrawTitle = function (orientation) { DOMutil.prepareElements(this.DOMelements.title); // Check if the title is defined for this axes - if(this.options.title[orientation] == false || this.options.title[orientation].text === undefined) { + if(this.options.title[orientation] == undefined || this.options.title[orientation].text === undefined) { return; } var title = DOMutil.getDOMElement('div',this.DOMelements.title, this.dom.frame); From ab76d352039823c8e89ac502b56bf4b4e37fd5cd Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Sun, 2 Nov 2014 12:53:43 +0000 Subject: [PATCH 6/6] Update demo --- examples/graph2d/16_bothAxis_titles.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/graph2d/16_bothAxis_titles.html b/examples/graph2d/16_bothAxis_titles.html index dbc86e78..fb12f461 100644 --- a/examples/graph2d/16_bothAxis_titles.html +++ b/examples/graph2d/16_bothAxis_titles.html @@ -172,7 +172,7 @@ title = {text: "Title (" + axes + " axes)", style: "color: green;"}; } else { - title = false; + title = undefined; } if(axes == 'left') {
- This example shows setting a title for the left and right axes. + This example shows setting a title for the left and right axes. Optionally the example allows the user + to show icons and labels on the left and right axis. @@ -147,9 +148,6 @@ showMinorLabels: false, title: { left: false, - // { - // text: 'Left Axis Title' - // }, right: { text: 'Right (right axis)' } From 997744988c32eb739630947e05dcea13758c6611 Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Sat, 1 Nov 2014 14:11:14 +0000 Subject: [PATCH 3/6] Add documentation for axis titles. --- docs/graph2d.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/docs/graph2d.html b/docs/graph2d.html index 5f8b8f0a..b0acaccc 100644 --- a/docs/graph2d.html +++ b/docs/graph2d.html @@ -455,6 +455,18 @@ The options colored in green can also be used as options for the groups. All opt + + + + + + + + + + + + From f82b32c0cf5d8a37ec8b162e3d15263afecd3f22 Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Sat, 1 Nov 2014 14:26:47 +0000 Subject: [PATCH 4/6] Add style option for axis titles. --- docs/graph2d.html | 12 ++++++++++++ examples/graph2d/16_bothAxis_titles.html | 19 ++++++++++++++++++- lib/timeline/component/DataAxis.js | 6 ++++++ 3 files changed, 36 insertions(+), 1 deletion(-) diff --git a/docs/graph2d.html b/docs/graph2d.html index b0acaccc..bed34536 100644 --- a/docs/graph2d.html +++ b/docs/graph2d.html @@ -461,12 +461,24 @@ The options colored in green can also be used as options for the groups. All opt + + + + + + + + + + + + diff --git a/examples/graph2d/16_bothAxis_titles.html b/examples/graph2d/16_bothAxis_titles.html index 76cf6391..bc073c7a 100644 --- a/examples/graph2d/16_bothAxis_titles.html +++ b/examples/graph2d/16_bothAxis_titles.html @@ -60,6 +60,10 @@ + + + +
true Show or hide the data axis.
dataAxis.title.left.textStringundefinedSet the title for the left axis.
dataAxis.title.right.textStringundefinedSet the title for the right axis.
groups.visibility Objectundefined Set the title for the left axis.
dataAxis.title.left.styleStringundefinedSet the title style for the left axis. This is a css string and it will override the attributes set in the class.
dataAxis.title.right.text String undefined Set the title for the right axis.
dataAxis.title.right.styleStringundefinedSet the title style for the right axis. This is a css string and it will override the attributes set in the class.
groups.visibility Object