Add animation to bar chart

pierresh · Dec 29, 2017 · 6fd2a24 · 6fd2a24
1 parent ea322e5
commit 6fd2a24
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 6 deletions.
diff --git a/lib/morris.bar.coffee b/lib/morris.bar.coffee
@@ -318,10 +318,22 @@ class Morris.Bar extends Morris.Grid
 
   drawBar: (xPos, yPos, width, height, barColor, opacity, radiusArray) ->
     maxRadius = Math.max(radiusArray...)
-    if maxRadius == 0 or maxRadius > height
-      path = @raphael.rect(xPos, yPos, width, height)
+    if @options.animate
+      if @options.horizontal
+        if maxRadius == 0 or maxRadius > height
+          path = @raphael.rect(xPos, yPos, 0, height).animate({x:xPos,width:width}, 500)
+        else
+          path = @raphael.path @roundedRect(xPos, yPos+height, width, 0, radiusArray).animate({y: yPos, height: height}, 500)
+      else
+        if maxRadius == 0 or maxRadius > height
+          path = @raphael.rect(xPos, yPos+height, width, 0).animate({y:yPos, height:height}, 500)
+        else
+          path = @raphael.path @roundedRect(xPos, yPos+height, width, 0, radiusArray).animate({y: yPos, height: height}, 500)
     else
-      path = @raphael.path @roundedRect(xPos, yPos, width, height, radiusArray)
+      if maxRadius == 0 or maxRadius > height
+        path = @raphael.rect(xPos, yPos, width, height)
+      else
+        path = @raphael.path @roundedRect(xPos, yPos, width, height, radiusArray)
     path
       .attr('fill', barColor)
       .attr('fill-opacity', opacity)

diff --git a/morris.js b/morris.js
@@ -2024,10 +2024,38 @@ Licensed under the BSD-2-Clause License.
     Bar.prototype.drawBar = function(xPos, yPos, width, height, barColor, opacity, radiusArray) {
       var maxRadius, path;
       maxRadius = Math.max.apply(Math, radiusArray);
-      if (maxRadius === 0 || maxRadius > height) {
-        path = this.raphael.rect(xPos, yPos, width, height);
+      if (this.options.animate) {
+        if (this.options.horizontal) {
+          if (maxRadius === 0 || maxRadius > height) {
+            path = this.raphael.rect(xPos, yPos, 0, height).animate({
+              x: xPos,
+              width: width
+            }, 500);
+          } else {
+            path = this.raphael.path(this.roundedRect(xPos, yPos + height, width, 0, radiusArray).animate({
+              y: yPos,
+              height: height
+            }, 500));
+          }
+        } else {
+          if (maxRadius === 0 || maxRadius > height) {
+            path = this.raphael.rect(xPos, yPos + height, width, 0).animate({
+              y: yPos,
+              height: height
+            }, 500);
+          } else {
+            path = this.raphael.path(this.roundedRect(xPos, yPos + height, width, 0, radiusArray).animate({
+              y: yPos,
+              height: height
+            }, 500));
+          }
+        }
       } else {
-        path = this.raphael.path(this.roundedRect(xPos, yPos, width, height, radiusArray));
+        if (maxRadius === 0 || maxRadius > height) {
+          path = this.raphael.rect(xPos, yPos, width, height);
+        } else {
+          path = this.raphael.path(this.roundedRect(xPos, yPos, width, height, radiusArray));
+        }
       }
       return path.attr('fill', barColor).attr('fill-opacity', opacity).attr('stroke', 'none');
     };