new preview scale layout

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var cfg = {
      globals: {
        fontFamily: 'Lucida Sans Unicode'
      },
      type: 'line',
      plotarea: {
        adjustLayout: true
      },
      crosshairX: {
        singleLine: true
      },
      scaleX: {
        zooming: true,
        transform: {
          type: 'date',
          item: {
            visible: true
          }
        }
      },
      scaleY: {
        autoFit: true
      },
      series: [],
      legend: {
        layout: 'float',
        adjustLayout: true,
        margin: '20 auto 0 auto',
        toggleAction: 'remove'
      },
      preview: {
        _width: 300,
        height: 40,
        adjustLayout: true,
        borderWidth: 1,
        borderColor: '#369',
        label: {
          _color: '#900',
          _lineWidth: 1,
          _lineColor: '#090'
        },
        handle: {
          borderWidth: 0,
          lineWidth: 0,
          backgroundColor: '#369',
          width: 10,
          height: '100%',
          label: {
            _fontSize: 11,
            _color: '#000',
            _fontWeight: 'bold'
          }
        },
        active: {
          backgroundColor: 'transparent',
          alpha: 1
        }
      }
    };

    var nodes = 10000;
    var interval = 1000 * 60 * 1;
    var ts = new Date().getTime() + 13500 * interval;

    function dset(offset) {
      var d = [];
      var k, v;
      for (var i = 0; i < nodes; i++) {
        if (i === 0) {
          k = ts + offset;
          v = ZC._i_(ZC._r_(400, 600));
        } else {
          k += ZC._i_(ZC._r_(interval, 10 * interval));
          v += ZC._i_(ZC._r_(-10, 10));
        }
        d.push([k, v]);
        //d.push(v);
      }
      return d;
    }

    cfg.series.push({
      values: dset(0)
    });
    cfg.series.push({
      values: dset(0)
    });

    zingchart.render({
      id: 'myChart',
      width: '100%',
      height: '100%',
      output: 'svg',
      data: cfg
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>

</html>

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#myChart {
  height: 100%;
  width: 100%;
  min-height: 150px;
}

.zc-ref {
  display: none;
}

var cfg = {
  globals: {
    fontFamily: 'Lucida Sans Unicode'
  },
  type: 'line',
  plotarea: {
    adjustLayout: true
  },
  crosshairX: {
    singleLine: true
  },
  scaleX: {
    zooming: true,
    transform: {
      type: 'date',
      item: {
        visible: true
      }
    }
  },
  scaleY: {
    autoFit: true
  },
  series: [],
  legend: {
    layout: 'float',
    adjustLayout: true,
    margin: '20 auto 0 auto',
    toggleAction: 'remove'
  },
  preview: {
    _width: 300,
    height: 40,
    adjustLayout: true,
    borderWidth: 1,
    borderColor: '#369',
    label: {
      _color: '#900',
      _lineWidth: 1,
      _lineColor: '#090'
    },
    handle: {
      borderWidth: 0,
      lineWidth: 0,
      backgroundColor: '#369',
      width: 10,
      height: '100%',
      label: {
        _fontSize: 11,
        _color: '#000',
        _fontWeight: 'bold'
      }
    },
    active: {
      backgroundColor: 'transparent',
      alpha: 1
    }
  }
};

var nodes = 10000;
var interval = 1000 * 60 * 1;
var ts = new Date().getTime() + 13500 * interval;

function dset(offset) {
  var d = [];
  var k, v;
  for (var i = 0; i < nodes; i++) {
    if (i === 0) {
      k = ts + offset;
      v = ZC._i_(ZC._r_(400, 600));
    } else {
      k += ZC._i_(ZC._r_(interval, 10 * interval));
      v += ZC._i_(ZC._r_(-10, 10));
    }
    d.push([k, v]);
    //d.push(v);
  }
  return d;
}

cfg.series.push({
  values: dset(0)
});
cfg.series.push({
  values: dset(0)
});

zingchart.render({
  id: 'myChart',
  width: '100%',
  height: '100%',
  output: 'svg',
  data: cfg
});