Bar Chart

<!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 {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    .chart--container {
      min-height: 150px;
      width: 100%;
      height: 100%;
    }

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

<body>
  <label for="timezone">Adjust UTC Offset</label>
  <input type="number" min="-12" max="14" value="9" id="timezone">
  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    window.addEventListener('load', function() {
      var origDates = [{
          "dateUTCString": "Tue Oct 21 2014 21:17:02 GMT+0000 (UTC)"
        },
        {
          "dateUTCString": "Tue Jun 10 2014 03:06:38 GMT+0000 (UTC)"
        },
        {
          "dateUTCString": "Tue Nov 04 2014 10:46:15 GMT+0000 (UTC)"
        },
        {
          "dateUTCString": "Sat May 17 2014 04:51:23 GMT+0000 (UTC)"
        },
        {
          "dateUTCString": "Fri Aug 07 2015 02:26:57 GMT+0000 (UTC)"
        },
        {
          "dateUTCString": "Mon Apr 13 2015 07:07:44 GMT+0000 (UTC)"
        },
        {
          "dateUTCString": "Mon May 19 2014 22:47:56 GMT+0000 (UTC)"
        },
        {
          "dateUTCString": "Sat Jun 13 2015 00:38:36 GMT+0000 (UTC)"
        },
        {
          "dateUTCString": "Sat Feb 07 2015 23:55:14 GMT+0000 (UTC)"
        },
        {
          "dateUTCString": "Thu May 15 2014 19:44:57 GMT+0000 (UTC)"
        }
      ];

      var newDates = [];
      for (var n = 0; n < origDates.length; n++) {
        var currentDate = new Date(origDates[n].dateUTCString); // Create a Date instance
        newDates.push(currentDate.getTime()); // getTime() for Unix time in ms
      }
      newDates.sort(); // Sort the dates chronologically

      var myConfig = {
        type: "bar",
        utc: true,
        timezone: 9,
        title: {
          text: 'UTC Offset (9)'
        },
        plot: {
          valueBox: {
            text: "%kt",
            color: "#555",
            fontWeight: "none"
          }
        },
        scaleX: {
          values: newDates,
          transform: {
            type: "date",
            all: "%m/%d/%y\n%h:%i:%s"
          }
        },
        series: [{
          values: [35, 42, 67, 89, 25, 34, 67, 85, 43, 34]
        }]
      };

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

      timezone.addEventListener('change', function(e) {
        let timezoneValue = e.target.value;
        console.log(timezoneValue)
        zingchart.exec('myChart', 'modify', {
          data: {
            timezone: timezoneValue,
            title: {
              text: `UTC Offset (${timezoneValue})`
            },
          }
        });
      });
    });
  </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>
  <label for="timezone">Adjust UTC Offset</label>
  <input type="number" min="-12" max="14" value="9" id="timezone">
  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
</body>

</html>

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

.chart--container {
  min-height: 150px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}

window.addEventListener('load', function() {
  var origDates = [{
      "dateUTCString": "Tue Oct 21 2014 21:17:02 GMT+0000 (UTC)"
    },
    {
      "dateUTCString": "Tue Jun 10 2014 03:06:38 GMT+0000 (UTC)"
    },
    {
      "dateUTCString": "Tue Nov 04 2014 10:46:15 GMT+0000 (UTC)"
    },
    {
      "dateUTCString": "Sat May 17 2014 04:51:23 GMT+0000 (UTC)"
    },
    {
      "dateUTCString": "Fri Aug 07 2015 02:26:57 GMT+0000 (UTC)"
    },
    {
      "dateUTCString": "Mon Apr 13 2015 07:07:44 GMT+0000 (UTC)"
    },
    {
      "dateUTCString": "Mon May 19 2014 22:47:56 GMT+0000 (UTC)"
    },
    {
      "dateUTCString": "Sat Jun 13 2015 00:38:36 GMT+0000 (UTC)"
    },
    {
      "dateUTCString": "Sat Feb 07 2015 23:55:14 GMT+0000 (UTC)"
    },
    {
      "dateUTCString": "Thu May 15 2014 19:44:57 GMT+0000 (UTC)"
    }
  ];

  var newDates = [];
  for (var n = 0; n < origDates.length; n++) {
    var currentDate = new Date(origDates[n].dateUTCString); // Create a Date instance
    newDates.push(currentDate.getTime()); // getTime() for Unix time in ms
  }
  newDates.sort(); // Sort the dates chronologically

  var myConfig = {
    type: "bar",
    utc: true,
    timezone: 9,
    title: {
      text: 'UTC Offset (9)'
    },
    plot: {
      valueBox: {
        text: "%kt",
        color: "#555",
        fontWeight: "none"
      }
    },
    scaleX: {
      values: newDates,
      transform: {
        type: "date",
        all: "%m/%d/%y\n%h:%i:%s"
      }
    },
    series: [{
      values: [35, 42, 67, 89, 25, 34, 67, 85, 43, 34]
    }]
  };

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

  timezone.addEventListener('change', function(e) {
    let timezoneValue = e.target.value;
    console.log(timezoneValue)
    zingchart.exec('myChart', 'modify', {
      data: {
        timezone: timezoneValue,
        title: {
          text: `UTC Offset (${timezoneValue})`
        },
      }
    });
  });
});