• 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--container {
    18. height: 100%;
    19. width: 100%;
    20. min-height: 150px;
    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. const myConfig = {
    43. type: 'bar',
    44. title: {
    45. text: 'Data Basics - [x,y] Timeseries Data',
    46. fontSize: 24,
    47. },
    48. scaleX: {
    49. // set scale label
    50. label: {
    51. text: 'Date'
    52. },
    53. zooming: true,
    54. // enable auto-date formatting
    55. transform: {
    56. type: 'date',
    57. },
    58. },
    59. // enable scrollbar
    60. scrollX: {},
    61. // enable click and drag window
    62. preview: {
    63. adjustLayout: true,
    64. },
    65. scaleY: {
    66. // scale label with unicode character
    67. label: {
    68. text: 'Value'
    69. },
    70. // enable abbreviated units
    71. short: true,
    72. },
    73. // set margins for labels around chart
    74. plotarea: {
    75. margin: '40 dynamic dynamic dynamic'
    76. },
    77. series: [{
    78. values: [
    79. [1147651200000, 18921051],
    80. [1147737600000, 33470860],
    81. [1147824000000, 26941146],
    82. [1147910400000, 23524811],
    83. [1147996800000, 35221586],
    84. [1148256000000, 25680800],
    85. [1148342400000, 24814061],
    86. [1148428800000, 32722949],
    87. [1148515200000, 16563319],
    88. [1148601600000, 15464811],
    89. [1148947200000, 20125338],
    90. [1149033600000, 45755325],
    91. [1149120000000, 33669043],
    92. [1149206400000, 24496720],
    93. [1149465600000, 21639826],
    94. [1149552000000, 25933308],
    95. [1149638400000, 26813938],
    96. [1149724800000, 49911361],
    97. [1149811200000, 27712815],
    98. [1150070400000, 25642234],
    99. [1150156800000, 38605066],
    100. [1150243200000, 31371508],
    101. [1150329600000, 42519228],
    102. [1150416000000, 29939223],
    103. [1150675200000, 25773905],
    104. [1150761600000, 24036581],
    105. [1150848000000, 30856077],
    106. [1150934400000, 34551392],
    107. [1151020800000, 23578607],
    108. [1151280000000, 16661904],
    109. [1151366400000, 19665400],
    110. [1151452800000, 30395258],
    111. [1151539200000, 31258941],
    112. [1151625600000, 26451164],
    113. [1151884800000, 6956169],
    114. [1152057600000, 18530216],
    115. [1152144000000, 22620152],
    116. [1152230400000, 28549502],
    117. [1152489600000, 18971433],
    118. [1152576000000, 29477035],
    119. [1152662400000, 33118840],
    120. [1152748800000, 44639492],
    121. [1152835200000, 35465535],
    122. [1153094400000, 36594798],
    123. [1153180800000, 35755729],
    124. [1153267200000, 50133874],
    125. [1153353600000, 70446830],
    126. [1153440000000, 31860034],
    127. [1153699200000, 25821004],
    128. [1153785600000, 21045822],
    129. [1153872000000, 32093907],
    130. ],
    131. text: 'Week 1',
    132. }, ]
    133. };
    134.  
    135. // render chart with width and height to
    136. // fill the parent container CSS dimensions
    137. zingchart.render({
    138. id: 'myChart',
    139. data: myConfig,
    140. height: '100%',
    141. width: '100%'
    142. });
    143. });
    144. </script>
    145. </body>
    146.  
    147. </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 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. 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. // 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 myConfig = {
    9. type: 'bar',
    10. title: {
    11. text: 'Data Basics - [x,y] Timeseries Data',
    12. fontSize: 24,
    13. },
    14. scaleX: {
    15. // set scale label
    16. label: {
    17. text: 'Date'
    18. },
    19. zooming: true,
    20. // enable auto-date formatting
    21. transform: {
    22. type: 'date',
    23. },
    24. },
    25. // enable scrollbar
    26. scrollX: {},
    27. // enable click and drag window
    28. preview: {
    29. adjustLayout: true,
    30. },
    31. scaleY: {
    32. // scale label with unicode character
    33. label: {
    34. text: 'Value'
    35. },
    36. // enable abbreviated units
    37. short: true,
    38. },
    39. // set margins for labels around chart
    40. plotarea: {
    41. margin: '40 dynamic dynamic dynamic'
    42. },
    43. series: [{
    44. values: [
    45. [1147651200000, 18921051],
    46. [1147737600000, 33470860],
    47. [1147824000000, 26941146],
    48. [1147910400000, 23524811],
    49. [1147996800000, 35221586],
    50. [1148256000000, 25680800],
    51. [1148342400000, 24814061],
    52. [1148428800000, 32722949],
    53. [1148515200000, 16563319],
    54. [1148601600000, 15464811],
    55. [1148947200000, 20125338],
    56. [1149033600000, 45755325],
    57. [1149120000000, 33669043],
    58. [1149206400000, 24496720],
    59. [1149465600000, 21639826],
    60. [1149552000000, 25933308],
    61. [1149638400000, 26813938],
    62. [1149724800000, 49911361],
    63. [1149811200000, 27712815],
    64. [1150070400000, 25642234],
    65. [1150156800000, 38605066],
    66. [1150243200000, 31371508],
    67. [1150329600000, 42519228],
    68. [1150416000000, 29939223],
    69. [1150675200000, 25773905],
    70. [1150761600000, 24036581],
    71. [1150848000000, 30856077],
    72. [1150934400000, 34551392],
    73. [1151020800000, 23578607],
    74. [1151280000000, 16661904],
    75. [1151366400000, 19665400],
    76. [1151452800000, 30395258],
    77. [1151539200000, 31258941],
    78. [1151625600000, 26451164],
    79. [1151884800000, 6956169],
    80. [1152057600000, 18530216],
    81. [1152144000000, 22620152],
    82. [1152230400000, 28549502],
    83. [1152489600000, 18971433],
    84. [1152576000000, 29477035],
    85. [1152662400000, 33118840],
    86. [1152748800000, 44639492],
    87. [1152835200000, 35465535],
    88. [1153094400000, 36594798],
    89. [1153180800000, 35755729],
    90. [1153267200000, 50133874],
    91. [1153353600000, 70446830],
    92. [1153440000000, 31860034],
    93. [1153699200000, 25821004],
    94. [1153785600000, 21045822],
    95. [1153872000000, 32093907],
    96. ],
    97. text: 'Week 1',
    98. }, ]
    99. };
    100.  
    101. // render chart with width and height to
    102. // fill the parent container CSS dimensions
    103. zingchart.render({
    104. id: 'myChart',
    105. data: myConfig,
    106. height: '100%',
    107. width: '100%'
    108. });
    109. });