• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingGrid: Blank Grid</title>
    7. <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. <style>
    9. html,
    10. body {
    11. height: 100%;
    12. width: 100%;
    13. margin: 0;
    14. padding: 0;
    15. }
    16.  
    17. .chart-parent--container {
    18. display: flex;
    19. }
    20.  
    21. .chart--container {
    22. height: 100%;
    23. width: 100%;
    24. min-height: 400px;
    25. }
    26.  
    27. .zc-ref {
    28. display: none;
    29. }
    30. </style>
    31. </head>
    32.  
    33. <body>
    34. <!-- CHART CONTAINER -->
    35. <div class="chart-parent--container">
    36. <div id="myChart" class="chart--container">
    37. <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    38. </div>
    39. <div id="myChart1" class="chart--container">
    40. <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    41. </div>
    42. </div>
    43. <script>
    44. ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    45. // because this Javascript is injected into the document head
    46. window.addEventListener('load', () => {
    47. // Javascript code to execute after DOM content
    48.  
    49. // full ZingChart schema can be found here:
    50. // https://www.zingchart.com/docs/api/json-configuration/
    51. const barConfig = {
    52. type: 'bar',
    53. globals: {
    54. fontSize: 14
    55. },
    56. title: {
    57. text: 'A Simple Bar Chart',
    58. fontSize: 24,
    59. // will force margin and padding on title
    60. // adjustLayout: true
    61. },
    62. legend: {
    63. draggable: true,
    64. // will force margin and padding on legen d
    65. // adjustLayout: true
    66. },
    67. scaleX: {
    68. // set scale label
    69. label: {
    70. text: 'Days'
    71. },
    72. // convert text on scale indices
    73. labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    74. },
    75. scaleY: {
    76. // scale label with unicode character
    77. label: {
    78. text: 'Temperature (°F)'
    79. }
    80. },
    81. // plot represents general series, or plots, styling
    82. plot: {
    83. valueBox: {
    84. placement: 'top-in',
    85. color: '#fff',
    86. },
    87. // hoverstate
    88. tooltip: {
    89. // turn individual point tooltip off
    90. // visible: false,
    91. padding: '10 15',
    92. borderRadius: 3,
    93. // % symbol represents a token to insert a value. Full list here:
    94. // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
    95. text: '%plot-text %kl was %v (&deg;F)',
    96. // htmlMode renders text attribute as html so
    97. // &deg; is rendered
    98. htmlMode: true,
    99. },
    100. // animation docs here:
    101. // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
    102. animation: {
    103. effect: 'ANIMATION_EXPAND_BOTTOM',
    104. method: 'ANIMATION_STRONG_EASE_OUT',
    105. sequence: 'ANIMATION_BY_NODE',
    106. speed: 275,
    107. }
    108. },
    109. series: [{
    110. // plot values
    111. values: [23, 20, 27, 29, 25, 17, 15],
    112. backgroundColor: '#64b5f6',
    113. text: 'Week 1',
    114. },
    115. {
    116. // plot values
    117. values: [35, 42, 33, 49, 35, 47, 35],
    118. backgroundColor: '#ffb74d',
    119. text: 'Week 2'
    120. }
    121. ]
    122. };
    123. const pieConfig = {
    124. type: 'pie',
    125. theme: 'dark',
    126. globals: {
    127. fontSize: 14
    128. },
    129. title: {
    130. text: 'A Simple Pie Chart',
    131. fontSize: 24,
    132. // will force margin and padding on title
    133. // adjustLayout: true
    134. },
    135. legend: {
    136. draggable: true,
    137. // will force margin and padding on legen d
    138. // adjustLayout: true
    139. },
    140. scaleR: {},
    141. // plot represents general series, or plots, styling
    142. plot: {
    143. // hoverstate
    144. tooltip: {
    145. // turn individual point tooltip off
    146. // visible: false,
    147. padding: '10 15',
    148. borderRadius: 3,
    149. // % symbol represents a token to insert a value. Full list here:
    150. // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
    151. text: '%plot-text %kl was %v (&deg;F)',
    152. // htmlMode renders text attribute as html so
    153. // &deg; is rendered
    154. htmlMode: true,
    155. },
    156. // animation docs here:
    157. // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
    158. animation: {
    159. effect: 'ANIMATION_EXPAND_BOTTOM',
    160. method: 'ANIMATION_STRONG_EASE_OUT',
    161. sequence: 'ANIMATION_BY_PLOT',
    162. speed: 275,
    163. }
    164. },
    165. series: [{
    166. // plot values
    167. values: [23],
    168. backgroundColor: '#ff4081',
    169. text: 'Day 1',
    170. },
    171. {
    172. // plot values
    173. values: [20],
    174. backgroundColor: '#e040fb',
    175. text: 'Day 2'
    176. },
    177. {
    178. // plot values
    179. values: [25],
    180. backgroundColor: '#448aff',
    181. text: 'Day 3'
    182. },
    183. {
    184. // plot values
    185. values: [25],
    186. backgroundColor: '#ff5252',
    187. text: 'Day 4'
    188. },
    189. {
    190. // plot values
    191. values: [25],
    192. backgroundColor: '#ff6e40',
    193. text: 'Day 5'
    194. },
    195. {
    196. // plot values
    197. values: [25],
    198. backgroundColor: '#69f0ae',
    199. text: 'Day 6'
    200. },
    201. {
    202. // plot values
    203. values: [25],
    204. backgroundColor: '#7c4dff',
    205. text: 'Day 7'
    206. }
    207. ]
    208. };
    209.  
    210. // render chart with width and height to
    211. // fill the parent container CSS dimensions
    212. zingchart.render({
    213. id: 'myChart',
    214. data: barConfig,
    215. height: '100%',
    216. width: '100%'
    217. });
    218. zingchart.render({
    219. id: 'myChart1',
    220. data: pieConfig,
    221. height: '100%',
    222. width: '100%'
    223. });
    224. });
    225. </script>
    226. </body>
    227.  
    228. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingGrid: Blank Grid</title>
    7. <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11. <!-- CHART CONTAINER -->
    12. <div class="chart-parent--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. <div id="myChart1" class="chart--container">
    17. <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    18. </div>
    19. </div>
    20. </body>
    21.  
    22. </html>
    1. html,
    2. body {
    3. height: 100%;
    4. width: 100%;
    5. margin: 0;
    6. padding: 0;
    7. }
    8.  
    9. .chart-parent--container {
    10. display: flex;
    11. }
    12.  
    13. .chart--container {
    14. height: 100%;
    15. width: 100%;
    16. min-height: 400px;
    17. }
    18.  
    19. .zc-ref {
    20. display: none;
    21. }
    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. const barConfig = {
    9. type: 'bar',
    10. globals: {
    11. fontSize: 14
    12. },
    13. title: {
    14. text: 'A Simple Bar Chart',
    15. fontSize: 24,
    16. // will force margin and padding on title
    17. // adjustLayout: true
    18. },
    19. legend: {
    20. draggable: true,
    21. // will force margin and padding on legen d
    22. // adjustLayout: true
    23. },
    24. scaleX: {
    25. // set scale label
    26. label: {
    27. text: 'Days'
    28. },
    29. // convert text on scale indices
    30. labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    31. },
    32. scaleY: {
    33. // scale label with unicode character
    34. label: {
    35. text: 'Temperature (°F)'
    36. }
    37. },
    38. // plot represents general series, or plots, styling
    39. plot: {
    40. valueBox: {
    41. placement: 'top-in',
    42. color: '#fff',
    43. },
    44. // hoverstate
    45. tooltip: {
    46. // turn individual point tooltip off
    47. // visible: false,
    48. padding: '10 15',
    49. borderRadius: 3,
    50. // % symbol represents a token to insert a value. Full list here:
    51. // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
    52. text: '%plot-text %kl was %v (&deg;F)',
    53. // htmlMode renders text attribute as html so
    54. // &deg; is rendered
    55. htmlMode: true,
    56. },
    57. // animation docs here:
    58. // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
    59. animation: {
    60. effect: 'ANIMATION_EXPAND_BOTTOM',
    61. method: 'ANIMATION_STRONG_EASE_OUT',
    62. sequence: 'ANIMATION_BY_NODE',
    63. speed: 275,
    64. }
    65. },
    66. series: [{
    67. // plot values
    68. values: [23, 20, 27, 29, 25, 17, 15],
    69. backgroundColor: '#64b5f6',
    70. text: 'Week 1',
    71. },
    72. {
    73. // plot values
    74. values: [35, 42, 33, 49, 35, 47, 35],
    75. backgroundColor: '#ffb74d',
    76. text: 'Week 2'
    77. }
    78. ]
    79. };
    80. const pieConfig = {
    81. type: 'pie',
    82. theme: 'dark',
    83. globals: {
    84. fontSize: 14
    85. },
    86. title: {
    87. text: 'A Simple Pie Chart',
    88. fontSize: 24,
    89. // will force margin and padding on title
    90. // adjustLayout: true
    91. },
    92. legend: {
    93. draggable: true,
    94. // will force margin and padding on legen d
    95. // adjustLayout: true
    96. },
    97. scaleR: {},
    98. // plot represents general series, or plots, styling
    99. plot: {
    100. // hoverstate
    101. tooltip: {
    102. // turn individual point tooltip off
    103. // visible: false,
    104. padding: '10 15',
    105. borderRadius: 3,
    106. // % symbol represents a token to insert a value. Full list here:
    107. // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
    108. text: '%plot-text %kl was %v (&deg;F)',
    109. // htmlMode renders text attribute as html so
    110. // &deg; is rendered
    111. htmlMode: true,
    112. },
    113. // animation docs here:
    114. // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
    115. animation: {
    116. effect: 'ANIMATION_EXPAND_BOTTOM',
    117. method: 'ANIMATION_STRONG_EASE_OUT',
    118. sequence: 'ANIMATION_BY_PLOT',
    119. speed: 275,
    120. }
    121. },
    122. series: [{
    123. // plot values
    124. values: [23],
    125. backgroundColor: '#ff4081',
    126. text: 'Day 1',
    127. },
    128. {
    129. // plot values
    130. values: [20],
    131. backgroundColor: '#e040fb',
    132. text: 'Day 2'
    133. },
    134. {
    135. // plot values
    136. values: [25],
    137. backgroundColor: '#448aff',
    138. text: 'Day 3'
    139. },
    140. {
    141. // plot values
    142. values: [25],
    143. backgroundColor: '#ff5252',
    144. text: 'Day 4'
    145. },
    146. {
    147. // plot values
    148. values: [25],
    149. backgroundColor: '#ff6e40',
    150. text: 'Day 5'
    151. },
    152. {
    153. // plot values
    154. values: [25],
    155. backgroundColor: '#69f0ae',
    156. text: 'Day 6'
    157. },
    158. {
    159. // plot values
    160. values: [25],
    161. backgroundColor: '#7c4dff',
    162. text: 'Day 7'
    163. }
    164. ]
    165. };
    166.  
    167. // render chart with width and height to
    168. // fill the parent container CSS dimensions
    169. zingchart.render({
    170. id: 'myChart',
    171. data: barConfig,
    172. height: '100%',
    173. width: '100%'
    174. });
    175. zingchart.render({
    176. id: 'myChart1',
    177. data: pieConfig,
    178. height: '100%',
    179. width: '100%'
    180. });
    181. });