• 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": "nestedpie",
    18. "title": {
    19. "text": "Animated Nested Pie Chart"
    20. },
    21. "legend": {
    22. "border-width": 1,
    23. "border-color": "gray",
    24. "border-radius": "5px",
    25. "line-style": "dashdot",
    26. "header": {
    27. "text": "Ages",
    28. "font-family": "Georgia",
    29. "font-size": 12,
    30. "font-color": "purple",
    31. "font-weight": "normal"
    32. },
    33. "item": {
    34. "font-color": "black",
    35. "font-family": "Georgia"
    36. },
    37. "marker": {
    38. "type": "circle"
    39. },
    40. "toggle-action": "remove",
    41. "minimize": true,
    42. "draggable": true,
    43. "drag-handler": "icon",
    44. "icon": {
    45. "line-color": "orange"
    46. }
    47. },
    48. "plot": {
    49. "animation": {
    50. "on-legend-toggle": true, //set to true to show animation and false to turn off
    51. "effect": 5,
    52. "method": 1,
    53. "sequence": 1,
    54. "speed": 1
    55. },
    56. "value-box": {
    57. "text": "%data-year",
    58. "font-color": "white",
    59. "font-family": "Georgia",
    60. "font-size": 12,
    61. "font-weight": "normal",
    62. "rules": [{
    63. "rule": "%p != 0",
    64. "visible": false
    65. }]
    66. },
    67. "data-year": ["2014", "2015", "2016"],
    68. "tooltip": {
    69. "text": "Ages %t: %v",
    70. "font-color": "black",
    71. "font-family": "Georgia",
    72. "font-size": 12,
    73. "background-color": "white",
    74. "border-width": 1,
    75. "border-color": "gray",
    76. "border-radius": "3px",
    77. "line-style": "dashdot",
    78. "padding": "10%",
    79. "text-alpha": 1,
    80. "alpha": 0.7
    81. },
    82. "alpha": 0.8,
    83. "shadow": false,
    84. "border-width": 1,
    85. "border-color": "white",
    86. "slice-start": "30%",
    87. },
    88. "series": [{
    89. "values": [59, 55, 30],
    90. "background-color": "orange red",
    91. "text": "0-18"
    92. },
    93. {
    94. "values": [60, 50, 35],
    95. "background-color": "yellow orange",
    96. "text": "19-30"
    97. },
    98. {
    99. "values": [50, 40, 30],
    100. "background-color": "green blue",
    101. "text": "31-34"
    102. },
    103. {
    104. "values": [61, 59, 35],
    105. "background-color": "blue purple",
    106. "text": "46-64"
    107. },
    108. {
    109. "values": [65, 55, 45],
    110. "background-color": "purple red",
    111. "text": "65 and over"
    112. }
    113. ]
    114. };
    115.  
    116. zingchart.render({
    117. id: 'myChart',
    118. data: myConfig,
    119. height: 400,
    120. width: "100%"
    121. });
    122. </script>
    123. </body>
    124.  
    125. </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": "nestedpie",
    3. "title": {
    4. "text": "Animated Nested Pie Chart"
    5. },
    6. "legend": {
    7. "border-width": 1,
    8. "border-color": "gray",
    9. "border-radius": "5px",
    10. "line-style": "dashdot",
    11. "header": {
    12. "text": "Ages",
    13. "font-family": "Georgia",
    14. "font-size": 12,
    15. "font-color": "purple",
    16. "font-weight": "normal"
    17. },
    18. "item": {
    19. "font-color": "black",
    20. "font-family": "Georgia"
    21. },
    22. "marker": {
    23. "type": "circle"
    24. },
    25. "toggle-action": "remove",
    26. "minimize": true,
    27. "draggable": true,
    28. "drag-handler": "icon",
    29. "icon": {
    30. "line-color": "orange"
    31. }
    32. },
    33. "plot": {
    34. "animation": {
    35. "on-legend-toggle": true, //set to true to show animation and false to turn off
    36. "effect": 5,
    37. "method": 1,
    38. "sequence": 1,
    39. "speed": 1
    40. },
    41. "value-box": {
    42. "text": "%data-year",
    43. "font-color": "white",
    44. "font-family": "Georgia",
    45. "font-size": 12,
    46. "font-weight": "normal",
    47. "rules": [{
    48. "rule": "%p != 0",
    49. "visible": false
    50. }]
    51. },
    52. "data-year": ["2014", "2015", "2016"],
    53. "tooltip": {
    54. "text": "Ages %t: %v",
    55. "font-color": "black",
    56. "font-family": "Georgia",
    57. "font-size": 12,
    58. "background-color": "white",
    59. "border-width": 1,
    60. "border-color": "gray",
    61. "border-radius": "3px",
    62. "line-style": "dashdot",
    63. "padding": "10%",
    64. "text-alpha": 1,
    65. "alpha": 0.7
    66. },
    67. "alpha": 0.8,
    68. "shadow": false,
    69. "border-width": 1,
    70. "border-color": "white",
    71. "slice-start": "30%",
    72. },
    73. "series": [{
    74. "values": [59, 55, 30],
    75. "background-color": "orange red",
    76. "text": "0-18"
    77. },
    78. {
    79. "values": [60, 50, 35],
    80. "background-color": "yellow orange",
    81. "text": "19-30"
    82. },
    83. {
    84. "values": [50, 40, 30],
    85. "background-color": "green blue",
    86. "text": "31-34"
    87. },
    88. {
    89. "values": [61, 59, 35],
    90. "background-color": "blue purple",
    91. "text": "46-64"
    92. },
    93. {
    94. "values": [65, 55, 45],
    95. "background-color": "purple red",
    96. "text": "65 and over"
    97. }
    98. ]
    99. };
    100.  
    101. zingchart.render({
    102. id: 'myChart',
    103. data: myConfig,
    104. height: 400,
    105. width: "100%"
    106. });