• 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.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     var myConfig3 = {
    24.       "graphset": [{
    25.           "type": "bubble",
    26.           "height": "50%",
    27.           "width": "50%",
    28.           "x": "0%",
    29.           "y": "0%",
    30.           "plot": {
    31.             "min-size": 5,
    32.             "max-size": 10
    33.           },
    34.           "scale-x": {
    35.             "offset-start": 5,
    36.             "offset-end": 5
    37.           },
    38.           "scale-y": {
    39.             "offset-start": 5,
    40.             "offset-end": 5
    41.           },
    42.           "series": [{
    43.             "values": [
    44.               [0.9, 3, 18],
    45.               [2.1, 13, 21],
    46.               [3.5, 25, 33],
    47.               [4.9, 35, 54],
    48.               [5.3, 41, 59],
    49.               [6.5, 57, 34],
    50.               [7.1, 61, 17],
    51.               [8.7, 70, 3],
    52.               [9.2, 82, 28],
    53.               [9.9, 95, 76]
    54.             ]
    55.           }]
    56.         },
    57.         {
    58.           "type": "bubble",
    59.           "height": "50%",
    60.           "width": "50%",
    61.           "x": "50%",
    62.           "y": "0%",
    63.           "plot": {
    64.             "min-size": 5,
    65.             "max-size": 10
    66.           },
    67.           "scale-x": {
    68.             "offset-start": 5,
    69.             "offset-end": 5
    70.           },
    71.           "scale-y": {
    72.             "offset-start": 5,
    73.             "offset-end": 5
    74.           },
    75.           "series": [{
    76.             "values": [
    77.               [0.1, 9, 3],
    78.               [1.8, 21, 60],
    79.               [1.9, 29, 9],
    80.               [4.1, 33, 9],
    81.               [4.5, 39, 4],
    82.               [6.9, 51, 3],
    83.               [7.4, 64, 11],
    84.               [8.9, 70, 12],
    85.               [9, 75, 3],
    86.               [9.3, 93, 29]
    87.             ]
    88.           }]
    89.         },
    90.         {
    91.           "type": "bubble",
    92.           "height": "50%",
    93.           "width": "50%",
    94.           "x": "0%",
    95.           "y": "50%",
    96.           "plot": {
    97.             "min-size": 5,
    98.             "max-size": 10
    99.           },
    100.           "scale-x": {
    101.             "offset-start": 5,
    102.             "offset-end": 5
    103.           },
    104.           "scale-y": {
    105.             "offset-start": 5,
    106.             "offset-end": 5
    107.           },
    108.           "series": [{
    109.             "values": [
    110.               [0.3, 11, 11],
    111.               [0.9, 15, 21],
    112.               [1.1, 24, 54],
    113.               [2.3, 29, 6],
    114.               [2.9, 30, 9],
    115.               [3.3, 35, 59],
    116.               [5.6, 67, 30],
    117.               [6.9, 70, 14],
    118.               [7.3, 71, 7],
    119.               [8.9, 90, 9]
    120.             ]
    121.           }]
    122.         },
    123.         {
    124.           "type": "bubble",
    125.           "height": "50%",
    126.           "width": "50%",
    127.           "x": "50%",
    128.           "y": "50%",
    129.           "plot": {
    130.             "min-size": 5,
    131.             "max-size": 10
    132.           },
    133.           "scale-x": {
    134.             "offset-start": 5,
    135.             "offset-end": 5
    136.           },
    137.           "scale-y": {
    138.             "offset-start": 5,
    139.             "offset-end": 5
    140.           },
    141.           "series": [{
    142.             "values": [
    143.               [0.5, 5, 8],
    144.               [1.9, 5, 3],
    145.               [2.5, 10, 2],
    146.               [3.1, 30, 8],
    147.               [6.5, 45, 87],
    148.               [6.9, 74, 1],
    149.               [7.2, 50, 7],
    150.               [7.8, 56, 20],
    151.               [8, 61, 3],
    152.               [8.5, 71, 4]
    153.             ]
    154.           }]
    155.         }
    156.       ]
    157.     };
    158.  
    159.     zingchart.render({
    160.       id: 'myChart',
    161.       data: myConfig3,
    162.       height: "100%",
    163.       width: "100%"
    164.     });
    165.   </script>
    166. </body>
    167.  
    168. </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'></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    1. var myConfig3 = {
    2.   "graphset": [{
    3.       "type": "bubble",
    4.       "height": "50%",
    5.       "width": "50%",
    6.       "x": "0%",
    7.       "y": "0%",
    8.       "plot": {
    9.         "min-size": 5,
    10.         "max-size": 10
    11.       },
    12.       "scale-x": {
    13.         "offset-start": 5,
    14.         "offset-end": 5
    15.       },
    16.       "scale-y": {
    17.         "offset-start": 5,
    18.         "offset-end": 5
    19.       },
    20.       "series": [{
    21.         "values": [
    22.           [0.9, 3, 18],
    23.           [2.1, 13, 21],
    24.           [3.5, 25, 33],
    25.           [4.9, 35, 54],
    26.           [5.3, 41, 59],
    27.           [6.5, 57, 34],
    28.           [7.1, 61, 17],
    29.           [8.7, 70, 3],
    30.           [9.2, 82, 28],
    31.           [9.9, 95, 76]
    32.         ]
    33.       }]
    34.     },
    35.     {
    36.       "type": "bubble",
    37.       "height": "50%",
    38.       "width": "50%",
    39.       "x": "50%",
    40.       "y": "0%",
    41.       "plot": {
    42.         "min-size": 5,
    43.         "max-size": 10
    44.       },
    45.       "scale-x": {
    46.         "offset-start": 5,
    47.         "offset-end": 5
    48.       },
    49.       "scale-y": {
    50.         "offset-start": 5,
    51.         "offset-end": 5
    52.       },
    53.       "series": [{
    54.         "values": [
    55.           [0.1, 9, 3],
    56.           [1.8, 21, 60],
    57.           [1.9, 29, 9],
    58.           [4.1, 33, 9],
    59.           [4.5, 39, 4],
    60.           [6.9, 51, 3],
    61.           [7.4, 64, 11],
    62.           [8.9, 70, 12],
    63.           [9, 75, 3],
    64.           [9.3, 93, 29]
    65.         ]
    66.       }]
    67.     },
    68.     {
    69.       "type": "bubble",
    70.       "height": "50%",
    71.       "width": "50%",
    72.       "x": "0%",
    73.       "y": "50%",
    74.       "plot": {
    75.         "min-size": 5,
    76.         "max-size": 10
    77.       },
    78.       "scale-x": {
    79.         "offset-start": 5,
    80.         "offset-end": 5
    81.       },
    82.       "scale-y": {
    83.         "offset-start": 5,
    84.         "offset-end": 5
    85.       },
    86.       "series": [{
    87.         "values": [
    88.           [0.3, 11, 11],
    89.           [0.9, 15, 21],
    90.           [1.1, 24, 54],
    91.           [2.3, 29, 6],
    92.           [2.9, 30, 9],
    93.           [3.3, 35, 59],
    94.           [5.6, 67, 30],
    95.           [6.9, 70, 14],
    96.           [7.3, 71, 7],
    97.           [8.9, 90, 9]
    98.         ]
    99.       }]
    100.     },
    101.     {
    102.       "type": "bubble",
    103.       "height": "50%",
    104.       "width": "50%",
    105.       "x": "50%",
    106.       "y": "50%",
    107.       "plot": {
    108.         "min-size": 5,
    109.         "max-size": 10
    110.       },
    111.       "scale-x": {
    112.         "offset-start": 5,
    113.         "offset-end": 5
    114.       },
    115.       "scale-y": {
    116.         "offset-start": 5,
    117.         "offset-end": 5
    118.       },
    119.       "series": [{
    120.         "values": [
    121.           [0.5, 5, 8],
    122.           [1.9, 5, 3],
    123.           [2.5, 10, 2],
    124.           [3.1, 30, 8],
    125.           [6.5, 45, 87],
    126.           [6.9, 74, 1],
    127.           [7.2, 50, 7],
    128.           [7.8, 56, 20],
    129.           [8, 61, 3],
    130.           [8.5, 71, 4]
    131.         ]
    132.       }]
    133.     }
    134.   ]
    135. };
    136.  
    137. zingchart.render({
    138.   id: 'myChart',
    139.   data: myConfig3,
    140.   height: "100%",
    141.   width: "100%"
    142. });