• 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-pie",
    26. "title": {
    27. "text": "Min/Max: 20 and 45"
    28. },
    29. "height": "100%",
    30. "width": "50%",
    31. "x": "0%",
    32. "y": "0%",
    33. "plot": {
    34. "values": [
    35. [3, 3, 34],
    36. [5, 12, 101],
    37. [9, 7, 59],
    38. [11, 5, 15],
    39. [14, 14, 30]
    40. ],
    41. "min-size": 20,
    42. "max-size": 45
    43. },
    44. "series": [{
    45. "data-v": [15, 37, 7, 3, 14]
    46. },
    47. {
    48. "data-v": [13, 34, 21, 7, 8]
    49. },
    50. {
    51. "data-v": [6, 30, 31, 5, 8]
    52. },
    53. {
    54. "data-v": [5, 29, null, 3, 13]
    55. },
    56. {
    57. "data-v": [3, 25, 19, 3, null]
    58. }
    59. ]
    60. },
    61. {
    62. "type": "bubble-pie",
    63. "title": {
    64. "text": "Min/Max: 5 and 15"
    65. },
    66. "height": "100%",
    67. "width": "50%",
    68. "x": "50%",
    69. "y": "0%",
    70. "plot": {
    71. "values": [
    72. [3, 3, 34],
    73. [5, 12, 101],
    74. [9, 7, 59],
    75. [11, 5, 15],
    76. [14, 14, 30]
    77. ],
    78. "min-size": 5,
    79. "max-size": 15
    80. },
    81. "series": [{
    82. "data-v": [15, 37, 7, 3, 14]
    83. },
    84. {
    85. "data-v": [13, 34, 21, 7, 8]
    86. },
    87. {
    88. "data-v": [6, 30, 31, 5, 8]
    89. },
    90. {
    91. "data-v": [5, 29, null, 3, 13]
    92. },
    93. {
    94. "data-v": [3, 25, 19, 3, null]
    95. }
    96. ]
    97. }
    98. ]
    99. };
    100.  
    101. zingchart.render({
    102. id: 'myChart',
    103. data: myConfig3,
    104. height: "100%",
    105. width: "100%"
    106. });
    107. </script>
    108. </body>
    109.  
    110. </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-pie",
    4. "title": {
    5. "text": "Min/Max: 20 and 45"
    6. },
    7. "height": "100%",
    8. "width": "50%",
    9. "x": "0%",
    10. "y": "0%",
    11. "plot": {
    12. "values": [
    13. [3, 3, 34],
    14. [5, 12, 101],
    15. [9, 7, 59],
    16. [11, 5, 15],
    17. [14, 14, 30]
    18. ],
    19. "min-size": 20,
    20. "max-size": 45
    21. },
    22. "series": [{
    23. "data-v": [15, 37, 7, 3, 14]
    24. },
    25. {
    26. "data-v": [13, 34, 21, 7, 8]
    27. },
    28. {
    29. "data-v": [6, 30, 31, 5, 8]
    30. },
    31. {
    32. "data-v": [5, 29, null, 3, 13]
    33. },
    34. {
    35. "data-v": [3, 25, 19, 3, null]
    36. }
    37. ]
    38. },
    39. {
    40. "type": "bubble-pie",
    41. "title": {
    42. "text": "Min/Max: 5 and 15"
    43. },
    44. "height": "100%",
    45. "width": "50%",
    46. "x": "50%",
    47. "y": "0%",
    48. "plot": {
    49. "values": [
    50. [3, 3, 34],
    51. [5, 12, 101],
    52. [9, 7, 59],
    53. [11, 5, 15],
    54. [14, 14, 30]
    55. ],
    56. "min-size": 5,
    57. "max-size": 15
    58. },
    59. "series": [{
    60. "data-v": [15, 37, 7, 3, 14]
    61. },
    62. {
    63. "data-v": [13, 34, 21, 7, 8]
    64. },
    65. {
    66. "data-v": [6, 30, 31, 5, 8]
    67. },
    68. {
    69. "data-v": [5, 29, null, 3, 13]
    70. },
    71. {
    72. "data-v": [3, 25, 19, 3, null]
    73. }
    74. ]
    75. }
    76. ]
    77. };
    78.  
    79. zingchart.render({
    80. id: 'myChart',
    81. data: myConfig3,
    82. height: "100%",
    83. width: "100%"
    84. });