diff --git a/docs/graph2d.html b/docs/graph2d.html index 44cee1e1..ae919d0b 100644 --- a/docs/graph2d.html +++ b/docs/graph2d.html @@ -464,6 +464,30 @@ The options colored in green can also be used as options for the groups. All opt true Show or hide the data axis. + + dataAxis.title.left.text + String + undefined + Set the title for the left axis. + + + dataAxis.title.left.style + String + undefined + Set 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.style + String + undefined + Set 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 diff --git a/examples/graph2d/16_bothAxis_titles.html b/examples/graph2d/16_bothAxis_titles.html new file mode 100644 index 00000000..fb12f461 --- /dev/null +++ b/examples/graph2d/16_bothAxis_titles.html @@ -0,0 +1,201 @@ + + + + Graph2d | Both Axis Example + + + + + + + +

Graph2d | Axis Title Example

+
+ + + + + +
+ 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. + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/lib/timeline/component/DataAxis.js b/lib/timeline/component/DataAxis.js index 17fe0d80..74db1a5e 100644 --- a/lib/timeline/component/DataAxis.js +++ b/lib/timeline/component/DataAxis.js @@ -31,6 +31,10 @@ function DataAxis (body, options, svg, linegraphOptions) { left: {min:undefined, max:undefined}, right: {min:undefined, max:undefined} }, + title: { + left: {text:undefined}, + right: {text:undefined} + }, format: { left: {decimals: undefined}, right: {decimals: undefined} @@ -42,7 +46,8 @@ function DataAxis (body, options, svg, linegraphOptions) { this.props = {}; this.DOMelements = { // dynamic elements lines: {}, - labels: {} + labels: {}, + title: {} }; this.dom = {}; @@ -113,6 +118,7 @@ DataAxis.prototype.setOptions = function (options) { 'width', 'visible', 'customRange', + 'title', 'format' ]; util.selectiveExtend(fields, this.options, options); @@ -257,7 +263,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; @@ -285,6 +291,8 @@ DataAxis.prototype.redraw = function () { if (this.options.icons == true) { this._redrawGroupIcons(); } + + this._redrawTitle(orientation); } return changeCalled; }; @@ -370,8 +378,14 @@ 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 = 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. if (this.maxLabelSize > (this.width - offset) && this.options.visible == true) { this.width = this.maxLabelSize + offset; this.options.width = this.width + "px"; @@ -461,6 +475,36 @@ 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] == undefined || 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; + + // 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'; + } + else { + title.style.right = this.props.titleCharHeight + 'px'; + } + + title.style.width = this.height + 'px'; +}; @@ -497,6 +541,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);