• 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/2.7.2/zingchart.min.js"></script>
    9.   <style></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart1'></div>
    14.   <script>
    15.     let valueArray1 = [
    16.       [2596, 2626, 4480, 6394, 7488, 14510, 7012, 3389, 20281, 48597, 53309, 52385, 47097, 50813, 13510],
    17.       [479, 199, 583, 1624, 2772, 7899, 3467, 2227, 12885, 27873, 34420, 32569, 27721, 31569, 7362],
    18.       [408, 343, 410, 840, 1614, 3274, 2092, 914, 5709, 15317, 15633, 16720, 15504, 15821, 4565],
    19.       [989, 1364, 2161, 2644, 1754, 2015, 818, 77, 1260, 3912, 1671, 1836, 2589, 1706, 1161]
    20.     ];
    21.  
    22.     let i = 0;
    23.  
    24.     window.feed = function(callback) {
    25.       let tick = {};
    26.  
    27.       if ((i + 1) > (valueArray1[0].length - 1)) {
    28.         i = 0;
    29.       };
    30.       tick.plot0 = valueArray1[0][i];
    31.       tick.plot1 = valueArray1[0][i];
    32.       tick.plot2 = valueArray1[1][i];
    33.       tick.plot3 = valueArray1[2][i];
    34.       tick.plot4 = valueArray1[3][i];
    35.       i++;
    36.  
    37.       callback(JSON.stringify(tick));
    38.     };
    39.  
    40.  
    41.     let myConfig1 = {
    42.       type: 'stream',
    43.       globals: {
    44.         fontFamily: 'Helvetica',
    45.         shadow: false,
    46.       },
    47.       backgroundColor: '#fff',
    48.       options: {
    49.         emptySeries: {
    50.           backgroundColor: 'blue'
    51.         }
    52.       },
    53.       title: {
    54.         text: 'Bandwidth for All Sites',
    55.         backgroundColor: 'transparent',
    56.         fontColor: '#5f5f5f',
    57.         fontSize: '20px',
    58.         padding: '15px 15px',
    59.         textAlign: 'left',
    60.       },
    61.       scaleY: {
    62.         lineColor: '#5f5f5f',
    63.         lineWidth: '1px',
    64.         short: true,
    65.         guide: {
    66.           lineStyle: 'solid',
    67.           lineColor: '#626262'
    68.         },
    69.         item: {
    70.           fontColor: '#5f5f5f'
    71.         },
    72.         tick: {
    73.           lineColor: '#5f5f5f',
    74.           lineWidth: '1px'
    75.         },
    76.       },
    77.       tooltip: {
    78.         visible: false
    79.       },
    80.       crosshairX: {
    81.         plotLabel: {
    82.           backgroundColor: '#434343',
    83.           borderRadius: '5px',
    84.           fontColor: '#FFF',
    85.           thousandsSeparator: ',',
    86.         },
    87.         scaleLabel: {
    88.           backgroundColor: '#fff',
    89.           fontColor: 'black'
    90.         },
    91.       },
    92.       plot: {
    93.         alphaArea: 1,
    94.         lineWidth: 0,
    95.       },
    96.       refresh: {
    97.         type: 'feed',
    98.         transport: 'js',
    99.         url: 'feed()',
    100.         maxTicks: 10,
    101.         interval: 400,
    102.         resetTimeout: 1000
    103.       },
    104.       series: [{
    105.           text: 'All Sites',
    106.           values: [],
    107.           backgroundColor: '#E84F28',
    108.           lineColor: '#E84F28'
    109.         },
    110.         {
    111.           text: 'www.zingchart.com',
    112.           values: [],
    113.           backgroundColor: '#45C392',
    114.           lineColor: '#45C392'
    115.         },
    116.         {
    117.           text: 'blog.zingchart.com',
    118.           values: [],
    119.           backgroundColor: '#28C2D1',
    120.           lineColor: '#28C2D1'
    121.         },
    122.         {
    123.           text: 'help.zingchart.com',
    124.           values: [],
    125.           backgroundColor: '#FBA645',
    126.           lineColor: '#FBA645'
    127.         }
    128.       ]
    129.     };
    130.  
    131.     zingchart.loadModules('stream', function() {
    132.       zingchart.render({
    133.         id: 'myChart1',
    134.         data: myConfig1,
    135.         height: 400,
    136.         width: '100%'
    137.       });
    138.     });
    139.   </script>
    140. </body>
    141.  
    142. </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/2.7.2/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id='myChart1'></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. let valueArray1 = [
    2.   [2596, 2626, 4480, 6394, 7488, 14510, 7012, 3389, 20281, 48597, 53309, 52385, 47097, 50813, 13510],
    3.   [479, 199, 583, 1624, 2772, 7899, 3467, 2227, 12885, 27873, 34420, 32569, 27721, 31569, 7362],
    4.   [408, 343, 410, 840, 1614, 3274, 2092, 914, 5709, 15317, 15633, 16720, 15504, 15821, 4565],
    5.   [989, 1364, 2161, 2644, 1754, 2015, 818, 77, 1260, 3912, 1671, 1836, 2589, 1706, 1161]
    6. ];
    7.  
    8. let i = 0;
    9.  
    10. window.feed = function(callback) {
    11.   let tick = {};
    12.  
    13.   if ((i + 1) > (valueArray1[0].length - 1)) {
    14.     i = 0;
    15.   };
    16.   tick.plot0 = valueArray1[0][i];
    17.   tick.plot1 = valueArray1[0][i];
    18.   tick.plot2 = valueArray1[1][i];
    19.   tick.plot3 = valueArray1[2][i];
    20.   tick.plot4 = valueArray1[3][i];
    21.   i++;
    22.  
    23.   callback(JSON.stringify(tick));
    24. };
    25.  
    26.  
    27. let myConfig1 = {
    28.   type: 'stream',
    29.   globals: {
    30.     fontFamily: 'Helvetica',
    31.     shadow: false,
    32.   },
    33.   backgroundColor: '#fff',
    34.   options: {
    35.     emptySeries: {
    36.       backgroundColor: 'blue'
    37.     }
    38.   },
    39.   title: {
    40.     text: 'Bandwidth for All Sites',
    41.     backgroundColor: 'transparent',
    42.     fontColor: '#5f5f5f',
    43.     fontSize: '20px',
    44.     padding: '15px 15px',
    45.     textAlign: 'left',
    46.   },
    47.   scaleY: {
    48.     lineColor: '#5f5f5f',
    49.     lineWidth: '1px',
    50.     short: true,
    51.     guide: {
    52.       lineStyle: 'solid',
    53.       lineColor: '#626262'
    54.     },
    55.     item: {
    56.       fontColor: '#5f5f5f'
    57.     },
    58.     tick: {
    59.       lineColor: '#5f5f5f',
    60.       lineWidth: '1px'
    61.     },
    62.   },
    63.   tooltip: {
    64.     visible: false
    65.   },
    66.   crosshairX: {
    67.     plotLabel: {
    68.       backgroundColor: '#434343',
    69.       borderRadius: '5px',
    70.       fontColor: '#FFF',
    71.       thousandsSeparator: ',',
    72.     },
    73.     scaleLabel: {
    74.       backgroundColor: '#fff',
    75.       fontColor: 'black'
    76.     },
    77.   },
    78.   plot: {
    79.     alphaArea: 1,
    80.     lineWidth: 0,
    81.   },
    82.   refresh: {
    83.     type: 'feed',
    84.     transport: 'js',
    85.     url: 'feed()',
    86.     maxTicks: 10,
    87.     interval: 400,
    88.     resetTimeout: 1000
    89.   },
    90.   series: [{
    91.       text: 'All Sites',
    92.       values: [],
    93.       backgroundColor: '#E84F28',
    94.       lineColor: '#E84F28'
    95.     },
    96.     {
    97.       text: 'www.zingchart.com',
    98.       values: [],
    99.       backgroundColor: '#45C392',
    100.       lineColor: '#45C392'
    101.     },
    102.     {
    103.       text: 'blog.zingchart.com',
    104.       values: [],
    105.       backgroundColor: '#28C2D1',
    106.       lineColor: '#28C2D1'
    107.     },
    108.     {
    109.       text: 'help.zingchart.com',
    110.       values: [],
    111.       backgroundColor: '#FBA645',
    112.       lineColor: '#FBA645'
    113.     }
    114.   ]
    115. };
    116.  
    117. zingchart.loadModules('stream', function() {
    118.   zingchart.render({
    119.     id: 'myChart1',
    120.     data: myConfig1,
    121.     height: 400,
    122.     width: '100%'
    123.   });
    124. });