• 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.     #myChart1,
    19.     #myChart2 {
    20.       height: 100%;
    21.       width: 100%;
    22.       min-height: 150px;
    23.     }
    24.   </style>
    25. </head>
    26.  
    27. <body>
    28.   <div id="myChart1"></div>
    29.   <div id="myChart2"></div>
    30.   <script>
    31.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    32.     var myConfig1 = {
    33.       "graphset": [{
    34.         "backgroundColor": "#fff",
    35.         "globals": {
    36.           "shadow": false,
    37.           "fontFamily": "Helvetica"
    38.         },
    39.         "type": "stream",
    40.         "title": {
    41.           "text": "Bandwidth for All Sites",
    42.           "fontColor": "#5f5f5f",
    43.           "backgroundColor": "transparent",
    44.           "textAlign": "left",
    45.           "padding": "15px 15px",
    46.           "fontSize": "20px"
    47.         },
    48.         "legend": {
    49.           "layout": "horizontal",
    50.           "backgroundColor": "transparent",
    51.           "borderColor": "transparent",
    52.           "marginTop": 30,
    53.           "toggleAction": "remove",
    54.           "marker": {
    55.             "borderRadius": "50px",
    56.             "borderColor": "transparent"
    57.           },
    58.           "item": {
    59.             "fontColor": "#5f5f5f"
    60.           }
    61.         },
    62.         "scaleX": {
    63.           "maxItems": 8,
    64.           "transform": {
    65.             "type": "date"
    66.           },
    67.           "zooming": true,
    68.           "values": [1442905200000, 1442908800000, 1442912400000, 1442916000000, 1442919600000, 1442923200000, 1442926800000, 1442930400000, 1442934000000, 1442937600000, 1442941200000, 1442944800000, 1442948400000],
    69.           "lineColor": "#5f5f5f",
    70.           "lineWidth": "1px",
    71.           "tick": {
    72.             "lineColor": "#5f5f5f",
    73.             "lineWidth": "1px"
    74.           },
    75.           "item": {
    76.             "fontColor": "#5f5f5f"
    77.           },
    78.           "guide": {
    79.             "visible": false
    80.           }
    81.         },
    82.         "scaleY": {
    83.           "lineColor": "#5f5f5f",
    84.           "lineWidth": "1px",
    85.           "tick": {
    86.             "lineColor": "#5f5f5f",
    87.             "lineWidth": "1px"
    88.           },
    89.           "guide": {
    90.             "lineStyle": "solid",
    91.             "lineColor": "#626262"
    92.           },
    93.           "item": {
    94.             "fontColor": "#5f5f5f"
    95.           }
    96.         },
    97.         "tooltip": {
    98.           "visible": false
    99.         },
    100.         "crosshairX": {
    101.           "scaleLabel": {
    102.             "backgroundColor": "#fff",
    103.             "fontColor": "black"
    104.           },
    105.           "plotLabel": {
    106.             "backgroundColor": "#434343",
    107.             "fontColor": "#FFF",
    108.             "_text": "Number of hits : %v",
    109.             thousandsSeparator: ',',
    110.             borderRadius: '5px'
    111.           }
    112.         },
    113.         "plot": {
    114.           "contour-on-top": false,
    115.           "alphaArea": 1,
    116.           "lineWidth": "2px",
    117.           "aspect": "spline",
    118.           "marker": {
    119.             "visible": false
    120.           }
    121.         },
    122.         "series": [{
    123.             "text": "All Sites",
    124.             "values": [2596, 2626, 4480, 6394, 7488, 14510, 7012, 3389, 20281, 48597, 53309, 52385, 47097, 50813, 13510],
    125.             "backgroundColor": "#E84F28",
    126.             "lineColor": "#E84F28"
    127.           },
    128.           {
    129.             "text": "www.zingchart.com",
    130.             "values": [479, 199, 583, 1624, 2772, 7899, 3467, 2227, 12885, 27873, 34420, 32569, 27721, 31569, 7362],
    131.             "backgroundColor": "#45C392",
    132.             "lineColor": "#45C392"
    133.           },
    134.           {
    135.             "text": "blog.zingchart.com",
    136.             "values": [408, 343, 410, 840, 1614, 3274, 2092, 914, 5709, 15317, 15633, 16720, 15504, 15821, 4565],
    137.             "backgroundColor": "#28C2D1",
    138.             "lineColor": "#28C2D1"
    139.           },
    140.           {
    141.             "text": "help.zingchart.com",
    142.             "values": [989, 1364, 2161, 2644, 1754, 2015, 818, 77, 1260, 3912, 1671, 1836, 2589, 1706, 1161],
    143.             "backgroundColor": "#FBA645",
    144.             "lineColor": "#FBA645"
    145.           }
    146.         ]
    147.       }]
    148.     }
    149.  
    150.     zingchart.render({
    151.       id: 'myChart1',
    152.       data: myConfig1,
    153.       height: '100%',
    154.       width: '100%'
    155.     });
    156.  
    157.     var myConfig2 = JSON.parse(JSON.stringify(myConfig1));
    158.     myConfig2.graphset[0].type = 'vstream';
    159.     myConfig2.graphset[0].plotarea = {};
    160.     myConfig2.graphset[0].plotarea.marginLeft = 'dynamic';
    161.     zingchart.render({
    162.       id: 'myChart2',
    163.       data: myConfig2,
    164.       height: '100%',
    165.       width: '100%'
    166.     });
    167.   </script>
    168. </body>
    169.  
    170. </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. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart1,
    10. #myChart2 {
    11.   height: 100%;
    12.   width: 100%;
    13.   min-height: 150px;
    14. }
    1. var myConfig1 = {
    2.   "graphset": [{
    3.     "backgroundColor": "#fff",
    4.     "globals": {
    5.       "shadow": false,
    6.       "fontFamily": "Helvetica"
    7.     },
    8.     "type": "stream",
    9.     "title": {
    10.       "text": "Bandwidth for All Sites",
    11.       "fontColor": "#5f5f5f",
    12.       "backgroundColor": "transparent",
    13.       "textAlign": "left",
    14.       "padding": "15px 15px",
    15.       "fontSize": "20px"
    16.     },
    17.     "legend": {
    18.       "layout": "horizontal",
    19.       "backgroundColor": "transparent",
    20.       "borderColor": "transparent",
    21.       "marginTop": 30,
    22.       "toggleAction": "remove",
    23.       "marker": {
    24.         "borderRadius": "50px",
    25.         "borderColor": "transparent"
    26.       },
    27.       "item": {
    28.         "fontColor": "#5f5f5f"
    29.       }
    30.     },
    31.     "scaleX": {
    32.       "maxItems": 8,
    33.       "transform": {
    34.         "type": "date"
    35.       },
    36.       "zooming": true,
    37.       "values": [1442905200000, 1442908800000, 1442912400000, 1442916000000, 1442919600000, 1442923200000, 1442926800000, 1442930400000, 1442934000000, 1442937600000, 1442941200000, 1442944800000, 1442948400000],
    38.       "lineColor": "#5f5f5f",
    39.       "lineWidth": "1px",
    40.       "tick": {
    41.         "lineColor": "#5f5f5f",
    42.         "lineWidth": "1px"
    43.       },
    44.       "item": {
    45.         "fontColor": "#5f5f5f"
    46.       },
    47.       "guide": {
    48.         "visible": false
    49.       }
    50.     },
    51.     "scaleY": {
    52.       "lineColor": "#5f5f5f",
    53.       "lineWidth": "1px",
    54.       "tick": {
    55.         "lineColor": "#5f5f5f",
    56.         "lineWidth": "1px"
    57.       },
    58.       "guide": {
    59.         "lineStyle": "solid",
    60.         "lineColor": "#626262"
    61.       },
    62.       "item": {
    63.         "fontColor": "#5f5f5f"
    64.       }
    65.     },
    66.     "tooltip": {
    67.       "visible": false
    68.     },
    69.     "crosshairX": {
    70.       "scaleLabel": {
    71.         "backgroundColor": "#fff",
    72.         "fontColor": "black"
    73.       },
    74.       "plotLabel": {
    75.         "backgroundColor": "#434343",
    76.         "fontColor": "#FFF",
    77.         "_text": "Number of hits : %v",
    78.         thousandsSeparator: ',',
    79.         borderRadius: '5px'
    80.       }
    81.     },
    82.     "plot": {
    83.       "contour-on-top": false,
    84.       "alphaArea": 1,
    85.       "lineWidth": "2px",
    86.       "aspect": "spline",
    87.       "marker": {
    88.         "visible": false
    89.       }
    90.     },
    91.     "series": [{
    92.         "text": "All Sites",
    93.         "values": [2596, 2626, 4480, 6394, 7488, 14510, 7012, 3389, 20281, 48597, 53309, 52385, 47097, 50813, 13510],
    94.         "backgroundColor": "#E84F28",
    95.         "lineColor": "#E84F28"
    96.       },
    97.       {
    98.         "text": "www.zingchart.com",
    99.         "values": [479, 199, 583, 1624, 2772, 7899, 3467, 2227, 12885, 27873, 34420, 32569, 27721, 31569, 7362],
    100.         "backgroundColor": "#45C392",
    101.         "lineColor": "#45C392"
    102.       },
    103.       {
    104.         "text": "blog.zingchart.com",
    105.         "values": [408, 343, 410, 840, 1614, 3274, 2092, 914, 5709, 15317, 15633, 16720, 15504, 15821, 4565],
    106.         "backgroundColor": "#28C2D1",
    107.         "lineColor": "#28C2D1"
    108.       },
    109.       {
    110.         "text": "help.zingchart.com",
    111.         "values": [989, 1364, 2161, 2644, 1754, 2015, 818, 77, 1260, 3912, 1671, 1836, 2589, 1706, 1161],
    112.         "backgroundColor": "#FBA645",
    113.         "lineColor": "#FBA645"
    114.       }
    115.     ]
    116.   }]
    117. }
    118.  
    119. zingchart.render({
    120.   id: 'myChart1',
    121.   data: myConfig1,
    122.   height: '100%',
    123.   width: '100%'
    124. });
    125.  
    126. var myConfig2 = JSON.parse(JSON.stringify(myConfig1));
    127. myConfig2.graphset[0].type = 'vstream';
    128. myConfig2.graphset[0].plotarea = {};
    129. myConfig2.graphset[0].plotarea.marginLeft = 'dynamic';
    130. zingchart.render({
    131.   id: 'myChart2',
    132.   data: myConfig2,
    133.   height: '100%',
    134.   width: '100%'
    135. });