Removed transition from legend and story label

adhoc/adhoc_playground.html

@@ -10,22 +10,42 @@
     <script type="text/javascript">
         var svg = dimple.newSvg("#chartContainer", 590, 400);
         d3.tsv("/data/example_data.tsv", function (data) {
+
+            // Filter the data for a single channel
+            data = dimple.filterData(data, "Channel", "Hypermarkets");
+
+            // Create the chart
             var myChart = new dimple.chart(svg, data);
-            myChart.setBounds(50, 40, 500, 310)
-            //var x = myChart.addMeasureAxis("x", "Distribution");
-            //var y = myChart.addCategoryAxis("y", "Price Tier");
-            var p = myChart.addMeasureAxis("p", "Unit Sales");
-            var z = myChart.addMeasureAxis("z", "Sales Value");
-            var s = myChart.addSeries(["Channel"], dimple.plot.pie);
-            var s2 = myChart.addSeries(["Price Tier"], dimple.plot.pie);
-            var s3 = myChart.addSeries(["Pack Size"], dimple.plot.pie);
-            s.innerRadius = "75%";
-            s2.outerRadius = "70%";
-            s2.innerRadius = "45%";
-            s3.outerRadius = "40%";
-            myChart.addLegend(30, 10, 500, 35, "right");
+            myChart.setBounds(60, 30, 470, 300)
+
+            // Add an x and 2 y-axes.  When using multiple axes it's
+            // important to assign them to variables to pass to the series
+            var x = myChart.addCategoryAxis("x", "Brand");
+            var y1 = myChart.addMeasureAxis("y", "Price");
+            var y2 = myChart.addMeasureAxis("y", "Sales Value");
+
+            // Order the x axis by sales value desc
+            x.addOrderRule("Sales Value", true);
+
+            // Color the sales bars to be highly transparent
+            myChart.assignColor("Sales", "#222222", "#000000", 0.1);
+
+            // Add the bars mapped to the second y axis
+            myChart.addSeries("Sales", dimple.plot.bar, [x, y2]);
+
+            // Add series for minimum, average and maximum price
+            var min = myChart.addSeries("Min", dimple.plot.bubble, [x, y1]);
+            min.aggregate = dimple.aggregateMethod.min;
+            var avg = myChart.addSeries("Avg", dimple.plot.bubble, [x, y1]);
+            avg.aggregate = dimple.aggregateMethod.avg;
+            var max = myChart.addSeries("Max", dimple.plot.bubble, [x, y1]);
+            max.aggregate = dimple.aggregateMethod.max;
+
+            // Animate the chart for every date value, any dimension can be passed
+            // here and dimple will animate over its values.
             myChart.setStoryboard("Date");
-            myChart.draw(2000);
+
+            myChart.draw();
         });
     </script>
 </div>

src/objects/chart/methods/draw.js

@@ -4,7 +4,7 @@
         // Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-draw
         this.draw = function (duration, noDataChange) {
             // Deal with optional parameter
-            duration = (duration === null || duration === undefined ? 0 : duration);
+            duration = duration || 0;
             // Catch the first x and y
             var firstX = null,
                 firstY = null,
@@ -398,11 +398,11 @@
 
             // Iterate the legends
             this.legends.forEach(function (legend) {
-                legend._draw(duration);
+                legend._draw();
             }, this);
 
             // If the chart has a storyboard
-            if (this.storyboard !== null && this.storyboard !== undefined) {
+            if (this.storyboard) {
                 this.storyboard._drawText();
                 if (this.storyboard.autoplay) {
                     this.storyboard.startAnimation();

src/objects/legend/methods/_draw.js

@@ -2,7 +2,7 @@
         // License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
         // Source: /src/objects/legend/methods/_draw.js
         // Render the legend
-        this._draw = function (duration) {
+        this._draw = function () {
 
             // Create an array of distinct color elements from the series
             var legendArray = this._getEntries(),
@@ -15,13 +15,9 @@
                 self = this,
                 theseShapes;
 
-            // If there is already a legend, fade to transparent and remove
-            if (this.shapes !== null && this.shapes !== undefined) {
-                this.shapes
-                    .transition()
-                    .duration(duration * 0.2)
-                    .attr("opacity", 0)
-                    .remove();
+            // If there is already a legend remove it
+            if (this.shapes) {
+                this.shapes.remove();
             }
 
             // Create an empty hidden group for every legend entry
@@ -35,7 +31,7 @@
                 .attr("class", function (d) {
                     return "dimple-legend " + dimple._createClass(d.aggField);
                 })
-                .attr("opacity", 0);
+                .attr("opacity", 1);
 
             // Add text into the group
             theseShapes.append("text")
@@ -110,13 +106,6 @@
                     }
                 });
 
-            // Fade in the shapes if this is transitioning
-            theseShapes
-                .transition()
-                .delay(duration * 0.2)
-                .duration(duration * 0.8)
-                .attr("opacity", 1);
-
             // Assign them to the public property for modification by the user.
             this.shapes = theseShapes;
         };

src/objects/storyboard/methods/_drawText.js

@@ -1,8 +1,8 @@
         // Copyright: 2014 PMSI-AlignAlytics
         // License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
         // Source: /src/objects/storyboard/methods/drawText.js
-        this._drawText = function (duration) {
-            if (this.storyLabel === null || this.storyLabel === undefined) {
+        this._drawText = function () {
+            if (!this.storyLabel) {
                 var chart = this.chart,
                     self = this,
                     xCount = 0;
@@ -13,6 +13,8 @@
                     }
                 }, this);
                 this.storyLabel = this.chart._group.append("text")
+                    .attr("class", "dimple-storyboard-label")
+                    .attr("opacity", 1)
                     .attr("x", this.chart._xPixels() + this.chart._widthPixels() * 0.01)
                     .attr("y", this.chart._yPixels() + (this.chart._heightPixels() / 35 > 10 ? this.chart._heightPixels() / 35 : 10) * (xCount > 1 ? 1.25 : -1))
                     .call(function () {
@@ -23,15 +25,6 @@
                     });
             }
             this.storyLabel
-                .transition().duration(duration * 0.2)
-                .ease(this.chart.ease)
-                .attr("opacity", 0);
-            this.storyLabel
-                .transition().delay(duration * 0.2)
-                .ease(this.chart.ease)
-                .attr("class", "dimple-storyboard-label")
-                .text(this.categoryFields.join("\\") + ": " + this.getFrameValue())
-                .transition().duration(duration * 0.8)
-                .attr("opacity", 1);
+                .text(this.categoryFields.join("\\") + ": " + this.getFrameValue());
         };