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