Fix #1506 Grid not aligned with ticks

8 years ago · 0540f882b4
4 changed files with 95 additions and 15 deletions
--- a/htdocs/index.html
+++ b/htdocs/index.html
@ -233,15 +233,21 @@
                Show label on data with format
              </a>
            </div>
-            <div class="col-md-4">
-              <h3>Data Region</h3>
-              <a href="./samples/data_region.html">
-                Set region of data
-              </a>
-              <a href="./samples/data_region_timeseries.html">
-                Set region of timeseries data
-              </a>
-            </div>
+              <div class="col-md-4">
+                  <h3>Data Region</h3>
+                  <a href="./samples/data_region.html">
+                      Set region of data
+                  </a>
+                  <a href="./samples/data_region_timeseries.html">
+                      Set region of timeseries data
+                  </a>
+              </div>
+              <div class="col-md-4">
+                  <h3>Large dataset</h3>
+                  <a href="./samples/data_large_timeseries.html">
+                      Large timeseries data
+                  </a>
+              </div>
          </div>
        </div>
      </div>
--- a/htdocs/samples/data_large_timeseries.html
+++ b/htdocs/samples/data_large_timeseries.html
@ -0,0 +1,69 @@
+<html>
+<head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+<div id="chart"></div>
+
+<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
+<script src="https://cdn.rawgit.com/josephg/noisejs/master/perlin.js"></script>
+<script src="/js/c3.js"></script>
+<script>
+    var chart = c3.generate({
+        data: {
+            json: generate(),
+            keys: {
+                x: 'date',
+                value: ['value']
+            }
+        },
+        axis: {
+            x: {
+                type: 'timeseries',
+                tick: {
+                    format: '%Y-%m',
+                    count: 24,
+                    culling: false
+                }
+            }
+        },
+        subchart: {
+            show: true
+        },
+        zoom: {
+            enabled: true
+        },
+        grid: {
+            x: {
+                show: true,
+                ticks: 'auto'
+            },
+            y: {
+                show: true
+            }
+        }
+    });
+
+    function generate() {
+        noise.seed(Math.random());
+
+        var data = [];
+        var date = moment('2015-01-01');
+        var now = moment('2017-01-01');
+
+        while (date.isBefore(now)) {
+            data.push({
+                date: date.format('YYYY-MM-DD'),
+                value: Math.round(noise.perlin2(date.unix() / 1000000, date.unix() / 1000000) * 100)
+            });
+
+            date.add(1, 'day');
+        }
+
+        return data;
+    }
+
+</script>
+</body>
+</html>
--- a/src/config.js
+++ b/src/config.js
@ -121,7 +121,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
        axis_y_label: {},
        axis_y_tick_format: undefined,
        axis_y_tick_outer: true,
-        axis_y_tick_values: null,        
+        axis_y_tick_values: null,
        axis_y_tick_rotate: 0,
        axis_y_tick_count: undefined,
        axis_y_tick_time_value: undefined,
@ -144,6 +144,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
        // grid
        grid_x_show: false,
        grid_x_type: 'tick',
+        grid_x_ticks: 10,
        grid_x_lines: [],
        grid_y_show: false,
        // not used
--- a/src/grid.js
+++ b/src/grid.js
@ -29,7 +29,7 @@ c3_chart_internal_fn.initGridLines = function () {
 };
 c3_chart_internal_fn.updateXGrid = function (withoutUpdate) {
    var $$ = this, config = $$.config, d3 = $$.d3,
-        xgridData = $$.generateGridData(config.grid_x_type, $$.x),
+        xgridData = $$.generateGridData(config.grid_x_type, $$.x, config.grid_x_ticks),
        tickOffset = $$.isCategorized() ? $$.xAxis.tickOffset() : 0;

    $$.xgridAttr = config.axis_rotated ? {
@ -193,10 +193,9 @@ c3_chart_internal_fn.updateXgridFocus = function () {
        .attr("y1", config.axis_rotated ? -10 : 0)
        .attr("y2", config.axis_rotated ? -10 : $$.height);
 };
-c3_chart_internal_fn.generateGridData = function (type, scale) {
+c3_chart_internal_fn.generateGridData = function (type, scale, ticks) {
    var $$ = this,
-        gridData = [], xDomain, firstYear, lastYear, i,
-        tickNum = $$.main.select("." + CLASS.axisX).selectAll('.tick').size();
+        gridData = [], xDomain, firstYear, lastYear, i, tickNum;
    if (type === 'year') {
        xDomain = $$.getXDomain();
        firstYear = xDomain[0].getFullYear();
@ -204,8 +203,13 @@ c3_chart_internal_fn.generateGridData = function (type, scale) {
        for (i = firstYear; i <= lastYear; i++) {
            gridData.push(new Date(i + '-01-01 00:00:00'));
        }
+    } else if (ticks === 'auto') {
+        gridData = $$.main.select("." + CLASS.axisX).selectAll('.tick').data();
+    } else if (Array.isArray(ticks)) {
+        gridData = ticks;
    } else {
-        gridData = scale.ticks(10);
+        tickNum = $$.main.select("." + CLASS.axisX).selectAll('.tick').size();
+        gridData = scale.ticks(ticks || 10);
        if (gridData.length > tickNum) { // use only int
            gridData = gridData.filter(function (d) { return ("" + d).indexOf('.') < 0; });
        }