Add point draw methods for styles 'dot' and 'dot-line' (#2212)

lib/graph3d/Graph3d.js

@@ -817,21 +817,13 @@ Graph3d.prototype.setOptions = function (options) {
   }
 };
 
+
 /**
- * Redraw the Graph.
+ * Determine which point drawing method to use
  */
-Graph3d.prototype.redraw = function() {
-  if (this.dataPoints === undefined) {
-    throw new Error('Graph data not initialized');
-  }
-
-  this._resizeCanvas();
-  this._resizeCenter();
-  this._redrawSlider();
-  this._redrawClear();
-  this._redrawAxis();
-
+Graph3d.prototype.getPointDrawingMethod = function() {
   var pointDrawingMethod = undefined;
+
   switch (this.style) {
     case Graph3d.STYLE.BAR:
       pointDrawingMethod = Graph3d.prototype._redrawBarGraphPoint;
@@ -842,8 +834,34 @@ Graph3d.prototype.redraw = function() {
     case Graph3d.STYLE.BARSIZE:
       pointDrawingMethod = Graph3d.prototype._redrawBarSizeGraphPoint;
       break;
+    case Graph3d.STYLE.DOT:
+      pointDrawingMethod = Graph3d.prototype._redrawDotGraphPoint;
+      break;
+    case Graph3d.STYLE.DOT:
+      pointDrawingMethod = Graph3d.prototype._redrawDotLineGraphPoint;
+      break;
   }
 
+  return pointDrawingMethod;
+};
+
+
+/**
+ * Redraw the Graph.
+ */
+Graph3d.prototype.redraw = function() {
+  if (this.dataPoints === undefined) {
+    throw new Error('Graph data not initialized');
+  }
+
+  this._resizeCanvas();
+  this._resizeCenter();
+  this._redrawSlider();
+  this._redrawClear();
+  this._redrawAxis();
+
+  var pointDrawingMethod = this.getPointDrawingMethod();
+
   if (pointDrawingMethod !== undefined) {
     // Use generic drawing loop
     // Pass the method reference here
@@ -1581,7 +1599,7 @@ Graph3d.prototype._redrawDataDot = function() {
 
 
 // -----------------------------------------------------------------------------
-// Methods for drawing points per graph style.
+// Drawing primitives for the graphs
 // -----------------------------------------------------------------------------
 
 /**
@@ -1670,19 +1688,43 @@ Graph3d.prototype._redrawBar = function(ctx, point, xWidth, yWidth, color, borde
 };
 
 
+Graph3d.prototype._drawCircle = function(ctx, point, radius, color, borderColor) {
+  ctx.lineWidth   = this._getStrokeWidth(point);
+  ctx.strokeStyle = borderColor;
+  ctx.fillStyle   = color;
+  ctx.beginPath();
+  ctx.arc(point.screen.x, point.screen.y, radius, 0, Math.PI*2, true);
+  ctx.fill();
+  ctx.stroke();
+};
+
+
+Graph3d.prototype._getColorsRegular = function(ctx, point) {
+  // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
+  var hue         = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
+  var color       = this._hsv2rgb(hue, 1, 1);
+  var borderColor = this._hsv2rgb(hue, 1, 0.8);
+
+  return {
+    fill  : color,
+    border: borderColor
+  };
+};
+
+// -----------------------------------------------------------------------------
+// Methods for drawing points per graph style.
+// -----------------------------------------------------------------------------
+
+
 /**
  * Draw single datapoint for graph style 'bar'.
  */
 Graph3d.prototype._redrawBarGraphPoint = function(ctx, point) {
   var xWidth = this.xBarWidth / 2;
   var yWidth = this.yBarWidth / 2;
+  var colors = this._getColorsRegular(ctx, point);
 
-  // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-  var hue         = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
-  var color       = this._hsv2rgb(hue, 1, 1);
-  var borderColor = this._hsv2rgb(hue, 1, 0.8);
-
-  this._redrawBar(ctx, point, xWidth, yWidth, color, borderColor);
+  this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border);
 };
 
 
@@ -1711,7 +1753,6 @@ Graph3d.prototype._redrawBarSizeGraphPoint = function(ctx, point) {
   var xWidth   = (this.xBarWidth / 2) * (fraction * 0.8 + 0.2);
   var yWidth   = (this.yBarWidth / 2) * (fraction * 0.8 + 0.2);
 
-
   // determine color
   var color       = this.dataColor.fill;
   var borderColor = this.dataColor.stroke;
@@ -1720,6 +1761,42 @@ Graph3d.prototype._redrawBarSizeGraphPoint = function(ctx, point) {
 };
 
 
+/**
+ * Draw single datapoint for graph style 'dot'.
+ */
+Graph3d.prototype._redrawDotGraphPoint = function(ctx, point) {
+  var size = this._dotSize();
+
+  var radius;
+  if (this.showPerspective) {
+    radius = size / -point.trans.z;
+  }
+  else {
+    radius = size * -(this.eye.z / this.camera.getArmLength());
+  }
+  if (radius < 0) {
+    radius = 0;
+  }
+
+  var colors = this._getColorsRegular(ctx, point);
+
+  this._drawCircle(ctx, point, radius, colors.fill, colors.border);
+};
+
+
+/**
+ * Draw single datapoint for graph style 'dot-line'.
+ */
+Graph3d.prototype._redrawDotLineGraphPoint = function(ctx, point) {
+  // draw a vertical line from the XY-plane to the graph value
+  var from = this._convert3Dto2D(point.bottom);
+  ctx.lineWidth = 1;
+  this._line(ctx, from, point.screen, this.gridColor);
+
+  this._redrawDotGraphPoint(ctx, point);
+};
+
+
 /**
  * Draw all datapoints for currently selected graph style.
  *