• 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. height: 100%;
    13. width: 100%;
    14. margin: 0;
    15. padding: 0;
    16. }
    17.  
    18. .chart--container {
    19. height: 100%;
    20. width: 100%;
    21. min-height: 150px;
    22. }
    23.  
    24. .zc-ref {
    25. display: none;
    26. }
    27. </style>
    28. </head>
    29.  
    30. <body>
    31. <!-- CHART CONTAINER -->
    32. <div id="myChart" class="chart--container">
    33. <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    34. </div>
    35. <script>
    36. ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    37. let chartConfig = {
    38. /* Graphset array */
    39. graphset: [{
    40. /* Object containing chart data */
    41. type: 'line',
    42. /* Size your chart using height/width attributes */
    43. height: '200px',
    44. width: '100%',
    45. /* Position your chart using x/y attributes */
    46. x: '5%',
    47. y: '5%',
    48. series: [{
    49. values: [76, 23, 15, 85, 13]
    50. },
    51. {
    52. values: [36, 53, 65, 25, 45]
    53. }
    54. ]
    55. },
    56. {
    57. /* Object containing chart data */
    58. type: 'funnel',
    59. height: '55%',
    60. width: '50%',
    61. x: '5%',
    62. y: '200px',
    63. series: [{
    64. values: [30]
    65. },
    66. {
    67. values: [15]
    68. },
    69. {
    70. values: [5]
    71. },
    72. {
    73. values: [3]
    74. }
    75. ]
    76. },
    77. {
    78. type: 'pie',
    79. height: '55%',
    80. width: '50%',
    81. x: '50%',
    82. y: '200px',
    83. series: [{
    84. values: [15]
    85. },
    86. {
    87. values: [30]
    88. },
    89. {
    90. values: [34]
    91. }
    92. ]
    93. }
    94. ]
    95. };
    96.  
    97.  
    98. // render chart with width and height to
    99. // fill the parent container CSS dimensions
    100. zingchart.render({
    101. id: 'myChart',
    102. data: chartConfig,
    103. height: '100%',
    104. width: '100%',
    105. });
    106. </script>
    107. </body>
    108.  
    109. </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. <!-- CHART CONTAINER -->
    13. <div id="myChart" class="chart--container">
    14. <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    15. </div>
    16. </body>
    17.  
    18. </html>
    1. html,
    2. body {
    3. height: 100%;
    4. width: 100%;
    5. margin: 0;
    6. padding: 0;
    7. }
    8.  
    9. .chart--container {
    10. height: 100%;
    11. width: 100%;
    12. min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16. display: none;
    17. }
    1. let chartConfig = {
    2. /* Graphset array */
    3. graphset: [{
    4. /* Object containing chart data */
    5. type: 'line',
    6. /* Size your chart using height/width attributes */
    7. height: '200px',
    8. width: '100%',
    9. /* Position your chart using x/y attributes */
    10. x: '5%',
    11. y: '5%',
    12. series: [{
    13. values: [76, 23, 15, 85, 13]
    14. },
    15. {
    16. values: [36, 53, 65, 25, 45]
    17. }
    18. ]
    19. },
    20. {
    21. /* Object containing chart data */
    22. type: 'funnel',
    23. height: '55%',
    24. width: '50%',
    25. x: '5%',
    26. y: '200px',
    27. series: [{
    28. values: [30]
    29. },
    30. {
    31. values: [15]
    32. },
    33. {
    34. values: [5]
    35. },
    36. {
    37. values: [3]
    38. }
    39. ]
    40. },
    41. {
    42. type: 'pie',
    43. height: '55%',
    44. width: '50%',
    45. x: '50%',
    46. y: '200px',
    47. series: [{
    48. values: [15]
    49. },
    50. {
    51. values: [30]
    52. },
    53. {
    54. values: [34]
    55. }
    56. ]
    57. }
    58. ]
    59. };
    60.  
    61.  
    62. // render chart with width and height to
    63. // fill the parent container CSS dimensions
    64. zingchart.render({
    65. id: 'myChart',
    66. data: chartConfig,
    67. height: '100%',
    68. width: '100%',
    69. });