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