Fix flow API when x axis padding exists

c3.js

@@ -1316,6 +1316,7 @@
                 x.domain(domain ? domain : brush.empty() ? orgXDomain : brush.extent());
                 if (__zoom_enabled) { zoom.scale(x).updateScaleExtent(); }
             }
+            return x.domain();
         }
         function diffDomain(d) {
             return d[1] - d[0];
@@ -4016,7 +4017,7 @@
                     flowLength = options.flow.length,
                     flowStart = getValueOnIndex(c3.data.targets[0].values, flowIndex),
                     flowEnd = getValueOnIndex(c3.data.targets[0].values, flowIndex + flowLength),
-                    orgDomain = x.domain(),
+                    orgDomain = x.domain(), domain,
                     durationForFlow = options.flow.duration || duration,
                     onend = options.flow.onend || function () {},
                     wait = generateWait();
@@ -4027,26 +4028,30 @@
                 });
 
                 // update x domain to generate axis elements for flow
-                updateXDomain(targetsToShow, true, true);
+                domain = updateXDomain(targetsToShow, true, true);
                 // update elements related to x scale
                 if (flushXGrid) { flushXGrid(true); }
 
                 // generate transform to flow
                 if (!options.flow.orgDataCount) { // if empty
-                    if (isTimeSeries || c3.data.targets[0].values.length !== 1) {
+                    if (isTimeSeries) {
                         flowStart = getValueOnIndex(c3.data.targets[0].values, 0);
                         flowEnd = getValueOnIndex(c3.data.targets[0].values, c3.data.targets[0].values.length - 1);
                         translateX = x(flowStart.x) - x(flowEnd.x);
                     } else {
-                        translateX = x(-0.5) - x(0);
+                        if (c3.data.targets[0].values.length !== 1) {
+                            translateX = (domain[0] - orgDomain[0] >= 1 ? x(orgDomain[0]) : 0) - x(flowEnd.x);
+                        } else {
+                            translateX = diffDomain(domain) / 2;
+                        }
                     }
                 } else if (options.flow.orgDataCount === 1 || flowStart.x === flowEnd.x) {
-                    translateX = x(orgDomain[0]) - x(flowEnd.x);
+                    translateX = x(orgDomain[0]) - x(domain[0]);
                 } else {
                     // TODO: fix 0.9, I don't know why 0.9..
                     translateX = (x(flowStart.x) - x(flowEnd.x)) * (isTimeSeries ? 0.9 : 1);
                 }
-                scaleX = (diffDomain(orgDomain) / diffDomain(x.domain()));
+                scaleX = (diffDomain(orgDomain) / diffDomain(domain));
                 transform = 'translate(' + translateX + ',0) scale(' + scaleX + ',1)';
 
                 d3.transition().ease('linear').duration(durationForFlow).each(function () {

htdocs/samples/api_flow.html

@@ -32,10 +32,12 @@
         },
         axis: {
           x: {
+/*
             padding: {
               left: 0,
               right: 0,
             }
+*/
           },
           y: {
 /*
@@ -66,11 +68,12 @@
         // Load only one data
         chart.flow({
           columns: [
-            ['data1', 500],
-            ['data2', 100],
-            ['data3', 200],
+            ['data1', 500, 200, 100],
+            ['data2', 100, null, 50],
+            ['data3', 200, null, null],
           ],
           duration: 1500,
+
           onend: function () {
             // Load 2 data without data2 and remove 1 data
             chart.flow({
@@ -78,10 +81,10 @@
                 ['data1', 200, 300],
                 ['data3', 100, 100]
               ],
-              length: 1,
+              length: 0,
               duration: 1500,
-              onend: function () {
 
+              onend: function () {
                 chart.flow({
                   columns: [
                     ['data1', 200, 300],
@@ -104,10 +107,11 @@
                   }
 
                 });
+              }// onend
 
-              }
             });
           },
+
         });
       }, 1000);
 
@@ -120,7 +124,7 @@
           ],
           length: 0
         });
-      }, 8000);
+      }, 9000);
 
       setTimeout(function () {
         chart.flow({
@@ -131,7 +135,7 @@
           ],
           length: 2
         });
-      }, 9000);
+      }, 10000);
 
       setTimeout(function () {
         chart.flow({
@@ -142,7 +146,7 @@
           ],
           to: 2,
         });
-      }, 10000);
+      }, 11000);
 
       setTimeout(function () {
         chart.flow({
@@ -152,11 +156,11 @@
             ['data3', 300]
           ]
         });
-      }, 11000);
+      }, 12000);
 
       setTimeout(function () {
         chart = generate();
-      }, 12000);
+      }, 13000);
 
       setTimeout(function () {
         chart.flow({
@@ -177,7 +181,7 @@
             });
           },
         });
-      }, 13000);
+      }, 14000);
 
       setTimeout(function () {
         chart.flow({
@@ -188,7 +192,7 @@
           ],
           to: 1,
         });
-      }, 16000);
+      }, 17000);
 
       setTimeout(function () {
         chart.flow({
@@ -198,7 +202,7 @@
             ['data3', 400]
           ]
         });
-      }, 17000);
+      }, 18000);
 
     </script>
   </body>

htdocs/samples/api_flow_timeseries.html

@@ -36,10 +36,12 @@
             tick: {
               format: '%m/%d',
             },
+/*
             padding: {
               left: 0,
               right: 0
             }
+*/
           },
           y: {
 /*
@@ -67,6 +69,7 @@
             ['data1', 500],
             ['data3', 200],
           ],
+          duration: 1500
         });
       }, 1000);
 
@@ -79,8 +82,9 @@
             ['data3', 100, 200, 50]
           ],
           length: 1,
+          duration: 1500
         });
-      }, 2000);
+      }, 4000);
 
       setTimeout(function () {
         chart.flow({
@@ -90,9 +94,10 @@
             ['data2', 300, 400],
             ['data3', 400, 200]
           ],
-          to: '2013-02-15'
+          to: '2013-02-15',
+          duration: 1500
         });
-      }, 3000);
+      }, 7000);
 
       setTimeout(function () {
         chart.flow({
@@ -102,13 +107,15 @@
             ['data2', 300, 400],
             ['data3', 400, 200]
           ],
-          length: 0
+          length: 0,
+          duration: 1500
         });
-      }, 4000);
+      }, 10000);
 
+/*
       setTimeout(function () {
         chart = generate();
-      }, 6000);
+      }, 14000);
 
       setTimeout(function () {
         chart.flow({
@@ -117,8 +124,9 @@
             ['data1', 500, 300],
             ['data3', 200, 150],
           ],
+          duration: 1500
         });
-      }, 7000);
+      }, 15000);
 
       setTimeout(function () {
         chart.flow({
@@ -129,8 +137,9 @@
             ['data3', 100]
           ],
           length: 0,
+          duration: 1500
         });
-      }, 8000);
+      }, 18000);
 
       setTimeout(function () {
         chart.flow({
@@ -139,10 +148,11 @@
             ['data1', 200],
             ['data2', 300],
             ['data3', 400]
-          ]
+          ],
+          duration: 1500
         });
-      }, 9000);
-
+      }, 21000);
+*/
     </script>
   </body>
 </html>