• 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='myChart'></div>
    14. <script>
    15. ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16. var myConfig = {
    17. "type": "pie",
    18. "title": {
    19. "text": "Value Boxes"
    20. },
    21. "subtitle": {
    22. "text": "with placement set to 'in' and 'out' based on the node value",
    23. "font-weight": "normal"
    24. },
    25. "plot": {
    26. "value-box": {
    27. "text": "%v",
    28. "font-size": 12,
    29. "font-family": "Georgia",
    30. "font-weight": "normal",
    31. "rules": [{
    32. "rule": "%v > 50",
    33. "placement": "in",
    34. "offset-r": "50%",
    35. "font-color": "white",
    36. },
    37. {
    38. "rule": "%v <= 50",
    39. "placement": "out",
    40. "font-color": "gray",
    41. }
    42. ]
    43. },
    44. "tooltip": {
    45. "text": "%t: %v (%npv%)",
    46. "font-color": "black",
    47. "font-family": "Georgia",
    48. "text-alpha": 1,
    49. "background-color": "white",
    50. "alpha": 0.7,
    51. "border-width": 1,
    52. "border-color": "#cccccc",
    53. "line-style": "dotted",
    54. "border-radius": "10px",
    55. "padding": "10%",
    56. "placement": "node:center"
    57. },
    58. "border-width": 1,
    59. "border-color": "#cccccc",
    60. "line-style": "dotted"
    61. },
    62. "plotarea": {
    63. "margin-top": "12%"
    64. },
    65. "series": [{
    66. "values": [234],
    67. "background-color": "#cc0000",
    68. "text": "Alpha"
    69. },
    70. {
    71. "values": [121],
    72. "background-color": "#ff3300",
    73. "text": "Beta"
    74. },
    75. {
    76. "values": [77],
    77. "background-color": "#ff6600",
    78. "text": "Gamma"
    79. },
    80. {
    81. "values": [65],
    82. "background-color": "#ff9933",
    83. "text": "Delta"
    84. },
    85. {
    86. "values": [59],
    87. "background-color": "#ffcc00",
    88. "text": "Epsilon"
    89. },
    90. {
    91. "values": [35],
    92. "background-color": "#ace600",
    93. "text": "Zeta"
    94. },
    95. {
    96. "values": [34],
    97. "background-color": "#88cc00",
    98. "text": "Eta"
    99. },
    100. {
    101. "values": [31],
    102. "background-color": "#339933",
    103. "text": "Theta"
    104. },
    105. {
    106. "values": [16],
    107. "background-color": "#66ccff",
    108. "text": "Iota"
    109. },
    110. {
    111. "values": [14],
    112. "background-color": "#3399ff",
    113. "text": "Kappa"
    114. },
    115. {
    116. "values": [13],
    117. "background-color": "#0066ff",
    118. "text": "Lambda"
    119. },
    120. {
    121. "values": [12],
    122. "background-color": "#3333cc",
    123. "text": "Mu"
    124. },
    125. {
    126. "values": [11],
    127. "background-color": "#6600ff",
    128. "text": "Nu"
    129. },
    130. {
    131. "values": [10],
    132. "background-color": "#9933ff",
    133. "text": "Xi"
    134. },
    135. {
    136. "values": [9],
    137. "background-color": "#9999ff",
    138. "text": "Omicron"
    139. }
    140. ]
    141. };
    142.  
    143. zingchart.render({
    144. id: 'myChart',
    145. data: myConfig,
    146. height: 400,
    147. width: "100%"
    148. });
    149. </script>
    150. </body>
    151.  
    152. </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.  
    1. var myConfig = {
    2. "type": "pie",
    3. "title": {
    4. "text": "Value Boxes"
    5. },
    6. "subtitle": {
    7. "text": "with placement set to 'in' and 'out' based on the node value",
    8. "font-weight": "normal"
    9. },
    10. "plot": {
    11. "value-box": {
    12. "text": "%v",
    13. "font-size": 12,
    14. "font-family": "Georgia",
    15. "font-weight": "normal",
    16. "rules": [{
    17. "rule": "%v > 50",
    18. "placement": "in",
    19. "offset-r": "50%",
    20. "font-color": "white",
    21. },
    22. {
    23. "rule": "%v <= 50",
    24. "placement": "out",
    25. "font-color": "gray",
    26. }
    27. ]
    28. },
    29. "tooltip": {
    30. "text": "%t: %v (%npv%)",
    31. "font-color": "black",
    32. "font-family": "Georgia",
    33. "text-alpha": 1,
    34. "background-color": "white",
    35. "alpha": 0.7,
    36. "border-width": 1,
    37. "border-color": "#cccccc",
    38. "line-style": "dotted",
    39. "border-radius": "10px",
    40. "padding": "10%",
    41. "placement": "node:center"
    42. },
    43. "border-width": 1,
    44. "border-color": "#cccccc",
    45. "line-style": "dotted"
    46. },
    47. "plotarea": {
    48. "margin-top": "12%"
    49. },
    50. "series": [{
    51. "values": [234],
    52. "background-color": "#cc0000",
    53. "text": "Alpha"
    54. },
    55. {
    56. "values": [121],
    57. "background-color": "#ff3300",
    58. "text": "Beta"
    59. },
    60. {
    61. "values": [77],
    62. "background-color": "#ff6600",
    63. "text": "Gamma"
    64. },
    65. {
    66. "values": [65],
    67. "background-color": "#ff9933",
    68. "text": "Delta"
    69. },
    70. {
    71. "values": [59],
    72. "background-color": "#ffcc00",
    73. "text": "Epsilon"
    74. },
    75. {
    76. "values": [35],
    77. "background-color": "#ace600",
    78. "text": "Zeta"
    79. },
    80. {
    81. "values": [34],
    82. "background-color": "#88cc00",
    83. "text": "Eta"
    84. },
    85. {
    86. "values": [31],
    87. "background-color": "#339933",
    88. "text": "Theta"
    89. },
    90. {
    91. "values": [16],
    92. "background-color": "#66ccff",
    93. "text": "Iota"
    94. },
    95. {
    96. "values": [14],
    97. "background-color": "#3399ff",
    98. "text": "Kappa"
    99. },
    100. {
    101. "values": [13],
    102. "background-color": "#0066ff",
    103. "text": "Lambda"
    104. },
    105. {
    106. "values": [12],
    107. "background-color": "#3333cc",
    108. "text": "Mu"
    109. },
    110. {
    111. "values": [11],
    112. "background-color": "#6600ff",
    113. "text": "Nu"
    114. },
    115. {
    116. "values": [10],
    117. "background-color": "#9933ff",
    118. "text": "Xi"
    119. },
    120. {
    121. "values": [9],
    122. "background-color": "#9999ff",
    123. "text": "Omicron"
    124. }
    125. ]
    126. };
    127.  
    128. zingchart.render({
    129. id: 'myChart',
    130. data: myConfig,
    131. height: 400,
    132. width: "100%"
    133. });