• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     var cfg = {
    35.       globals: {
    36.         fontFamily: 'Lucida Sans Unicode'
    37.       },
    38.       type: 'line',
    39.       plotarea: {
    40.         adjustLayout: true
    41.       },
    42.       crosshairX: {
    43.         singleLine: true
    44.       },
    45.       scaleX: {
    46.         zooming: true,
    47.         transform: {
    48.           type: 'date',
    49.           item: {
    50.             visible: true
    51.           }
    52.         }
    53.       },
    54.       scaleY: {
    55.         autoFit: true
    56.       },
    57.       series: [],
    58.       legend: {
    59.         layout: 'float',
    60.         adjustLayout: true,
    61.         margin: '20 auto 0 auto',
    62.         toggleAction: 'remove'
    63.       },
    64.       preview: {
    65.         _width: 300,
    66.         height: 40,
    67.         adjustLayout: true,
    68.         borderWidth: 1,
    69.         borderColor: '#369',
    70.         label: {
    71.           _color: '#900',
    72.           _lineWidth: 1,
    73.           _lineColor: '#090'
    74.         },
    75.         handle: {
    76.           borderWidth: 0,
    77.           lineWidth: 0,
    78.           backgroundColor: '#369',
    79.           width: 10,
    80.           height: '100%',
    81.           label: {
    82.             _fontSize: 11,
    83.             _color: '#000',
    84.             _fontWeight: 'bold'
    85.           }
    86.         },
    87.         active: {
    88.           backgroundColor: 'transparent',
    89.           alpha: 1
    90.         }
    91.       }
    92.     };
    93.  
    94.     var nodes = 10000;
    95.     var interval = 1000 * 60 * 1;
    96.     var ts = new Date().getTime() + 13500 * interval;
    97.  
    98.     function dset(offset) {
    99.       var d = [];
    100.       var k, v;
    101.       for (var i = 0; i < nodes; i++) {
    102.         if (i === 0) {
    103.           k = ts + offset;
    104.           v = ZC._i_(ZC._r_(400, 600));
    105.         } else {
    106.           k += ZC._i_(ZC._r_(interval, 10 * interval));
    107.           v += ZC._i_(ZC._r_(-10, 10));
    108.         }
    109.         d.push([k, v]);
    110.         //d.push(v);
    111.       }
    112.       return d;
    113.     }
    114.  
    115.     cfg.series.push({
    116.       values: dset(0)
    117.     });
    118.     cfg.series.push({
    119.       values: dset(0)
    120.     });
    121.  
    122.     zingchart.render({
    123.       id: 'myChart',
    124.       width: '100%',
    125.       height: '100%',
    126.       output: 'svg',
    127.       data: cfg
    128.     });
    129.   </script>
    130. </body>
    131.  
    132. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var cfg = {
    2.   globals: {
    3.     fontFamily: 'Lucida Sans Unicode'
    4.   },
    5.   type: 'line',
    6.   plotarea: {
    7.     adjustLayout: true
    8.   },
    9.   crosshairX: {
    10.     singleLine: true
    11.   },
    12.   scaleX: {
    13.     zooming: true,
    14.     transform: {
    15.       type: 'date',
    16.       item: {
    17.         visible: true
    18.       }
    19.     }
    20.   },
    21.   scaleY: {
    22.     autoFit: true
    23.   },
    24.   series: [],
    25.   legend: {
    26.     layout: 'float',
    27.     adjustLayout: true,
    28.     margin: '20 auto 0 auto',
    29.     toggleAction: 'remove'
    30.   },
    31.   preview: {
    32.     _width: 300,
    33.     height: 40,
    34.     adjustLayout: true,
    35.     borderWidth: 1,
    36.     borderColor: '#369',
    37.     label: {
    38.       _color: '#900',
    39.       _lineWidth: 1,
    40.       _lineColor: '#090'
    41.     },
    42.     handle: {
    43.       borderWidth: 0,
    44.       lineWidth: 0,
    45.       backgroundColor: '#369',
    46.       width: 10,
    47.       height: '100%',
    48.       label: {
    49.         _fontSize: 11,
    50.         _color: '#000',
    51.         _fontWeight: 'bold'
    52.       }
    53.     },
    54.     active: {
    55.       backgroundColor: 'transparent',
    56.       alpha: 1
    57.     }
    58.   }
    59. };
    60.  
    61. var nodes = 10000;
    62. var interval = 1000 * 60 * 1;
    63. var ts = new Date().getTime() + 13500 * interval;
    64.  
    65. function dset(offset) {
    66.   var d = [];
    67.   var k, v;
    68.   for (var i = 0; i < nodes; i++) {
    69.     if (i === 0) {
    70.       k = ts + offset;
    71.       v = ZC._i_(ZC._r_(400, 600));
    72.     } else {
    73.       k += ZC._i_(ZC._r_(interval, 10 * interval));
    74.       v += ZC._i_(ZC._r_(-10, 10));
    75.     }
    76.     d.push([k, v]);
    77.     //d.push(v);
    78.   }
    79.   return d;
    80. }
    81.  
    82. cfg.series.push({
    83.   values: dset(0)
    84. });
    85. cfg.series.push({
    86.   values: dset(0)
    87. });
    88.  
    89. zingchart.render({
    90.   id: 'myChart',
    91.   width: '100%',
    92.   height: '100%',
    93.   output: 'svg',
    94.   data: cfg
    95. });