diff --git a/docs/graph3d/index.html b/docs/graph3d/index.html
index 85829ad1..69d28ad6 100644
--- a/docs/graph3d/index.html
+++ b/docs/graph3d/index.html
@@ -386,6 +386,24 @@ var options = {
Ratio of the size of the dots with respect to the width of the graph. |
+
+ | dotSizeMinFraction |
+ number |
+ 0.5 |
+ Size of minimum-value dot as a fraction of dotSizeRatio.
+ Applicable when using style dot-size. |
+
+
+
+
+ | dotSizeMaxFraction |
+ number |
+ 2.5 |
+ Size of maximum-value dot as a fraction of dotSizeRatio.
+ Applicable when using style dot-size. |
+
+
+
| gridColor |
string |
diff --git a/examples/graph3d/08_dot_cloud_size.html b/examples/graph3d/08_dot_cloud_size.html
index 1d6fb47f..99ab8ffd 100644
--- a/examples/graph3d/08_dot_cloud_size.html
+++ b/examples/graph3d/08_dot_cloud_size.html
@@ -49,7 +49,9 @@
horizontal: -0.54,
vertical: 0.5,
distance: 1.6
- }
+ },
+ dotSizeMinFraction: 0.5,
+ dotSizeMaxFraction: 2.5
};
// create our graph
diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js
index e24ed2e4..29371ff7 100755
--- a/lib/graph3d/Graph3d.js
+++ b/lib/graph3d/Graph3d.js
@@ -53,7 +53,10 @@ var DEFAULTS = {
showShadow : false,
keepAspectRatio : true,
verticalRatio : 0.5, // 0.1 to 1.0, where 1.0 results in a 'cube'
- dotSizeRatio : 0.02, // size of the dots as a fraction of the graph width
+
+ dotSizeRatio : 0.02, // size of the dots as a fraction of the graph width
+ dotSizeMinFraction: 0.5, // size of min-value dot as a fraction of dotSizeRatio
+ dotSizeMaxFraction: 2.5, // size of max-value dot as a fraction of dotSizeRatio
showAnimationControls: autoByDefault,
animationInterval : 1000, // milliseconds
@@ -1014,7 +1017,8 @@ Graph3d.prototype._getLegendWidth = function() {
if (this.style === Graph3d.STYLE.DOTSIZE) {
var dotSize = this._dotSize();
- width = dotSize / 2 + dotSize * 2;
+ //width = dotSize / 2 + dotSize * 2;
+ width = dotSize * this.dotSizeMaxFraction;
} else if (this.style === Graph3d.STYLE.BARSIZE) {
width = this.xBarWidth ;
} else {
@@ -1086,8 +1090,8 @@ Graph3d.prototype._redrawLegend = function() {
// draw the size legend box
var widthMin;
if (this.style === Graph3d.STYLE.DOTSIZE) {
- var dotSize = this._dotSize();
- widthMin = dotSize / 2; // px
+ // Get the proportion to max and min right
+ widthMin = width * (this.dotSizeMinFraction / this.dotSizeMaxFraction);
} else if (this.style === Graph3d.STYLE.BARSIZE) {
//widthMin = this.xBarWidth * 0.2 this is wrong - barwidth measures in terms of xvalues
}
@@ -1096,7 +1100,7 @@ Graph3d.prototype._redrawLegend = function() {
ctx.beginPath();
ctx.moveTo(left, top);
ctx.lineTo(right, top);
- ctx.lineTo(right - width + widthMin, bottom);
+ ctx.lineTo(left + widthMin, bottom);
ctx.lineTo(left, bottom);
ctx.closePath();
ctx.fill();
@@ -1821,10 +1825,14 @@ Graph3d.prototype._redrawDotColorGraphPoint = function(ctx, point) {
* Draw single datapoint for graph style 'dot-size'.
*/
Graph3d.prototype._redrawDotSizeGraphPoint = function(ctx, point) {
- var dotSize = this._dotSize();
- var fraction = (point.point.value - this.valueRange.min) / this.valueRange.range();
- var size = dotSize/2 + 2*dotSize * fraction;
- var colors = this._getColorsSize();
+ var dotSize = this._dotSize();
+ var fraction = (point.point.value - this.valueRange.min) / this.valueRange.range();
+
+ var sizeMin = dotSize*this.dotSizeMinFraction;
+ var sizeRange = dotSize*this.dotSizeMaxFraction - sizeMin;
+ var size = sizeMin + sizeRange*fraction;
+
+ var colors = this._getColorsSize();
this._drawCircle(ctx, point, colors.fill, colors.border, size);
};
diff --git a/lib/graph3d/Settings.js b/lib/graph3d/Settings.js
index 484a40b0..b49ef7f3 100755
--- a/lib/graph3d/Settings.js
+++ b/lib/graph3d/Settings.js
@@ -63,6 +63,8 @@ var OPTIONKEYS = [
'keepAspectRatio',
'verticalRatio',
'dotSizeRatio',
+ 'dotSizeMinFraction',
+ 'dotSizeMaxFraction',
'showAnimationControls',
'animationInterval',
'animationPreload',