1M chart

<!DOCTYPE html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-html,
    .zc-body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

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

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

<body class="zc-body">
  <!-- CHART CONTAINER -->
  <div id="zc" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    window.addEventListener('load', () => {

      zingchart.DEV.SORTTOKENS = 0;
      zingchart.DEV.PLOTSTATS = 0;
      zingchart.DEV.RESOURCES = 0;
      zingchart.DEV.KEEPSOURCE = 0;
      zingchart.DEV.COPYDATA = 0;
      zingchart.DEV.MEDIARULES = 0;
      zingchart.SYNTAX = 'dashed';

      function chart_AngleTime() {

        console.time('a');

        var timeArray = [];
        var angle_arr = [];
        var angle = 180;
        for (var i = 0; i < 1000 * 1000; i++) {
          timeArray.push("L[" + i + "]");

          angle_arr.push(angle);
          angle += Math.round(-2 + 4 * Math.random());
          angle = Math.max(0, Math.min(360, angle));
        }

        var configTimeAndAngle = {
          "type": "line",
          legend: {
            layout: "1x1", //row x column // items means in one two we added two items as in legends
            x: "35%",
            y: "6%",
          },
          "preview": {
            "live": true
          },
          plot: {
            mode: 'fast',
          },
          'scale-x': {
            zooming: true,
            labels: timeArray,
            item: {
              'font-size': 10
            }
          },
          'scale-y': {
            'auto-fit': true,
            'min-value': 0,
            'max-value': 360,
            guide: {
              'line-style': "dotted"
            },
            item: {
              'font-size': 10
            }
          },
          'crosshair-x': {
            text: 'Time : %kt (X) Freq : %vt (Y).',
            'line-style': 'dashed',
            'line-width': 2,
            'line-color': '#2196F3',
            marker: {
              type: 'triangle',
              size: 5,
              visible: true
            }
          },
          gui: {
            behaviors: [{
                id: 'DownloadPDF',
                enabled: 'none'
              },
              {
                id: 'ViewDataTable',
                enabled: 'none'
              },
              {
                id: 'ViewSource',
                enabled: 'none'
              },
              {
                id: 'CrosshairHide',
                enabled: 'all'
              }
            ]
          },
          "series": [{
              "line-width": 1,
              "values": angle_arr,
              'line-color': "#3366ff",
              'background-color': "#3366ff",
              text: "Angle"
            }

          ]
        };

        console.timeEnd('a');

        zingchart.QUOTEDVALUES = true;

        //console.profile('zc');
        console.time('zc');
        zingchart.render({
          id: "zc",
          height: 500,
          width: 1000,
          output: "canvas",
          data: configTimeAndAngle,
          events: {
            load: function() {
              console.timeEnd('zc');
              //console.profileEnd('zc');
              /*
              window.setTimeout(() => {
                zingchart.exec('zc', 'disable', {text:'Wait!'});
                window.setTimeout(() => {
                  zingchart.exec('zc', 'enable', {});
                }, 2000);
              }, 2000);
              */
            }
          }
        });

      }

      chart_AngleTime();

    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body class="zc-body">
  <!-- CHART CONTAINER -->
  <div id="zc" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>
</body>

</html>

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

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

.zc-ref {
  display: none;
}

window.addEventListener('load', () => {

  zingchart.DEV.SORTTOKENS = 0;
  zingchart.DEV.PLOTSTATS = 0;
  zingchart.DEV.RESOURCES = 0;
  zingchart.DEV.KEEPSOURCE = 0;
  zingchart.DEV.COPYDATA = 0;
  zingchart.DEV.MEDIARULES = 0;
  zingchart.SYNTAX = 'dashed';

  function chart_AngleTime() {

    console.time('a');

    var timeArray = [];
    var angle_arr = [];
    var angle = 180;
    for (var i = 0; i < 1000 * 1000; i++) {
      timeArray.push("L[" + i + "]");

      angle_arr.push(angle);
      angle += Math.round(-2 + 4 * Math.random());
      angle = Math.max(0, Math.min(360, angle));
    }

    var configTimeAndAngle = {
      "type": "line",
      legend: {
        layout: "1x1", //row x column // items means in one two we added two items as in legends
        x: "35%",
        y: "6%",
      },
      "preview": {
        "live": true
      },
      plot: {
        mode: 'fast',
      },
      'scale-x': {
        zooming: true,
        labels: timeArray,
        item: {
          'font-size': 10
        }
      },
      'scale-y': {
        'auto-fit': true,
        'min-value': 0,
        'max-value': 360,
        guide: {
          'line-style': "dotted"
        },
        item: {
          'font-size': 10
        }
      },
      'crosshair-x': {
        text: 'Time : %kt (X) Freq : %vt (Y).',
        'line-style': 'dashed',
        'line-width': 2,
        'line-color': '#2196F3',
        marker: {
          type: 'triangle',
          size: 5,
          visible: true
        }
      },
      gui: {
        behaviors: [{
            id: 'DownloadPDF',
            enabled: 'none'
          },
          {
            id: 'ViewDataTable',
            enabled: 'none'
          },
          {
            id: 'ViewSource',
            enabled: 'none'
          },
          {
            id: 'CrosshairHide',
            enabled: 'all'
          }
        ]
      },
      "series": [{
          "line-width": 1,
          "values": angle_arr,
          'line-color': "#3366ff",
          'background-color': "#3366ff",
          text: "Angle"
        }

      ]
    };

    console.timeEnd('a');

    zingchart.QUOTEDVALUES = true;

    //console.profile('zc');
    console.time('zc');
    zingchart.render({
      id: "zc",
      height: 500,
      width: 1000,
      output: "canvas",
      data: configTimeAndAngle,
      events: {
        load: function() {
          console.timeEnd('zc');
          //console.profileEnd('zc');
          /*
          window.setTimeout(() => {
            zingchart.exec('zc', 'disable', {text:'Wait!'});
            window.setTimeout(() => {
              zingchart.exec('zc', 'enable', {});
            }, 2000);
          }, 2000);
          */
        }
      }
    });

  }

  chart_AngleTime();

});