• 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 myConfig14 = {
    24.       "type": "bubble",
    25.       "tooltip": {
    26.         "text": "Bubble Chart Tokens:<br><br>X-axis value is %scale-key-value<br>Y-axis value is %node-value<br>Bubble value is %node-size-value<br><br>Also: %t",
    27.         "font-color": "black",
    28.         "font-family": "Georgia, serif",
    29.         "background-color": "white",
    30.         "border-color": "black",
    31.         "border-width": 2
    32.       },
    33.       "plot": {
    34.         "marker": {
    35.           "background-color": "#00FFFF",
    36.           "border-color": "#009999",
    37.           "border-width": 1,
    38.           "alpha": 0.3
    39.         }
    40.       },
    41.       "series": [{
    42.           "values": [
    43.             [1, 9, 59],
    44.             [2, 15, 15],
    45.             [3, 21, 30],
    46.             [4, 30, 5],
    47.             [5, 40, 35],
    48.             [6, 59, 21],
    49.             [7, 60, 25],
    50.             [8, 75, 85],
    51.             [9, 81, 87],
    52.             [10, 99, 12]
    53.           ],
    54.           "text": "Stars",
    55.           "marker": {
    56.             "type": "star5",
    57.             "background-color": "#FF0066",
    58.             "border-color": "#FFFF66",
    59.             "border-width": 3,
    60.             "alpha": 0.7
    61.           }
    62.         },
    63.         {
    64.           "values": [
    65.             [0.9, 3, 18],
    66.             [2.1, 13, 21],
    67.             [3.5, 25, 33],
    68.             [4.9, 35, 54],
    69.             [5.3, 41, 59],
    70.             [6.5, 57, 34],
    71.             [7.1, 61, 17],
    72.             [8.7, 70, 3],
    73.             [9.2, 82, 28],
    74.             [9.9, 95, 76]
    75.           ],
    76.           "text": "Bubbles"
    77.         },
    78.         {
    79.           "values": [
    80.             [0.1, 9, 3],
    81.             [1.8, 21, 60],
    82.             [1.9, 29, 9],
    83.             [4.1, 33, 9],
    84.             [4.5, 39, 4],
    85.             [6.9, 51, 3],
    86.             [7.4, 64, 11],
    87.             [8.9, 70, 12],
    88.             [9, 75, 3],
    89.             [9.3, 93, 29]
    90.           ],
    91.           "text": "Bubbles"
    92.         },
    93.         {
    94.           "values": [
    95.             [0.3, 11, 11],
    96.             [0.9, 15, 21],
    97.             [1.1, 24, 54],
    98.             [2.3, 29, 6],
    99.             [2.9, 30, 9],
    100.             [3.3, 35, 59],
    101.             [5.6, 67, 30],
    102.             [6.9, 70, 14],
    103.             [7.3, 71, 7],
    104.             [8.9, 90, 9]
    105.           ],
    106.           "text": "Bubbles"
    107.         },
    108.         {
    109.           "values": [
    110.             [0.5, 5, 8],
    111.             [1.9, 5, 3],
    112.             [2.5, 10, 2],
    113.             [3.1, 30, 8],
    114.             [6.5, 45, 87],
    115.             [6.9, 74, 1],
    116.             [7.2, 50, 7],
    117.             [7.8, 56, 20],
    118.             [8, 61, 3],
    119.             [8.5, 71, 4]
    120.           ],
    121.           "text": "Bubbles"
    122.         }
    123.       ]
    124.     };
    125.     var myConfig15 = {
    126.       "type": "bubble",
    127.       "legend": {
    128.         "layout": "5x1",
    129.         "position": "97% 73%",
    130.         "item": {
    131.           "font-color": "brown",
    132.           "font-family": "Georgia"
    133.         },
    134.         "background-color": "white",
    135.         "alpha": 0.5,
    136.         "border-color": "none",
    137.         "shadow": false,
    138.         "marker": {
    139.           "type": "inherit",
    140.         }
    141.       },
    142.       "series": [{
    143.           "values": [
    144.             [1, 9, 59],
    145.             [2, 15, 15],
    146.             [3, 21, 30],
    147.             [4, 30, 5],
    148.             [5, 40, 35],
    149.             [6, 59, 21],
    150.             [7, 60, 25],
    151.             [8, 75, 85],
    152.             [9, 81, 87],
    153.             [10, 99, 12]
    154.           ],
    155.           "text": "Kale",
    156.           "marker": {
    157.             "type": "rpoly6",
    158.             "alpha": 0.7
    159.           }
    160.         },
    161.         {
    162.           "values": [
    163.             [0.9, 3, 18],
    164.             [2.1, 13, 21],
    165.             [3.5, 25, 33],
    166.             [4.9, 35, 54],
    167.             [5.3, 41, 59],
    168.             [6.5, 57, 34],
    169.             [7.1, 61, 17],
    170.             [8.7, 70, 3],
    171.             [9.2, 82, 28],
    172.             [9.9, 95, 76]
    173.           ],
    174.           "text": "Blueberries",
    175.           "marker": {
    176.             "type": "circle",
    177.             "alpha": 0.7
    178.           }
    179.         },
    180.         {
    181.           "values": [
    182.             [0.1, 9, 3],
    183.             [1.8, 21, 60],
    184.             [1.9, 29, 9],
    185.             [4.1, 33, 9],
    186.             [4.5, 39, 4],
    187.             [6.9, 51, 3],
    188.             [7.4, 64, 11],
    189.             [8.9, 70, 12],
    190.             [9, 75, 3],
    191.             [9.3, 93, 29]
    192.           ],
    193.           "text": "Tomatoes",
    194.           "marker": {
    195.             "type": "triangle",
    196.             "alpha": 0.7
    197.           }
    198.         },
    199.         {
    200.           "values": [
    201.             [0.3, 11, 11],
    202.             [0.9, 15, 21],
    203.             [1.1, 24, 54],
    204.             [2.3, 29, 6],
    205.             [2.9, 30, 9],
    206.             [3.3, 35, 59],
    207.             [5.6, 67, 30],
    208.             [6.9, 70, 14],
    209.             [7.3, 71, 7],
    210.             [8.9, 90, 9]
    211.           ],
    212.           "text": "Pineapples",
    213.           "marker": {
    214.             "type": "diamond",
    215.             "alpha": 0.7
    216.           }
    217.         },
    218.         {
    219.           "values": [
    220.             [0.5, 5, 8],
    221.             [1.9, 5, 3],
    222.             [2.5, 10, 2],
    223.             [3.1, 30, 8],
    224.             [6.5, 45, 87],
    225.             [6.9, 74, 1],
    226.             [7.2, 50, 7],
    227.             [7.8, 56, 20],
    228.             [8, 61, 3],
    229.             [8.5, 71, 4]
    230.           ],
    231.           "text": "Mushrooms",
    232.           "marker": {
    233.             "type": "gear5",
    234.             "alpha": 0.7
    235.           }
    236.         }
    237.       ]
    238.     };
    239.  
    240.     zingchart.render({
    241.       id: 'myChart',
    242.       data: myConfig14,
    243.       height: "100%",
    244.       width: "100%"
    245.     });
    246.   </script>
    247. </body>
    248.  
    249. </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 myConfig14 = {
    2.   "type": "bubble",
    3.   "tooltip": {
    4.     "text": "Bubble Chart Tokens:<br><br>X-axis value is %scale-key-value<br>Y-axis value is %node-value<br>Bubble value is %node-size-value<br><br>Also: %t",
    5.     "font-color": "black",
    6.     "font-family": "Georgia, serif",
    7.     "background-color": "white",
    8.     "border-color": "black",
    9.     "border-width": 2
    10.   },
    11.   "plot": {
    12.     "marker": {
    13.       "background-color": "#00FFFF",
    14.       "border-color": "#009999",
    15.       "border-width": 1,
    16.       "alpha": 0.3
    17.     }
    18.   },
    19.   "series": [{
    20.       "values": [
    21.         [1, 9, 59],
    22.         [2, 15, 15],
    23.         [3, 21, 30],
    24.         [4, 30, 5],
    25.         [5, 40, 35],
    26.         [6, 59, 21],
    27.         [7, 60, 25],
    28.         [8, 75, 85],
    29.         [9, 81, 87],
    30.         [10, 99, 12]
    31.       ],
    32.       "text": "Stars",
    33.       "marker": {
    34.         "type": "star5",
    35.         "background-color": "#FF0066",
    36.         "border-color": "#FFFF66",
    37.         "border-width": 3,
    38.         "alpha": 0.7
    39.       }
    40.     },
    41.     {
    42.       "values": [
    43.         [0.9, 3, 18],
    44.         [2.1, 13, 21],
    45.         [3.5, 25, 33],
    46.         [4.9, 35, 54],
    47.         [5.3, 41, 59],
    48.         [6.5, 57, 34],
    49.         [7.1, 61, 17],
    50.         [8.7, 70, 3],
    51.         [9.2, 82, 28],
    52.         [9.9, 95, 76]
    53.       ],
    54.       "text": "Bubbles"
    55.     },
    56.     {
    57.       "values": [
    58.         [0.1, 9, 3],
    59.         [1.8, 21, 60],
    60.         [1.9, 29, 9],
    61.         [4.1, 33, 9],
    62.         [4.5, 39, 4],
    63.         [6.9, 51, 3],
    64.         [7.4, 64, 11],
    65.         [8.9, 70, 12],
    66.         [9, 75, 3],
    67.         [9.3, 93, 29]
    68.       ],
    69.       "text": "Bubbles"
    70.     },
    71.     {
    72.       "values": [
    73.         [0.3, 11, 11],
    74.         [0.9, 15, 21],
    75.         [1.1, 24, 54],
    76.         [2.3, 29, 6],
    77.         [2.9, 30, 9],
    78.         [3.3, 35, 59],
    79.         [5.6, 67, 30],
    80.         [6.9, 70, 14],
    81.         [7.3, 71, 7],
    82.         [8.9, 90, 9]
    83.       ],
    84.       "text": "Bubbles"
    85.     },
    86.     {
    87.       "values": [
    88.         [0.5, 5, 8],
    89.         [1.9, 5, 3],
    90.         [2.5, 10, 2],
    91.         [3.1, 30, 8],
    92.         [6.5, 45, 87],
    93.         [6.9, 74, 1],
    94.         [7.2, 50, 7],
    95.         [7.8, 56, 20],
    96.         [8, 61, 3],
    97.         [8.5, 71, 4]
    98.       ],
    99.       "text": "Bubbles"
    100.     }
    101.   ]
    102. };
    103. var myConfig15 = {
    104.   "type": "bubble",
    105.   "legend": {
    106.     "layout": "5x1",
    107.     "position": "97% 73%",
    108.     "item": {
    109.       "font-color": "brown",
    110.       "font-family": "Georgia"
    111.     },
    112.     "background-color": "white",
    113.     "alpha": 0.5,
    114.     "border-color": "none",
    115.     "shadow": false,
    116.     "marker": {
    117.       "type": "inherit",
    118.     }
    119.   },
    120.   "series": [{
    121.       "values": [
    122.         [1, 9, 59],
    123.         [2, 15, 15],
    124.         [3, 21, 30],
    125.         [4, 30, 5],
    126.         [5, 40, 35],
    127.         [6, 59, 21],
    128.         [7, 60, 25],
    129.         [8, 75, 85],
    130.         [9, 81, 87],
    131.         [10, 99, 12]
    132.       ],
    133.       "text": "Kale",
    134.       "marker": {
    135.         "type": "rpoly6",
    136.         "alpha": 0.7
    137.       }
    138.     },
    139.     {
    140.       "values": [
    141.         [0.9, 3, 18],
    142.         [2.1, 13, 21],
    143.         [3.5, 25, 33],
    144.         [4.9, 35, 54],
    145.         [5.3, 41, 59],
    146.         [6.5, 57, 34],
    147.         [7.1, 61, 17],
    148.         [8.7, 70, 3],
    149.         [9.2, 82, 28],
    150.         [9.9, 95, 76]
    151.       ],
    152.       "text": "Blueberries",
    153.       "marker": {
    154.         "type": "circle",
    155.         "alpha": 0.7
    156.       }
    157.     },
    158.     {
    159.       "values": [
    160.         [0.1, 9, 3],
    161.         [1.8, 21, 60],
    162.         [1.9, 29, 9],
    163.         [4.1, 33, 9],
    164.         [4.5, 39, 4],
    165.         [6.9, 51, 3],
    166.         [7.4, 64, 11],
    167.         [8.9, 70, 12],
    168.         [9, 75, 3],
    169.         [9.3, 93, 29]
    170.       ],
    171.       "text": "Tomatoes",
    172.       "marker": {
    173.         "type": "triangle",
    174.         "alpha": 0.7
    175.       }
    176.     },
    177.     {
    178.       "values": [
    179.         [0.3, 11, 11],
    180.         [0.9, 15, 21],
    181.         [1.1, 24, 54],
    182.         [2.3, 29, 6],
    183.         [2.9, 30, 9],
    184.         [3.3, 35, 59],
    185.         [5.6, 67, 30],
    186.         [6.9, 70, 14],
    187.         [7.3, 71, 7],
    188.         [8.9, 90, 9]
    189.       ],
    190.       "text": "Pineapples",
    191.       "marker": {
    192.         "type": "diamond",
    193.         "alpha": 0.7
    194.       }
    195.     },
    196.     {
    197.       "values": [
    198.         [0.5, 5, 8],
    199.         [1.9, 5, 3],
    200.         [2.5, 10, 2],
    201.         [3.1, 30, 8],
    202.         [6.5, 45, 87],
    203.         [6.9, 74, 1],
    204.         [7.2, 50, 7],
    205.         [7.8, 56, 20],
    206.         [8, 61, 3],
    207.         [8.5, 71, 4]
    208.       ],
    209.       "text": "Mushrooms",
    210.       "marker": {
    211.         "type": "gear5",
    212.         "alpha": 0.7
    213.       }
    214.     }
    215.   ]
    216. };
    217.  
    218. zingchart.render({
    219.   id: 'myChart',
    220.   data: myConfig14,
    221.   height: "100%",
    222.   width: "100%"
    223. });