From 1636e3717fe7b26eabb9caf4bf026ef6b262fa72 Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Fri, 31 Oct 2014 16:51:31 +0000 Subject: [PATCH 01/16] 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 02/16] 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 ae8350e4087da52dbe53af6ecedd91d2e6c9c3a3 Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Sat, 1 Nov 2014 19:30:25 +0000 Subject: [PATCH 07/16] Update icon to reflect style --- lib/timeline/component/GraphGroup.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/timeline/component/GraphGroup.js b/lib/timeline/component/GraphGroup.js index e757827f..f70cd3dd 100644 --- a/lib/timeline/component/GraphGroup.js +++ b/lib/timeline/component/GraphGroup.js @@ -89,6 +89,10 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon if (this.options.style == 'line') { path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer); path.setAttributeNS(null, "class", this.className); + if(this.style !== undefined) { + path.setAttributeNS(null, "style", this.style); + } + path.setAttributeNS(null, "d", "M" + x + ","+y+" L" + (x + iconWidth) + ","+y+""); if (this.options.shaded.enabled == true) { fillPath = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer); From e9f023fe6e19e3f33b77040527b03e6f88c009c1 Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Sun, 2 Nov 2014 12:14:31 +0000 Subject: [PATCH 08/16] Add decimal option for formatting axis labels --- lib/timeline/DataStep.js | 60 +++++++++++++++++++++++++----- lib/timeline/component/DataAxis.js | 17 +++++++-- 2 files changed, 64 insertions(+), 13 deletions(-) diff --git a/lib/timeline/DataStep.js b/lib/timeline/DataStep.js index e5923aa4..14dc51f1 100644 --- a/lib/timeline/DataStep.js +++ b/lib/timeline/DataStep.js @@ -178,19 +178,59 @@ DataStep.prototype.previous = function() { * Get the current datetime * @return {String} current The current date */ -DataStep.prototype.getCurrent = function() { +DataStep.prototype.getCurrent = function(decimals) { var toPrecision = '' + Number(this.current).toPrecision(5); - if (toPrecision.indexOf(",") != -1 || toPrecision.indexOf(".") != -1) { - for (var i = toPrecision.length-1; i > 0; i--) { - if (toPrecision[i] == "0") { - toPrecision = toPrecision.slice(0,i); + // If decimals is specified, then limit or extend the string as required + if(decimals !== undefined && !isNaN(Number(decimals))) { + // If string includes exponent, then we need to add it to the end + var exp = ""; + var index = toPrecision.indexOf("e"); + if(index != -1) { + // Get the exponent + exp = toPrecision.slice(index); + // Remove the exponent in case we need to zero-extend + toPrecision = toPrecision.slice(0, index); + } + index = Math.max(toPrecision.indexOf(","), toPrecision.indexOf(".")); + if(index === -1) { + // No decimal found - if we want decimals, then we need to add it + if(decimals !== 0) { + toPrecision += '.'; } - else if (toPrecision[i] == "." || toPrecision[i] == ",") { - toPrecision = toPrecision.slice(0,i); - break; + // Calculate how long the string should be + index = toPrecision.length + decimals; + } + else if(decimals !== 0) { + // Calculate how long the string should be - accounting for the decimal place + index += decimals + 1; + } + if(index > toPrecision.length) { + // We need to add zeros! + for(var cnt = index - toPrecision.length; cnt > 0; cnt--) { + toPrecision += '0'; } - else{ - break; + } + else { + // we need to remove characters + toPrecision = toPrecision.slice(0, index); + } + // Add the exponent if there is one + toPrecision += exp; + } + else { + if (toPrecision.indexOf(",") != -1 || toPrecision.indexOf(".") != -1) { + // If no decimal is specified, and there are decimal places, remove trailing zeros + for (var i = toPrecision.length - 1; i > 0; i--) { + if (toPrecision[i] == "0") { + toPrecision = toPrecision.slice(0, i); + } + else if (toPrecision[i] == "." || toPrecision[i] == ",") { + toPrecision = toPrecision.slice(0, i); + break; + } + else { + break; + } } } } diff --git a/lib/timeline/component/DataAxis.js b/lib/timeline/component/DataAxis.js index 31c486f2..17fe0d80 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} + }, + format: { + left: {decimals: undefined}, + right: {decimals: undefined} } }; @@ -108,7 +112,8 @@ DataAxis.prototype.setOptions = function (options) { 'iconWidth', 'width', 'visible', - 'customRange' + 'customRange', + 'format' ]; util.selectiveExtend(fields, this.options, options); @@ -326,6 +331,12 @@ DataAxis.prototype._redrawLabels = function () { // do not draw the first label var max = 1; + // Get the number of decimal places + var decimals; + if(this.options.format[orientation] !== undefined) { + decimals = this.options.format[orientation].decimals; + } + this.maxLabelSize = 0; var y = 0; while (max < Math.round(amountOfSteps)) { @@ -335,13 +346,13 @@ DataAxis.prototype._redrawLabels = function () { var isMajor = step.isMajor(); if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) { - this._redrawLabel(y - 2, step.getCurrent(), orientation, 'yAxis minor', this.props.minorCharHeight); + this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis minor', this.props.minorCharHeight); } if (isMajor && this.options['showMajorLabels'] && this.master == true || this.options['showMinorLabels'] == false && this.master == false && isMajor == true) { if (y >= 0) { - this._redrawLabel(y - 2, step.getCurrent(), orientation, 'yAxis major', this.props.majorCharHeight); + this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis major', this.props.majorCharHeight); } this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth); } From 846e2b32d4bdc3a75f4f433183087ba5192a93e8 Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Sun, 2 Nov 2014 12:29:27 +0000 Subject: [PATCH 09/16] 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 10/16] 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') { From e9cd8384934d2659e55e8ec43009c64bd5c34ddb Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Mon, 3 Nov 2014 12:11:40 +0000 Subject: [PATCH 11/16] Update examples --- examples/graph2d/16_bothAxis_titles.html | 18 ++- examples/graph2d/17_dynamicStyling.html | 186 +++++++++++++++++++++++ 2 files changed, 202 insertions(+), 2 deletions(-) create mode 100644 examples/graph2d/17_dynamicStyling.html diff --git a/examples/graph2d/16_bothAxis_titles.html b/examples/graph2d/16_bothAxis_titles.html index fb12f461..b8adff81 100644 --- a/examples/graph2d/16_bothAxis_titles.html +++ b/examples/graph2d/16_bothAxis_titles.html @@ -1,7 +1,7 @@ - Graph2d | Both Axis Example + Graph2d | Axis Titles and Styling + + + + + +

Graph2d | Dynamic Styling Example

+ +
+ This example shows how to programmatically change the styling of a group. While this can also + be done in CSS, this must be statically defined, and the programmatic interface allows the + user to define the look of the graph at runtime. +
+
+ + +
- 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 64ed420183af7c9fc216b9ce107c98ddc0b6c7b2 Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Sat, 1 Nov 2014 13:54:14 +0000 Subject: [PATCH 03/16] Add 'style' option to group for lineChart. Allows overriding of class definitions which provides a much simpler interface for programatically setting user defined options. --- lib/timeline/component/GraphGroup.js | 1 + lib/timeline/component/LineGraph.js | 3 +++ 2 files changed, 4 insertions(+) diff --git a/lib/timeline/component/GraphGroup.js b/lib/timeline/component/GraphGroup.js index 5917c79b..e757827f 100644 --- a/lib/timeline/component/GraphGroup.js +++ b/lib/timeline/component/GraphGroup.js @@ -71,6 +71,7 @@ GraphGroup.prototype.update = function(group) { this.content = group.content || 'graph'; this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0] % 10; this.visible = group.visible === undefined ? true : group.visible; + this.style = group.style; this.setOptions(group.options); }; diff --git a/lib/timeline/component/LineGraph.js b/lib/timeline/component/LineGraph.js index 2736079a..9195734f 100644 --- a/lib/timeline/component/LineGraph.js +++ b/lib/timeline/component/LineGraph.js @@ -1047,6 +1047,9 @@ LineGraph.prototype._drawLineGraph = function (dataset, group) { var svgHeight = Number(this.svg.style.height.replace("px","")); path = DOMutil.getSVGElement('path', this.svgElements, this.svg); path.setAttributeNS(null, "class", group.className); + if(group.style !== undefined) { + path.setAttributeNS(null, "style", group.style); + } // construct path from dataset if (group.options.catmullRom.enabled == true) { From d3ac79113540c2247230ac34d007156b3670e1bc Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Sat, 1 Nov 2014 14:03:26 +0000 Subject: [PATCH 04/16] Add documentation. --- docs/graph2d.html | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/graph2d.html b/docs/graph2d.html index 5f8b8f0a..44cee1e1 100644 --- a/docs/graph2d.html +++ b/docs/graph2d.html @@ -238,6 +238,15 @@ groups.add({ an individual css style. + + + + + + From 997744988c32eb739630947e05dcea13758c6611 Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Sat, 1 Nov 2014 14:11:14 +0000 Subject: [PATCH 05/16] 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 06/16] 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 @@ + + + +
styleStringnoThis field is optional. A style can be used to give groups + an individual css style, and any style tags specified in style will + override the definition in the className style defined in css. +
options JSON objecttrue 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
+ + + + + + +
+
+ 		+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Color + +
Line Style + +
Line thickness + +
Fill + +
Points Shape + +
Points Size + +
+
+ + + + + From 09626acdd70cef767fe0f4aeb80be846fbd5f295 Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Mon, 3 Nov 2014 12:39:42 +0000 Subject: [PATCH 12/16] Update documentation --- docs/graph2d.html | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/docs/graph2d.html b/docs/graph2d.html index ae919d0b..c534ffc7 100644 --- a/docs/graph2d.html +++ b/docs/graph2d.html @@ -488,13 +488,29 @@ The options colored in green can also be used as options for the groups. All opt undefined Set the title style for the right axis. This is a css string and it will override the attributes set in the class. + + dataAxis.format.left.decimals + Number + undefined + Set the number of decimal points used on the the left axis. If set, this will fix the number of decimal places + displayed after the decimal point. + If undefined, trailing zeros will be removed. + + + dataAxis.format.right.decimals + Number + undefined + Set the number of decimal points used on the the right axis. If set, this will fix the number of decimal places + displayed after the decimal point. + If undefined, trailing zeros will be removed. + groups.visibility Object You can use this to toggle the visibility of groups per graph2D instance. This is different from setting the visibility flag of the groups since this is not communicated across instances of graph2d. Take a look at Example 14 - for more explaination. + for more explanation. From 4e6c5a51afcda46f04f33d869427204ea79d8fdb Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Mon, 3 Nov 2014 12:56:56 +0000 Subject: [PATCH 13/16] Add style option for data points. Note that this ought to be renamed to be consistent with other style options but currently 'style' is used to define the shape of the point. --- examples/graph2d/17_dynamicStyling.html | 43 +++++++++++++++++++++++-- lib/DOMutil.js | 7 ++-- 2 files changed, 46 insertions(+), 4 deletions(-) diff --git a/examples/graph2d/17_dynamicStyling.html b/examples/graph2d/17_dynamicStyling.html index 9600a8c7..0bbf26dd 100644 --- a/examples/graph2d/17_dynamicStyling.html +++ b/examples/graph2d/17_dynamicStyling.html @@ -110,6 +110,42 @@ + + Points Color + + + + + + Point line thickness + + + + + + Points Fill Color + + + + @@ -135,8 +171,7 @@ dataAxis: { showMinorLabels: false, icons: true - }, - legend: {left: {position: "top-left"}} + } }; var groupData = { @@ -165,7 +200,11 @@ groupData.style += document.getElementById("thickness").value; groupData.options.drawPoints = {}; + groupData.options.drawPoints.styles = ""; groupData.options.drawPoints.style = document.getElementById("points").value; + groupData.options.drawPoints.styles += document.getElementById("pointcolor").value; + groupData.options.drawPoints.styles += document.getElementById("pointthickness").value; + groupData.options.drawPoints.styles += document.getElementById("pointfill").value; groupData.options.drawPoints.size = Number(document.getElementById("pointsize").value); if (groupData.options.drawPoints.style == "") { groupData.options.drawPoints = false; diff --git a/lib/DOMutil.js b/lib/DOMutil.js index 38b35c7e..5cc01f6f 100644 --- a/lib/DOMutil.js +++ b/lib/DOMutil.js @@ -139,7 +139,6 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer) { point.setAttributeNS(null, "cx", x); point.setAttributeNS(null, "cy", y); point.setAttributeNS(null, "r", 0.5 * group.options.drawPoints.size); - point.setAttributeNS(null, "class", group.className + " point"); } else { point = exports.getSVGElement('rect',JSONcontainer,svgContainer); @@ -147,8 +146,12 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer) { point.setAttributeNS(null, "y", y - 0.5*group.options.drawPoints.size); point.setAttributeNS(null, "width", group.options.drawPoints.size); point.setAttributeNS(null, "height", group.options.drawPoints.size); - point.setAttributeNS(null, "class", group.className + " point"); } + + if(group.options.drawPoints.styles !== undefined) { + point.setAttributeNS(null, "style", group.group.options.drawPoints.styles); + } + point.setAttributeNS(null, "class", group.className + " point"); return point; }; From 9654c692a10f30c957923828d3b97c7625157ab7 Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Mon, 3 Nov 2014 13:11:46 +0000 Subject: [PATCH 14/16] Add fill styling option --- lib/timeline/component/LineGraph.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/timeline/component/LineGraph.js b/lib/timeline/component/LineGraph.js index 9195734f..54144f0c 100644 --- a/lib/timeline/component/LineGraph.js +++ b/lib/timeline/component/LineGraph.js @@ -1070,6 +1070,9 @@ LineGraph.prototype._drawLineGraph = function (dataset, group) { dFill = "M" + dataset[0].x + "," + svgHeight + " " + d + "L" + dataset[dataset.length - 1].x + "," + svgHeight; } fillPath.setAttributeNS(null, "class", group.className + " fill"); + if(group.options.shaded.style !== undefined) { + fillPath.setAttributeNS(null, "style", group.options.shaded.style); + } fillPath.setAttributeNS(null, "d", dFill); } // copy properties to path for drawing. From e7b9197163053140007802801c450df7fed043b1 Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Mon, 3 Nov 2014 13:16:03 +0000 Subject: [PATCH 15/16] Update demo. --- examples/graph2d/17_dynamicStyling.html | 45 +++++++++++++++++++++---- 1 file changed, 38 insertions(+), 7 deletions(-) diff --git a/examples/graph2d/17_dynamicStyling.html b/examples/graph2d/17_dynamicStyling.html index 0bbf26dd..fed71c38 100644 --- a/examples/graph2d/17_dynamicStyling.html +++ b/examples/graph2d/17_dynamicStyling.html @@ -18,7 +18,7 @@

Graph2d | Dynamic Styling Example

-
+
This example shows how to programmatically change the styling of a group. While this can also be done in CSS, this must be statically defined, and the programmatic interface allows the user to define the look of the graph at runtime. @@ -27,18 +27,18 @@ - - + +
- + - + - + + + + + + + + + - + + + + + + +
ColorLine Color
FillFill Position
Fill Color + +
Fill Opacity + +
Points Shape @@ -122,7 +150,7 @@
Point line thicknessPoint Line Thickness 'bottom' This determines if the shaded area is at the bottom or at the top of the curve. The options are 'bottom' or 'top'.
shaded.styleStringundefinedSet the style for the shading. This is a css string and it will override the attributes set in the class.
style String