• 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. html,
    10. body {
    11. margin: 0;
    12. padding: 0;
    13. width: 100%;
    14. height: 100%;
    15. }
    16.  
    17. .chart--container {
    18. min-height: 150px;
    19. width: 100%;
    20. height: 100%;
    21. }
    22.  
    23. .zc-ref {
    24. display: none;
    25. }
    26. </style>
    27. </head>
    28.  
    29. <body>
    30. <!-- CHART CONTAINER -->
    31. <div id="myChart" class="chart--container">
    32. <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    33. </div>
    34. <script>
    35. ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    36. // because this Javascript is injected into the document head
    37. window.addEventListener('load', () => {
    38. // Javascript code to execute after DOM content
    39.  
    40. // full ZingChart schema can be found here:
    41. // https://www.zingchart.com/docs/api/json-configuration/
    42. let chartConfig = {
    43. type: 'bar',
    44. globals: {
    45. fontSize: '14px'
    46. },
    47. title: {
    48. text: 'A Simple Bar Chart',
    49. fontSize: '24px'
    50. },
    51. legend: {
    52. draggable: true
    53. },
    54. // plot represents general series, or plots, styling
    55. plot: {
    56. // hoverstate
    57. tooltip: {
    58. // % symbol represents a token to insert a value. Full list here:
    59. // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
    60. text: '%plot-text %kl was %v (&deg;F)',
    61. borderRadius: '3px',
    62. // htmlMode renders text attribute as html so
    63. // &deg; is rendered
    64. htmlMode: true
    65. },
    66. valueBox: {
    67. color: '#fff',
    68. placement: 'top-in'
    69. },
    70. // animation docs here:
    71. // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
    72. animation: {
    73. effect: 'ANIMATION_EXPAND_BOTTOM',
    74. method: 'ANIMATION_STRONG_EASE_OUT',
    75. sequence: 'ANIMATION_BY_NODE',
    76. speed: 275
    77. }
    78. },
    79. scaleX: {
    80. // set scale label
    81. label: {
    82. text: 'Days'
    83. },
    84. // convert text on scale indices
    85. labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    86. },
    87. scaleY: {
    88. // scale label with unicode character
    89. label: {
    90. text: 'Temperature (°F)'
    91. }
    92. },
    93. // plot values
    94. series: [{
    95. text: 'Week 1',
    96. values: [23, 20, 27, 29, 25, 17, 15],
    97. dataSingleValue: 'Global Value',
    98. // same length at values array
    99. dataMultipleValues: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
    100. backgroundColor: '#64b5f6'
    101. },
    102. {
    103. text: 'Week 2',
    104. values: [35, 42, 33, 49, 35, 47, 35],
    105. dataSingleValue: 'Global Value Dos',
    106. // same length at values array
    107. dataMultipleValues: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    108. backgroundColor: '#ffb74d'
    109. }
    110. ]
    111. };
    112.  
    113. zingchart.bind('myChart', 'node_click', (e) => {
    114. console.log(`Node Click: `, e);
    115. });
    116.  
    117. zingchart.bind('myChart', 'plot_click', (e) => {
    118. console.log(`Plot Click: `, e);
    119. });
    120.  
    121. // render chart
    122. zingchart.render({
    123. id: 'myChart',
    124. data: chartConfig,
    125. height: '100%',
    126. width: '100%',
    127. });
    128. });
    129. </script>
    130. </body>
    131.  
    132. </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. <!-- CHART CONTAINER -->
    12. <div id="myChart" class="chart--container">
    13. <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    14. </div>
    15. </body>
    16.  
    17. </html>
    1. html,
    2. body {
    3. margin: 0;
    4. padding: 0;
    5. width: 100%;
    6. height: 100%;
    7. }
    8.  
    9. .chart--container {
    10. min-height: 150px;
    11. width: 100%;
    12. height: 100%;
    13. }
    14.  
    15. .zc-ref {
    16. display: none;
    17. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4. // Javascript code to execute after DOM content
    5.  
    6. // full ZingChart schema can be found here:
    7. // https://www.zingchart.com/docs/api/json-configuration/
    8. let chartConfig = {
    9. type: 'bar',
    10. globals: {
    11. fontSize: '14px'
    12. },
    13. title: {
    14. text: 'A Simple Bar Chart',
    15. fontSize: '24px'
    16. },
    17. legend: {
    18. draggable: true
    19. },
    20. // plot represents general series, or plots, styling
    21. plot: {
    22. // hoverstate
    23. tooltip: {
    24. // % symbol represents a token to insert a value. Full list here:
    25. // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
    26. text: '%plot-text %kl was %v (&deg;F)',
    27. borderRadius: '3px',
    28. // htmlMode renders text attribute as html so
    29. // &deg; is rendered
    30. htmlMode: true
    31. },
    32. valueBox: {
    33. color: '#fff',
    34. placement: 'top-in'
    35. },
    36. // animation docs here:
    37. // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
    38. animation: {
    39. effect: 'ANIMATION_EXPAND_BOTTOM',
    40. method: 'ANIMATION_STRONG_EASE_OUT',
    41. sequence: 'ANIMATION_BY_NODE',
    42. speed: 275
    43. }
    44. },
    45. scaleX: {
    46. // set scale label
    47. label: {
    48. text: 'Days'
    49. },
    50. // convert text on scale indices
    51. labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    52. },
    53. scaleY: {
    54. // scale label with unicode character
    55. label: {
    56. text: 'Temperature (°F)'
    57. }
    58. },
    59. // plot values
    60. series: [{
    61. text: 'Week 1',
    62. values: [23, 20, 27, 29, 25, 17, 15],
    63. dataSingleValue: 'Global Value',
    64. // same length at values array
    65. dataMultipleValues: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
    66. backgroundColor: '#64b5f6'
    67. },
    68. {
    69. text: 'Week 2',
    70. values: [35, 42, 33, 49, 35, 47, 35],
    71. dataSingleValue: 'Global Value Dos',
    72. // same length at values array
    73. dataMultipleValues: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    74. backgroundColor: '#ffb74d'
    75. }
    76. ]
    77. };
    78.  
    79. zingchart.bind('myChart', 'node_click', (e) => {
    80. console.log(`Node Click: `, e);
    81. });
    82.  
    83. zingchart.bind('myChart', 'plot_click', (e) => {
    84. console.log(`Plot Click: `, e);
    85. });
    86.  
    87. // render chart
    88. zingchart.render({
    89. id: 'myChart',
    90. data: chartConfig,
    91. height: '100%',
    92. width: '100%',
    93. });
    94. });