Fix axis.min/max/range for timeseries - #285

11 years ago · 97ae82425a
4 changed files with 96 additions and 38 deletions
--- a/c3.js
+++ b/c3.js
@ -5102,11 +5102,11 @@
        c3.axis.max = function (max) {
            if (arguments.length) {
                if (typeof max === 'object') {
-                    if (isValue(max.x)) { __axis_x_max = +max.x; }
-                    if (isValue(max.y)) { __axis_y_max = +max.y; }
-                    if (isValue(max.y2)) { __axis_y2_max = +max.y2; }
+                    if (isValue(max.x)) { __axis_x_max = max.x; }
+                    if (isValue(max.y)) { __axis_y_max = max.y; }
+                    if (isValue(max.y2)) { __axis_y2_max = max.y2; }
                } else {
-                    __axis_y_max = __axis_y2_max = +max;
+                    __axis_y_max = __axis_y2_max = max;
                }
                redraw({withUpdateOrgXDomain: true, withUpdateXDomain: true});
            }
@ -5114,11 +5114,11 @@
        c3.axis.min = function (min) {
            if (arguments.length) {
                if (typeof min === 'object') {
-                    if (isValue(min.x)) { __axis_x_min = +min.x; }
-                    if (isValue(min.y)) { __axis_y_min = +min.y; }
-                    if (isValue(min.y2)) { __axis_y2_min = +min.y2; }
+                    if (isValue(min.x)) { __axis_x_min = min.x; }
+                    if (isValue(min.y)) { __axis_y_min = min.y; }
+                    if (isValue(min.y2)) { __axis_y2_min = min.y2; }
                } else {
-                    __axis_y_min = __axis_y2_min = +min;
+                    __axis_y_min = __axis_y2_min = min;
                }
                redraw({withUpdateOrgXDomain: true, withUpdateXDomain: true});
            }
--- a/c3.min.js
+++ b/c3.min.js
--- a/htdocs/samples/axes_minmax.html
+++ b/htdocs/samples/axes_minmax.html
@ -1,29 +0,0 @@
-<html>
-  <head>
-    <link rel="stylesheet" type="text/css" href="/css/c3.css">
-  </head>
-  <body>
-    <div id="chart"></div>
-
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.js"></script>
-    <script>
-      var chart = c3.generate({
-        bindto: '#chart',
-        data: {
-          columns: [
-            ['sample', 100, 200, 100, 400, 150, 250]
-          ],
-          onclick: function (d, element) { console.log("onclick", d, element); },
-          onenter: function (d) { console.log("onenter", d); },
-          onleave: function (d) { console.log("onleave", d); },
-        },
-        axis: {
-          y: {
-              min: 0
-            }
-          },
-      });
-    </script>
-  </body>
-</html>
--- a/htdocs/samples/axes_range.html
+++ b/htdocs/samples/axes_range.html
@ -0,0 +1,87 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart1"></div>
+    <div id="chart2"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['sample', 100, 200, 100, 400, 150, 250]
+          ],
+        },
+        axis: {
+          x: {
+              min: -10,
+              max: 10,
+            }
+          },
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          x: 'x',
+          columns: [
+            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
+            ['sample', 100, 200, 100, 400, 150, 250]
+          ],
+        },
+        axis: {
+          x: {
+              type: 'timeseries',
+              min: new Date('2012-12-20'),
+              max: '2013-03-01',
+              tick : {
+                format : "%Y-%m-%d %H:%M:%S" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
+              }
+            }
+          }
+      });
+
+      setTimeout(function () {
+        chart1.axis.max({x: 20});
+      }, 1000);
+
+      setTimeout(function () {
+        chart1.axis.min({x: -5});
+      }, 2000);
+
+      setTimeout(function () {
+      chart1.axis.range({max: {x: 5}, min: {x: 0}});
+      }, 3000);
+
+      setTimeout(function () {
+        chart2.axis.max({x: new Date('2013-02-01')});
+      }, 1000);
+
+      setTimeout(function () {
+        chart2.axis.min({x: new Date('2012-12-01')});
+      }, 2000);
+
+      setTimeout(function () {
+      chart2.axis.range({max: {x: '2013-01-06'}, min: {x: '2013-01-01'}});
+      }, 3000);
+
+      setTimeout(function () {
+        chart2.axis.max({y: 1000});
+      }, 4000);
+
+      setTimeout(function () {
+        chart2.axis.min({y: -1000});
+      }, 5000);
+
+      setTimeout(function () {
+      chart2.axis.range({max: {y: 400}, min: {y: 0}});
+      }, 6000);
+
+    </script>
+  </body>
+</html>