zoom > timestamp

<!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></style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var myConfig = {
      type: "scatter",
      title: {
        text: 'Scatter With [x,y] Timestamp',
        adjustLayout: true
      },
      utc: true,
      plotarea: {
        margin: 'dynamic'
      },
      scaleY: {
        label: {
          text: "Sales"
        },
        format: '$%v',
      },
      scaleX: {
        label: {
          text: "time"
        },
        minValue: 1420070400000,
        step: 86400000,
        transform: {
          type: "date",
          all: "%h:%i:%s<br>%d %M, %Y",
          guide: {
            "visible": false
          },
          item: {
            "visible": false
          }
        }
      },
      tooltip: {
        text: '%t <br> Sales: $%v'
      },
      series: [{
          values: [
            [1420070400000, 35],
            [1420156800000, 42],
            [1420243200000, 67],
            [1420329600000, 89],
            [1420416000000, 25],
            [1420502400000, 50],
            [1420588800000, 75]
          ],
          text: 'Department 1'
        },
        {
          values: [
            [1420070400000, 135],
            [1420156800000, 142],
            [1420243200000, 167],
            [1420329600000, 189],
            [1420416000000, 125],
            [1420502400000, 150],
            [1420588800000, 175]
          ],
          text: 'Department 2'
        }
      ]
    };



    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: '100%'
    });
  </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'></div>
</body>

</html>

var myConfig = {
  type: "scatter",
  title: {
    text: 'Scatter With [x,y] Timestamp',
    adjustLayout: true
  },
  utc: true,
  plotarea: {
    margin: 'dynamic'
  },
  scaleY: {
    label: {
      text: "Sales"
    },
    format: '$%v',
  },
  scaleX: {
    label: {
      text: "time"
    },
    minValue: 1420070400000,
    step: 86400000,
    transform: {
      type: "date",
      all: "%h:%i:%s<br>%d %M, %Y",
      guide: {
        "visible": false
      },
      item: {
        "visible": false
      }
    }
  },
  tooltip: {
    text: '%t <br> Sales: $%v'
  },
  series: [{
      values: [
        [1420070400000, 35],
        [1420156800000, 42],
        [1420243200000, 67],
        [1420329600000, 89],
        [1420416000000, 25],
        [1420502400000, 50],
        [1420588800000, 75]
      ],
      text: 'Department 1'
    },
    {
      values: [
        [1420070400000, 135],
        [1420156800000, 142],
        [1420243200000, 167],
        [1420329600000, 189],
        [1420416000000, 125],
        [1420502400000, 150],
        [1420588800000, 175]
      ],
      text: 'Department 2'
    }
  ]
};



zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 400,
  width: '100%'
});