• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingSoft Demo</title>
    7. <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. <style>
    9. .zc-ref {
    10. display: none;
    11. }
    12. </style>
    13. </head>
    14.  
    15. <body>
    16. <div id="myChart" class="chart--container">
    17. <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    18. </div>
    19. <div id='drilldown1' class="chart--container">
    20. <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    21. </div>
    22. <script>
    23. ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    24. let chartConfig = {
    25. "type": "pie",
    26. "title": {
    27. "text": "Aggregate",
    28. "fontColor": "#333333",
    29. "fontSize": 14,
    30. "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif;",
    31. "fontWeight": 300,
    32. "position": "50% 100%"
    33. },
    34. "noData": {
    35. "text": "Currently there is no data in the chart",
    36. "fontColor": "#333333",
    37. "fontSize": 18,
    38. "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif;",
    39. "fontWeight": 300
    40. },
    41. "plotarea": {
    42. "margin": "0px 0px 12px 0px"
    43. },
    44. "series": [{
    45. "values": [2],
    46. "text": "Christian",
    47. "backgroundColor": " #00bcd4",
    48. "data-background-color": " #00bcd4",
    49. "data-legend-name": "Christian"
    50. },
    51. {
    52. "values": [2],
    53. "text": "Buddhist",
    54. "backgroundColor": " #f44336",
    55. "data-background-color": " #f44336",
    56. "data-legend-name": "Buddhist"
    57. },
    58. // {
    59. // "values": [0],
    60. // "text": "Catholic",
    61. // "backgroundColor": " #9c27b0",
    62. // "data-background-color": " #9c27b0",
    63. // "data-legend-name": "Catholic"
    64. // },
    65. {
    66. "values": [2],
    67. "text": "Catholic - Confirmed",
    68. "backgroundColor": " #4caf50",
    69. "data-background-color": " #4caf50",
    70. "data-legend-name": "Catholic - Confirmed"
    71. },
    72. {
    73. "values": [0],
    74. "text": "Sikh",
    75. "backgroundColor": " #337ab7",
    76. "data-background-color": " #337ab7",
    77. "data-legend-name": "Sikh"
    78. },
    79. {
    80. "values": [0],
    81. "text": "Unknown",
    82. "backgroundColor": " #ff9800",
    83. "data-background-color": " #ff9800",
    84. "data-legend-name": "Unknown"
    85. }
    86. ],
    87. "plot": {
    88. "detach": false,
    89. "tooltip": {
    90. "alpha": 1,
    91. "text": "<div class=\"pie-chart-tooltip text-center\" style=\"border-color:%color\"><span style=\"color:%data-background-color\">%t <br/> %v | %npv%</span</div>",
    92. "fontColor": "#333333",
    93. "fontSize": 14,
    94. "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif;",
    95. "fontWeight": 300,
    96. "borderWidth": 0,
    97. "borderRadius": 8,
    98. "placement": "node:out",
    99. "backgroundColor": "#ffffff",
    100. "padding": "0",
    101. "htmlMode": true,
    102. "decimals": 0
    103. },
    104. "slice": 70,
    105. "valueBox": {
    106. "text": "%npv%",
    107. "fontColor": "white",
    108. "fontSize": 14,
    109. "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif;",
    110. "fontWeight": 400,
    111. "decimals": 0,
    112. "connector": {
    113. "lineColor": "#616161"
    114. },
    115. "rules": [{
    116. "text": "%npv",
    117. "rule": "%node-value == 0",
    118. "-rule": "%npv <= 0.0",
    119. "visible": false
    120. }]
    121. },
    122. "rules": [{
    123. "text": "%p",
    124. "rule": "%node-value == 0",
    125. "-rule": "%p <= 0.0",
    126. "visible": false
    127. }],
    128. "cursor": "hand"
    129. },
    130. "labels": [{
    131. "fontWeight": 500,
    132. "anchor": "c",
    133. "x": "50%",
    134. "y": "47%",
    135. "fontSize": 32,
    136. "text": "6"
    137. }],
    138. "gui": {
    139. "contextMenu": {
    140. "backgroundColor": "white",
    141. "item": {
    142. "backgroundColor": "white",
    143. "fontColor": "black",
    144. "hoverState": {
    145. "backgroundColor": "black",
    146. "fontColor": "grey"
    147. }
    148. }
    149. },
    150. "behaviors": [{
    151. "id": "Reload",
    152. "enabled": "none"
    153. },
    154. {
    155. "id": "SaveAsImage",
    156. "enabled": "none"
    157. },
    158. {
    159. "id": "DownloadPDF",
    160. "enabled": "none"
    161. },
    162. {
    163. "id": "DownloadSVG",
    164. "enabled": "none"
    165. },
    166. {
    167. "id": "DownloadCSV",
    168. "enabled": "none"
    169. },
    170. {
    171. "id": "DownloadXLS",
    172. "enabled": "none"
    173. },
    174. {
    175. "id": "ViewDataTable",
    176. "enabled": "none"
    177. },
    178. {
    179. "id": "Print",
    180. "enabled": "none"
    181. },
    182. {
    183. "id": "ViewSource",
    184. "enabled": "none"
    185. },
    186. {
    187. "id": "About ZingChart",
    188. "enabled": "none"
    189. },
    190. {
    191. "id": "ZoomIn",
    192. "enabled": "none"
    193. },
    194. {
    195. "id": "ZoomOut",
    196. "enabled": "none"
    197. },
    198. {
    199. "id": "ViewAll",
    200. "enabled": "none"
    201. },
    202. {
    203. "id": "HideGuide",
    204. "enabled": "none"
    205. }
    206. ]
    207. }
    208. };
    209. zingchart.render({
    210. id: 'myChart',
    211. data: chartConfig,
    212. height: '450px',
    213. width: '100%',
    214. });
    215. </script>
    216. </body>
    217.  
    218. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingSoft Demo</title>
    7. <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11. <div id="myChart" class="chart--container">
    12. <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    13. </div>
    14. <div id='drilldown1' class="chart--container">
    15. <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    16. </div>
    17. </body>
    18.  
    19. </html>
    1. .zc-ref {
    2. display: none;
    3. }
    1. let chartConfig = {
    2. "type": "pie",
    3. "title": {
    4. "text": "Aggregate",
    5. "fontColor": "#333333",
    6. "fontSize": 14,
    7. "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif;",
    8. "fontWeight": 300,
    9. "position": "50% 100%"
    10. },
    11. "noData": {
    12. "text": "Currently there is no data in the chart",
    13. "fontColor": "#333333",
    14. "fontSize": 18,
    15. "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif;",
    16. "fontWeight": 300
    17. },
    18. "plotarea": {
    19. "margin": "0px 0px 12px 0px"
    20. },
    21. "series": [{
    22. "values": [2],
    23. "text": "Christian",
    24. "backgroundColor": " #00bcd4",
    25. "data-background-color": " #00bcd4",
    26. "data-legend-name": "Christian"
    27. },
    28. {
    29. "values": [2],
    30. "text": "Buddhist",
    31. "backgroundColor": " #f44336",
    32. "data-background-color": " #f44336",
    33. "data-legend-name": "Buddhist"
    34. },
    35. // {
    36. // "values": [0],
    37. // "text": "Catholic",
    38. // "backgroundColor": " #9c27b0",
    39. // "data-background-color": " #9c27b0",
    40. // "data-legend-name": "Catholic"
    41. // },
    42. {
    43. "values": [2],
    44. "text": "Catholic - Confirmed",
    45. "backgroundColor": " #4caf50",
    46. "data-background-color": " #4caf50",
    47. "data-legend-name": "Catholic - Confirmed"
    48. },
    49. {
    50. "values": [0],
    51. "text": "Sikh",
    52. "backgroundColor": " #337ab7",
    53. "data-background-color": " #337ab7",
    54. "data-legend-name": "Sikh"
    55. },
    56. {
    57. "values": [0],
    58. "text": "Unknown",
    59. "backgroundColor": " #ff9800",
    60. "data-background-color": " #ff9800",
    61. "data-legend-name": "Unknown"
    62. }
    63. ],
    64. "plot": {
    65. "detach": false,
    66. "tooltip": {
    67. "alpha": 1,
    68. "text": "<div class=\"pie-chart-tooltip text-center\" style=\"border-color:%color\"><span style=\"color:%data-background-color\">%t <br/> %v | %npv%</span</div>",
    69. "fontColor": "#333333",
    70. "fontSize": 14,
    71. "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif;",
    72. "fontWeight": 300,
    73. "borderWidth": 0,
    74. "borderRadius": 8,
    75. "placement": "node:out",
    76. "backgroundColor": "#ffffff",
    77. "padding": "0",
    78. "htmlMode": true,
    79. "decimals": 0
    80. },
    81. "slice": 70,
    82. "valueBox": {
    83. "text": "%npv%",
    84. "fontColor": "white",
    85. "fontSize": 14,
    86. "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif;",
    87. "fontWeight": 400,
    88. "decimals": 0,
    89. "connector": {
    90. "lineColor": "#616161"
    91. },
    92. "rules": [{
    93. "text": "%npv",
    94. "rule": "%node-value == 0",
    95. "-rule": "%npv <= 0.0",
    96. "visible": false
    97. }]
    98. },
    99. "rules": [{
    100. "text": "%p",
    101. "rule": "%node-value == 0",
    102. "-rule": "%p <= 0.0",
    103. "visible": false
    104. }],
    105. "cursor": "hand"
    106. },
    107. "labels": [{
    108. "fontWeight": 500,
    109. "anchor": "c",
    110. "x": "50%",
    111. "y": "47%",
    112. "fontSize": 32,
    113. "text": "6"
    114. }],
    115. "gui": {
    116. "contextMenu": {
    117. "backgroundColor": "white",
    118. "item": {
    119. "backgroundColor": "white",
    120. "fontColor": "black",
    121. "hoverState": {
    122. "backgroundColor": "black",
    123. "fontColor": "grey"
    124. }
    125. }
    126. },
    127. "behaviors": [{
    128. "id": "Reload",
    129. "enabled": "none"
    130. },
    131. {
    132. "id": "SaveAsImage",
    133. "enabled": "none"
    134. },
    135. {
    136. "id": "DownloadPDF",
    137. "enabled": "none"
    138. },
    139. {
    140. "id": "DownloadSVG",
    141. "enabled": "none"
    142. },
    143. {
    144. "id": "DownloadCSV",
    145. "enabled": "none"
    146. },
    147. {
    148. "id": "DownloadXLS",
    149. "enabled": "none"
    150. },
    151. {
    152. "id": "ViewDataTable",
    153. "enabled": "none"
    154. },
    155. {
    156. "id": "Print",
    157. "enabled": "none"
    158. },
    159. {
    160. "id": "ViewSource",
    161. "enabled": "none"
    162. },
    163. {
    164. "id": "About ZingChart",
    165. "enabled": "none"
    166. },
    167. {
    168. "id": "ZoomIn",
    169. "enabled": "none"
    170. },
    171. {
    172. "id": "ZoomOut",
    173. "enabled": "none"
    174. },
    175. {
    176. "id": "ViewAll",
    177. "enabled": "none"
    178. },
    179. {
    180. "id": "HideGuide",
    181. "enabled": "none"
    182. }
    183. ]
    184. }
    185. };
    186. zingchart.render({
    187. id: 'myChart',
    188. data: chartConfig,
    189. height: '450px',
    190. width: '100%',
    191. });