• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .zc-html,
    10.     .zc-body {
    11.       margin: 0;
    12.       padding: 0;
    13.       width: 100%;
    14.       height: 100%;
    15.     }
    16.  
    17.     .chart--container {
    18.       height: 100%;
    19.       width: 100%;
    20.       min-height: 530px;
    21.     }
    22.  
    23.     .zc-ref {
    24.       display: none;
    25.     }
    26.   </style>
    27. </head>
    28.  
    29. <body class="zc-body">
    30.   <!-- CHART CONTAINER -->
    31.   <div id="zc" class="chart--container">
    32.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    33.   </div>
    34.   <script>
    35.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    36.     window.addEventListener('load', () => {
    37.  
    38.       zingchart.DEV.SORTTOKENS = 0;
    39.       zingchart.DEV.PLOTSTATS = 0;
    40.       zingchart.DEV.RESOURCES = 0;
    41.       zingchart.DEV.KEEPSOURCE = 0;
    42.       zingchart.DEV.COPYDATA = 0;
    43.       zingchart.DEV.MEDIARULES = 0;
    44.       zingchart.SYNTAX = 'dashed';
    45.  
    46.       function chart_AngleTime() {
    47.  
    48.         console.time('a');
    49.  
    50.         var timeArray = [];
    51.         var angle_arr = [];
    52.         var angle = 180;
    53.         for (var i = 0; i < 1000 * 1000; i++) {
    54.           timeArray.push("L[" + i + "]");
    55.  
    56.           angle_arr.push(angle);
    57.           angle += Math.round(-2 + 4 * Math.random());
    58.           angle = Math.max(0, Math.min(360, angle));
    59.         }
    60.  
    61.         var configTimeAndAngle = {
    62.           "type": "line",
    63.           legend: {
    64.             layout: "1x1", //row x column // items means in one two we added two items as in legends
    65.             x: "35%",
    66.             y: "6%",
    67.           },
    68.           "preview": {
    69.             "live": true
    70.           },
    71.           plot: {
    72.             mode: 'fast',
    73.           },
    74.           'scale-x': {
    75.             zooming: true,
    76.             labels: timeArray,
    77.             item: {
    78.               'font-size': 10
    79.             }
    80.           },
    81.           'scale-y': {
    82.             'auto-fit': true,
    83.             'min-value': 0,
    84.             'max-value': 360,
    85.             guide: {
    86.               'line-style': "dotted"
    87.             },
    88.             item: {
    89.               'font-size': 10
    90.             }
    91.           },
    92.           'crosshair-x': {
    93.             text: 'Time : %kt (X) Freq : %vt (Y).',
    94.             'line-style': 'dashed',
    95.             'line-width': 2,
    96.             'line-color': '#2196F3',
    97.             marker: {
    98.               type: 'triangle',
    99.               size: 5,
    100.               visible: true
    101.             }
    102.           },
    103.           gui: {
    104.             behaviors: [{
    105.                 id: 'DownloadPDF',
    106.                 enabled: 'none'
    107.               },
    108.               {
    109.                 id: 'ViewDataTable',
    110.                 enabled: 'none'
    111.               },
    112.               {
    113.                 id: 'ViewSource',
    114.                 enabled: 'none'
    115.               },
    116.               {
    117.                 id: 'CrosshairHide',
    118.                 enabled: 'all'
    119.               }
    120.             ]
    121.           },
    122.           "series": [{
    123.               "line-width": 1,
    124.               "values": angle_arr,
    125.               'line-color': "#3366ff",
    126.               'background-color': "#3366ff",
    127.               text: "Angle"
    128.             }
    129.  
    130.           ]
    131.         };
    132.  
    133.         console.timeEnd('a');
    134.  
    135.         zingchart.QUOTEDVALUES = true;
    136.  
    137.         //console.profile('zc');
    138.         console.time('zc');
    139.         zingchart.render({
    140.           id: "zc",
    141.           height: 500,
    142.           width: 1000,
    143.           output: "canvas",
    144.           data: configTimeAndAngle,
    145.           events: {
    146.             load: function() {
    147.               console.timeEnd('zc');
    148.               //console.profileEnd('zc');
    149.               /*
    150.               window.setTimeout(() => {
    151.                 zingchart.exec('zc', 'disable', {text:'Wait!'});
    152.                 window.setTimeout(() => {
    153.                   zingchart.exec('zc', 'enable', {});
    154.                 }, 2000);
    155.               }, 2000);
    156.               */
    157.             }
    158.           }
    159.         });
    160.  
    161.       }
    162.  
    163.       chart_AngleTime();
    164.  
    165.     });
    166.   </script>
    167. </body>
    168.  
    169. </html>
    1. <!DOCTYPE html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body class="zc-body">
    11.   <!-- CHART CONTAINER -->
    12.   <div id="zc" class="chart--container">
    13.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    14.   </div>
    15. </body>
    16.  
    17. </html>
    1. .zc-html,
    2. .zc-body {
    3.   margin: 0;
    4.   padding: 0;
    5.   width: 100%;
    6.   height: 100%;
    7. }
    8.  
    9. .chart--container {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 530px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. window.addEventListener('load', () => {
    2.  
    3.   zingchart.DEV.SORTTOKENS = 0;
    4.   zingchart.DEV.PLOTSTATS = 0;
    5.   zingchart.DEV.RESOURCES = 0;
    6.   zingchart.DEV.KEEPSOURCE = 0;
    7.   zingchart.DEV.COPYDATA = 0;
    8.   zingchart.DEV.MEDIARULES = 0;
    9.   zingchart.SYNTAX = 'dashed';
    10.  
    11.   function chart_AngleTime() {
    12.  
    13.     console.time('a');
    14.  
    15.     var timeArray = [];
    16.     var angle_arr = [];
    17.     var angle = 180;
    18.     for (var i = 0; i < 1000 * 1000; i++) {
    19.       timeArray.push("L[" + i + "]");
    20.  
    21.       angle_arr.push(angle);
    22.       angle += Math.round(-2 + 4 * Math.random());
    23.       angle = Math.max(0, Math.min(360, angle));
    24.     }
    25.  
    26.     var configTimeAndAngle = {
    27.       "type": "line",
    28.       legend: {
    29.         layout: "1x1", //row x column // items means in one two we added two items as in legends
    30.         x: "35%",
    31.         y: "6%",
    32.       },
    33.       "preview": {
    34.         "live": true
    35.       },
    36.       plot: {
    37.         mode: 'fast',
    38.       },
    39.       'scale-x': {
    40.         zooming: true,
    41.         labels: timeArray,
    42.         item: {
    43.           'font-size': 10
    44.         }
    45.       },
    46.       'scale-y': {
    47.         'auto-fit': true,
    48.         'min-value': 0,
    49.         'max-value': 360,
    50.         guide: {
    51.           'line-style': "dotted"
    52.         },
    53.         item: {
    54.           'font-size': 10
    55.         }
    56.       },
    57.       'crosshair-x': {
    58.         text: 'Time : %kt (X) Freq : %vt (Y).',
    59.         'line-style': 'dashed',
    60.         'line-width': 2,
    61.         'line-color': '#2196F3',
    62.         marker: {
    63.           type: 'triangle',
    64.           size: 5,
    65.           visible: true
    66.         }
    67.       },
    68.       gui: {
    69.         behaviors: [{
    70.             id: 'DownloadPDF',
    71.             enabled: 'none'
    72.           },
    73.           {
    74.             id: 'ViewDataTable',
    75.             enabled: 'none'
    76.           },
    77.           {
    78.             id: 'ViewSource',
    79.             enabled: 'none'
    80.           },
    81.           {
    82.             id: 'CrosshairHide',
    83.             enabled: 'all'
    84.           }
    85.         ]
    86.       },
    87.       "series": [{
    88.           "line-width": 1,
    89.           "values": angle_arr,
    90.           'line-color': "#3366ff",
    91.           'background-color': "#3366ff",
    92.           text: "Angle"
    93.         }
    94.  
    95.       ]
    96.     };
    97.  
    98.     console.timeEnd('a');
    99.  
    100.     zingchart.QUOTEDVALUES = true;
    101.  
    102.     //console.profile('zc');
    103.     console.time('zc');
    104.     zingchart.render({
    105.       id: "zc",
    106.       height: 500,
    107.       width: 1000,
    108.       output: "canvas",
    109.       data: configTimeAndAngle,
    110.       events: {
    111.         load: function() {
    112.           console.timeEnd('zc');
    113.           //console.profileEnd('zc');
    114.           /*
    115.           window.setTimeout(() => {
    116.             zingchart.exec('zc', 'disable', {text:'Wait!'});
    117.             window.setTimeout(() => {
    118.               zingchart.exec('zc', 'enable', {});
    119.             }, 2000);
    120.           }, 2000);
    121.           */
    122.         }
    123.       }
    124.     });
    125.  
    126.   }
    127.  
    128.   chart_AngleTime();
    129.  
    130. });