An error occurred while loading the file. Please try again.
zoomable-timeseries.html 2.10 KiB
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Zoomable TimeSeries</title>
  <link href="../../assets/styles.css" rel="stylesheet" />
  <style>
    #chart {
      max-width: 650px;
      margin: 35px auto;
  </style>
</head>
<body>
  <div id="chart">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
  <script src="../../assets/irregular-data-series.js"></script>
  <script>
    var ts2 = 1484418600000;
    var dates = [];
    var spikes = [5, -5, 3, -3, 8, -8]
    for (var i = 0; i < 120; i++) {
      ts2 = ts2 + 86400000;
      var innerArr = [ts2, dataSeries[1][i].value];
      dates.push(innerArr)
    var options = {
      chart: {
        type: 'area',
        stacked: false,
        height: 350,
        zoom: {
          type: 'x',
          enabled: true
        toolbar: {
          autoSelected: 'zoom'
      dataLabels: {
        enabled: false
      series: [{
        name: 'XYZ MOTORS',
        data: dates
      }],
      markers: {
        size: 0,
      title: {
        text: 'Stock Price Movement',
        align: 'left'
      fill: {
        type: 'gradient',
        gradient: {
shadeIntensity: 1, inverseColors: false, opacityFrom: 0.5, opacityTo: 0, stops: [0, 90, 100] }, }, yaxis: { min: 20000000, max: 250000000, labels: { formatter: function (val) { return (val / 1000000).toFixed(0); }, }, title: { text: 'Price' }, }, xaxis: { type: 'datetime', }, tooltip: { shared: false, y: { formatter: function (val) { return (val / 1000000).toFixed(0) } } } } var chart = new ApexCharts( document.querySelector("#chart"), options ); chart.render(); </script> </body> </html>