• 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. "labels": [{
    19. "text": "What's blue?",
    20. "font-family": "Georgia",
    21. "font-size": "16",
    22. "x": "60%",
    23. "y": "20%"
    24. },
    25. {
    26. "text": "Blueberries",
    27. "font-color": "#29A2CC",
    28. "font-family": "Georgia",
    29. "font-size": "36",
    30. "x": "60%",
    31. "y": "26%"
    32. },
    33. {
    34. "background-image": "//www.zingchart.com/images/blueberry.jpg",
    35. "background-fit": "xy",
    36. "url": "http://www.whfoods.com/genpage.php?tname=foodspice&dbid=8",
    37. "target": "_blank",
    38. "x": "60%",
    39. "y": "40%",
    40. "height": "30%",
    41. "width": "30%"
    42. },
    43. {
    44. "text": "(Click the blueberries.)",
    45. "font-family": "Georgia",
    46. "font-size": 10,
    47. "x": "60%",
    48. "y": "71%",
    49. }
    50. ],
    51. "plot": {
    52. "value-box": {
    53. "placement": "out",
    54. "offset-r": "-10",
    55. "font-family": "Georgia",
    56. "font-size": 12,
    57. "font-weight": "normal"
    58. }
    59. },
    60. "plotarea": {
    61. "margin-right": "45%",
    62. "margin-top": "20%",
    63. "margin-bottom": "20%"
    64. },
    65. "series": [{
    66. "values": [34]
    67. },
    68. {
    69. "values": [30]
    70. },
    71. {
    72. "values": [15]
    73. },
    74. {
    75. "values": [14]
    76. },
    77. {
    78. "values": [5]
    79. }
    80. ]
    81. };
    82.  
    83. zingchart.render({
    84. id: 'myChart',
    85. data: myConfig,
    86. height: 400,
    87. width: "100%"
    88. });
    89. </script>
    90. </body>
    91.  
    92. </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. "labels": [{
    4. "text": "What's blue?",
    5. "font-family": "Georgia",
    6. "font-size": "16",
    7. "x": "60%",
    8. "y": "20%"
    9. },
    10. {
    11. "text": "Blueberries",
    12. "font-color": "#29A2CC",
    13. "font-family": "Georgia",
    14. "font-size": "36",
    15. "x": "60%",
    16. "y": "26%"
    17. },
    18. {
    19. "background-image": "//www.zingchart.com/images/blueberry.jpg",
    20. "background-fit": "xy",
    21. "url": "http://www.whfoods.com/genpage.php?tname=foodspice&dbid=8",
    22. "target": "_blank",
    23. "x": "60%",
    24. "y": "40%",
    25. "height": "30%",
    26. "width": "30%"
    27. },
    28. {
    29. "text": "(Click the blueberries.)",
    30. "font-family": "Georgia",
    31. "font-size": 10,
    32. "x": "60%",
    33. "y": "71%",
    34. }
    35. ],
    36. "plot": {
    37. "value-box": {
    38. "placement": "out",
    39. "offset-r": "-10",
    40. "font-family": "Georgia",
    41. "font-size": 12,
    42. "font-weight": "normal"
    43. }
    44. },
    45. "plotarea": {
    46. "margin-right": "45%",
    47. "margin-top": "20%",
    48. "margin-bottom": "20%"
    49. },
    50. "series": [{
    51. "values": [34]
    52. },
    53. {
    54. "values": [30]
    55. },
    56. {
    57. "values": [15]
    58. },
    59. {
    60. "values": [14]
    61. },
    62. {
    63. "values": [5]
    64. }
    65. ]
    66. };
    67.  
    68. zingchart.render({
    69. id: 'myChart',
    70. data: myConfig,
    71. height: 400,
    72. width: "100%"
    73. });