Add axis.x.extent option instead of axis.x.default - #512

10 years ago · d9c280a587
7 changed files with 90 additions and 8 deletions
--- a/c3.js
+++ b/c3.js
@ -253,7 +253,7 @@
            .on("dblclick.zoom", null);

        // Set default extent if defined
-        if (config.axis_x_default) { $$.brush.extent($$.getDefaultExtent()); }
+        if (config.axis_x_extent) { $$.brush.extent($$.getDefaultExtent()); }

        // Add Axis
        $$.initAxis();
@ -956,7 +956,7 @@
            axis_x_min: undefined,
            axis_x_padding: {},
            axis_x_height: undefined,
-            axis_x_default: undefined,
+            axis_x_extent: undefined,
            axis_x_label: {},
            axis_y_show: true,
            axis_y_max: undefined,
@ -4935,7 +4935,7 @@
    };
    c3_chart_internal_fn.getDefaultExtent = function () {
        var $$ = this, config = $$.config,
-            extent = isFunction(config.axis_x_default) ? config.axis_x_default($$.getXDomain($$.data.targets)) : config.axis_x_default;
+            extent = isFunction(config.axis_x_extent) ? config.axis_x_extent($$.getXDomain($$.data.targets)) : config.axis_x_extent;
        if ($$.isTimeSeries()) {
            extent = [$$.parseDate(extent[0]), $$.parseDate(extent[1])];
        }
--- a/c3.min.js
+++ b/c3.min.js
--- a/htdocs/index.html
+++ b/htdocs/index.html
@ -172,6 +172,12 @@
                Update y domain automatically
              </a>
            </div>
+            <div class="col-md-4">
+              <h3>Default X Extent</h3>
+              <a href="./samples/axes_x_extent.html">
+                Set default x extent
+              </a>
+            </div>
          </div>
        </div>
      </div>
--- a/htdocs/samples/axes_x_extent.html
+++ b/htdocs/samples/axes_x_extent.html
@ -0,0 +1,76 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart1"></div>
+    <div id="chart2"></div>
+    <div id="chart3"></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: [
+            ['data1', 100, 200, 50, 300, 400, 290],
+            ['data2', 10, 20, 50, 30, 10, 100],
+          ],
+        },
+        axis: {
+          x: {
+            extent: [2, 4.5]
+          }
+        },
+        subchart: {
+          show: true
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          x: 'x',
+          columns: [
+            ['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', '2014-06-01'],
+            ['data1', 100, 200, 50, 300, 400, 290],
+            ['data2', 10, 20, 50, 30, 10, 100],
+          ],
+        },
+        axis: {
+          x: {
+            type: 'timeseries',
+            extent: ['2014-03-01', '2014-04-20']
+          }
+        },
+        subchart: {
+          show: true
+        }
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: [
+            ['data1', 100, 200, 50, 300, 400, 290],
+            ['data2', 10, 20, 50, 30, 10, 100],
+          ],
+        },
+        axis: {
+          x: {
+            extent: [1, 4.2]
+          }
+        },
+        zoom: {
+          enabled: true
+        },
+        subchart: {
+          show: true
+        }
+      });
+
+    </script>
+  </body>
+</html>
--- a/src/config.js
+++ b/src/config.js
@ -92,7 +92,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
        axis_x_min: undefined,
        axis_x_padding: {},
        axis_x_height: undefined,
-        axis_x_default: undefined,
+        axis_x_extent: undefined,
        axis_x_label: {},
        axis_y_show: true,
        axis_y_max: undefined,
--- a/src/core.js
+++ b/src/core.js
@ -248,7 +248,7 @@ c3_chart_internal_fn.initWithData = function (data) {
        .on("dblclick.zoom", null);

    // Set default extent if defined
-    if (config.axis_x_default) { $$.brush.extent($$.getDefaultExtent()); }
+    if (config.axis_x_extent) { $$.brush.extent($$.getDefaultExtent()); }

    // Add Axis
    $$.initAxis();
--- a/src/subchart.js
+++ b/src/subchart.js
@ -183,7 +183,7 @@ c3_chart_internal_fn.transformContext = function (withTransition, transitions) {
 };
 c3_chart_internal_fn.getDefaultExtent = function () {
    var $$ = this, config = $$.config,
-        extent = isFunction(config.axis_x_default) ? config.axis_x_default($$.getXDomain($$.data.targets)) : config.axis_x_default;
+        extent = isFunction(config.axis_x_extent) ? config.axis_x_extent($$.getXDomain($$.data.targets)) : config.axis_x_extent;
    if ($$.isTimeSeries()) {
        extent = [$$.parseDate(extent[0]), $$.parseDate(extent[1])];
    }