• 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. let chartConfig = {
    17. type: 'calendar',
    18. options: {
    19. week: { // Configure the styling by column.
    20. items: { // Use this object to style the cells by column (1-54).
    21. 'w-1': {
    22. backgroundColor: 'red'
    23. },
    24. 'w-2': {
    25. backgroundColor: 'red'
    26. },
    27. 'w-3': {
    28. backgroundColor: 'red'
    29. },
    30. 'w-51': {
    31. backgroundColor: 'red'
    32. },
    33. 'w-52': {
    34. backgroundColor: 'red'
    35. },
    36. 'w-53': {
    37. backgroundColor: 'red'
    38. }
    39. }
    40. },
    41.  
    42. year: {
    43. text: '2016',
    44. },
    45. values: [
    46. // ['2016-01-01', 3],
    47. // ['2016-01-04', 12],
    48. // ['2016-01-05', 3],
    49. // ['2016-01-06', 4],
    50. // ['2016-01-07', 9],
    51. // ['2016-01-08', 11],
    52. // ['2016-01-11', 5],
    53. // ['2016-01-12', 5],
    54. // ['2016-01-13', 9],
    55. // ['2016-01-14', 9],
    56. // ['2016-01-15', 9],
    57. ['2016-01-18', 4],
    58. ['2016-01-19', 6],
    59. ['2016-01-20', 5],
    60. ['2016-01-21', 6],
    61. ['2016-01-22', 2],
    62. ['2016-01-25', 5],
    63. ['2016-01-26', 9],
    64. ['2016-01-27', 6],
    65. ['2016-01-28', 6],
    66. ['2016-01-29', 7],
    67. ['2016-02-01', 7],
    68. ['2016-02-02', 12],
    69. ['2016-02-03', 3],
    70. ['2016-02-04', 3],
    71. ['2016-02-05', 9],
    72. ['2016-02-08', 9],
    73. ['2016-02-09', 9],
    74. ['2016-02-10', 4],
    75. ['2016-02-11', 5],
    76. ['2016-02-12', 8],
    77. ['2016-02-15', 8],
    78. ['2016-02-16', 3],
    79. ['2016-02-17', 7],
    80. ['2016-02-18', 5],
    81. ['2016-02-19', 9],
    82. ['2016-02-22', 6],
    83. ['2016-02-23', 5],
    84. ['2016-02-24', 8],
    85. ['2016-02-25', 10],
    86. ['2016-02-26', 4],
    87. ['2016-02-29', 5],
    88. ['2016-03-01', 9],
    89. ['2016-03-02', 9],
    90. ['2016-03-03', 3],
    91. ['2016-03-04', 3],
    92. ['2016-03-07', 4],
    93. ['2016-03-08', 2],
    94. ['2016-03-09', 10],
    95. ['2016-03-10', 9],
    96. ['2016-03-11', 7],
    97. ['2016-03-14', 8],
    98. ['2016-03-15', 7],
    99. ['2016-03-16', 8],
    100. ['2016-03-17', 8],
    101. ['2016-03-18', 2],
    102. ['2016-03-21', 3],
    103. ['2016-03-22', 4],
    104. ['2016-03-23', 5],
    105. ['2016-03-24', 6],
    106. ['2016-03-25', 7],
    107. ['2016-03-28', 8],
    108. ['2016-03-29', 8],
    109. ['2016-03-30', 9],
    110. ['2016-03-31', 7],
    111. ['2016-04-01', 9],
    112. ['2016-04-04', 7],
    113. ['2016-04-05', 5],
    114. ['2016-04-06', 6],
    115. ['2016-04-07', 9],
    116. ['2016-04-08', 4],
    117. ['2016-04-11', 8],
    118. ['2016-04-12', 9],
    119. ['2016-04-13', 3],
    120. ['2016-04-14', 5],
    121. ['2016-04-15', 5],
    122. ['2016-04-18', 8],
    123. ['2016-04-19', 8],
    124. ['2016-04-20', 9],
    125. ['2016-04-21', 3],
    126. ['2016-04-22', 6],
    127. ['2016-04-25', 12],
    128. ['2016-04-26', 6],
    129. ['2016-04-27', 5],
    130. ['2016-04-28', 5],
    131. ['2016-04-29', 11],
    132. ['2016-05-02', 9],
    133. ['2016-05-03', 3],
    134. ['2016-05-04', 5],
    135. ['2016-05-05', 4],
    136. ['2016-05-06', 9],
    137. ['2016-05-09', 5],
    138. ['2016-05-10', 5],
    139. ['2016-05-11', 7],
    140. ['2016-05-12', 7],
    141. ['2016-05-13', 5],
    142. ['2016-05-16', 3],
    143. ['2016-05-17', 2],
    144. ['2016-05-18', 7],
    145. ['2016-05-19', 5],
    146. ['2016-05-20', 3],
    147. ['2016-05-23', 9],
    148. ['2016-05-24', 11],
    149. ['2016-05-25', 5],
    150. ['2016-05-26', 9],
    151. ['2016-05-27', 4],
    152. ['2016-05-30', 5],
    153. ['2016-05-31', 7],
    154. ['2016-06-01', 9],
    155. ['2016-06-02', 5],
    156. ['2016-06-03', 5],
    157. ['2016-06-06', 6],
    158. ['2016-06-07', 7],
    159. ['2016-06-08', 8],
    160. ['2016-06-09', 5],
    161. ['2016-06-10', 8],
    162. ['2016-06-13', 6],
    163. ['2016-06-14', 6],
    164. ['2016-06-15', 2],
    165. ['2016-06-16', 7],
    166. ['2016-06-17', 5],
    167. ['2016-06-20', 5],
    168. ['2016-06-21', 8],
    169. ['2016-06-22', 8],
    170. ['2016-06-23', 8],
    171. ['2016-06-24', 10],
    172. ['2016-06-27', 7],
    173. ['2016-06-28', 12],
    174. ['2016-06-29', 7],
    175. ['2016-06-30', 6],
    176. ['2016-07-01', 12],
    177. ['2016-07-04', 3],
    178. ['2016-07-05', 4],
    179. ['2016-07-06', 9],
    180. ['2016-07-07', 11],
    181. ['2016-07-08', 5],
    182. ['2016-07-11', 5],
    183. ['2016-07-12', 9],
    184. ['2016-07-13', 9],
    185. ['2016-07-14', 9],
    186. ['2016-07-15', 4],
    187. ['2016-07-18', 6],
    188. ['2016-07-19', 5],
    189. ['2016-07-20', 6],
    190. ['2016-07-21', 2],
    191. ['2016-07-22', 5],
    192. ['2016-07-25', 9],
    193. ['2016-07-26', 6],
    194. ['2016-07-27', 6],
    195. ['2016-07-28', 7],
    196. ['2016-07-29', 7],
    197. ['2016-08-01', 12],
    198. ['2016-08-02', 3],
    199. ['2016-08-03', 3],
    200. ['2016-08-04', 9],
    201. ['2016-08-05', 9],
    202. ['2016-08-08', 9],
    203. ['2016-08-09', 4],
    204. ['2016-08-10', 5],
    205. ['2016-08-11', 8],
    206. ['2016-08-12', 8],
    207. ['2016-08-15', 3],
    208. ['2016-08-16', 7],
    209. ['2016-08-17', 5],
    210. ['2016-08-18', 9],
    211. ['2016-08-19', 6],
    212. ['2016-08-22', 5],
    213. ['2016-08-23', 8],
    214. ['2016-08-24', 10],
    215. ['2016-08-25', 4],
    216. ['2016-08-26', 5],
    217. ['2016-08-29', 9],
    218. ['2016-08-30', 9],
    219. ['2016-08-31', 3],
    220. ['2016-09-01', 3],
    221. ['2016-09-02', 4],
    222. ['2016-09-05', 2],
    223. ['2016-09-06', 10],
    224. ['2016-09-07', 9],
    225. ['2016-09-08', 7],
    226. ['2016-09-09', 8],
    227. ['2016-09-12', 7],
    228. ['2016-09-13', 8],
    229. ['2016-09-14', 8],
    230. ['2016-09-15', 2],
    231. ['2016-09-16', 3],
    232. ['2016-09-19', 4],
    233. ['2016-09-20', 5],
    234. ['2016-09-21', 6],
    235. ['2016-09-22', 7],
    236. ['2016-09-23', 8],
    237. ['2016-09-26', 8],
    238. ['2016-09-27', 9],
    239. ['2016-09-28', 7],
    240. ['2016-09-29', 9],
    241. ['2016-09-30', 7],
    242. ['2016-10-03', 5],
    243. ['2016-10-04', 6],
    244. ['2016-10-05', 9],
    245. ['2016-10-06', 4],
    246. ['2016-10-07', 8],
    247. ['2016-10-10', 9],
    248. ['2016-10-11', 3],
    249. ['2016-10-12', 5],
    250. ['2016-10-13', 5],
    251. ['2016-10-14', 8],
    252. ['2016-10-17', 8],
    253. ['2016-10-18', 9],
    254. ['2016-10-19', 3],
    255. ['2016-10-20', 6],
    256. ['2016-10-21', 12],
    257. ['2016-10-24', 6],
    258. ['2016-10-25', 5],
    259. ['2016-10-26', 5],
    260. ['2016-10-27', 11],
    261. ['2016-10-28', 9],
    262. ['2016-10-31', 3],
    263. ['2016-11-01', 5],
    264. ['2016-11-02', 4],
    265. ['2016-11-03', 9],
    266. ['2016-11-04', 5],
    267. ['2016-11-07', 5],
    268. ['2016-11-08', 7],
    269. ['2016-11-09', 7],
    270. ['2016-11-10', 5],
    271. ['2016-11-11', 3],
    272. ['2016-11-14', 2],
    273. ['2016-11-15', 7],
    274. ['2016-11-16', 5],
    275. ['2016-11-17', 3],
    276. ['2016-11-18', 9],
    277. ['2016-11-21', 11],
    278. ['2016-11-22', 5],
    279. ['2016-11-23', 9],
    280. ['2016-11-24', 4],
    281. ['2016-11-25', 5],
    282. ['2016-11-28', 7],
    283. ['2016-11-29', 9],
    284. ['2016-11-30', 5],
    285. ['2016-12-01', 5],
    286. ['2016-12-02', 6],
    287. ['2016-12-05', 7],
    288. ['2016-12-06', 8],
    289. ['2016-12-07', 5],
    290. ['2016-12-08', 8],
    291. ['2016-12-09', 6],
    292. // ['2016-12-12', 6],
    293. // ['2016-12-13', 2],
    294. // ['2016-12-14', 7],
    295. // ['2016-12-15', 5],
    296. // ['2016-12-16', 5],
    297. // ['2016-12-19', 8],
    298. // ['2016-12-20', 8],
    299. // ['2016-12-21', 8],
    300. // ['2016-12-22', 10],
    301. // ['2016-12-23', 7],
    302. // ['2016-12-26', 12],
    303. // ['2016-12-27', 7],
    304. // ['2016-12-28', 6],
    305. // ['2016-12-29', 5],
    306. // ['2016-12-30', 11]
    307. ]
    308. },
    309. plotarea: {
    310. marginTop: '35%',
    311. marginBottom: '45%'
    312. }
    313. };
    314.  
    315. zingchart.loadModules('calendar', function() {
    316. zingchart.render({
    317. id: 'myChart',
    318. data: chartConfig,
    319. height: 400,
    320. width: '100%'
    321. });
    322. });
    323. </script>
    324. </body>
    325.  
    326. </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. let chartConfig = {
    2. type: 'calendar',
    3. options: {
    4. week: { // Configure the styling by column.
    5. items: { // Use this object to style the cells by column (1-54).
    6. 'w-1': {
    7. backgroundColor: 'red'
    8. },
    9. 'w-2': {
    10. backgroundColor: 'red'
    11. },
    12. 'w-3': {
    13. backgroundColor: 'red'
    14. },
    15. 'w-51': {
    16. backgroundColor: 'red'
    17. },
    18. 'w-52': {
    19. backgroundColor: 'red'
    20. },
    21. 'w-53': {
    22. backgroundColor: 'red'
    23. }
    24. }
    25. },
    26.  
    27. year: {
    28. text: '2016',
    29. },
    30. values: [
    31. // ['2016-01-01', 3],
    32. // ['2016-01-04', 12],
    33. // ['2016-01-05', 3],
    34. // ['2016-01-06', 4],
    35. // ['2016-01-07', 9],
    36. // ['2016-01-08', 11],
    37. // ['2016-01-11', 5],
    38. // ['2016-01-12', 5],
    39. // ['2016-01-13', 9],
    40. // ['2016-01-14', 9],
    41. // ['2016-01-15', 9],
    42. ['2016-01-18', 4],
    43. ['2016-01-19', 6],
    44. ['2016-01-20', 5],
    45. ['2016-01-21', 6],
    46. ['2016-01-22', 2],
    47. ['2016-01-25', 5],
    48. ['2016-01-26', 9],
    49. ['2016-01-27', 6],
    50. ['2016-01-28', 6],
    51. ['2016-01-29', 7],
    52. ['2016-02-01', 7],
    53. ['2016-02-02', 12],
    54. ['2016-02-03', 3],
    55. ['2016-02-04', 3],
    56. ['2016-02-05', 9],
    57. ['2016-02-08', 9],
    58. ['2016-02-09', 9],
    59. ['2016-02-10', 4],
    60. ['2016-02-11', 5],
    61. ['2016-02-12', 8],
    62. ['2016-02-15', 8],
    63. ['2016-02-16', 3],
    64. ['2016-02-17', 7],
    65. ['2016-02-18', 5],
    66. ['2016-02-19', 9],
    67. ['2016-02-22', 6],
    68. ['2016-02-23', 5],
    69. ['2016-02-24', 8],
    70. ['2016-02-25', 10],
    71. ['2016-02-26', 4],
    72. ['2016-02-29', 5],
    73. ['2016-03-01', 9],
    74. ['2016-03-02', 9],
    75. ['2016-03-03', 3],
    76. ['2016-03-04', 3],
    77. ['2016-03-07', 4],
    78. ['2016-03-08', 2],
    79. ['2016-03-09', 10],
    80. ['2016-03-10', 9],
    81. ['2016-03-11', 7],
    82. ['2016-03-14', 8],
    83. ['2016-03-15', 7],
    84. ['2016-03-16', 8],
    85. ['2016-03-17', 8],
    86. ['2016-03-18', 2],
    87. ['2016-03-21', 3],
    88. ['2016-03-22', 4],
    89. ['2016-03-23', 5],
    90. ['2016-03-24', 6],
    91. ['2016-03-25', 7],
    92. ['2016-03-28', 8],
    93. ['2016-03-29', 8],
    94. ['2016-03-30', 9],
    95. ['2016-03-31', 7],
    96. ['2016-04-01', 9],
    97. ['2016-04-04', 7],
    98. ['2016-04-05', 5],
    99. ['2016-04-06', 6],
    100. ['2016-04-07', 9],
    101. ['2016-04-08', 4],
    102. ['2016-04-11', 8],
    103. ['2016-04-12', 9],
    104. ['2016-04-13', 3],
    105. ['2016-04-14', 5],
    106. ['2016-04-15', 5],
    107. ['2016-04-18', 8],
    108. ['2016-04-19', 8],
    109. ['2016-04-20', 9],
    110. ['2016-04-21', 3],
    111. ['2016-04-22', 6],
    112. ['2016-04-25', 12],
    113. ['2016-04-26', 6],
    114. ['2016-04-27', 5],
    115. ['2016-04-28', 5],
    116. ['2016-04-29', 11],
    117. ['2016-05-02', 9],
    118. ['2016-05-03', 3],
    119. ['2016-05-04', 5],
    120. ['2016-05-05', 4],
    121. ['2016-05-06', 9],
    122. ['2016-05-09', 5],
    123. ['2016-05-10', 5],
    124. ['2016-05-11', 7],
    125. ['2016-05-12', 7],
    126. ['2016-05-13', 5],
    127. ['2016-05-16', 3],
    128. ['2016-05-17', 2],
    129. ['2016-05-18', 7],
    130. ['2016-05-19', 5],
    131. ['2016-05-20', 3],
    132. ['2016-05-23', 9],
    133. ['2016-05-24', 11],
    134. ['2016-05-25', 5],
    135. ['2016-05-26', 9],
    136. ['2016-05-27', 4],
    137. ['2016-05-30', 5],
    138. ['2016-05-31', 7],
    139. ['2016-06-01', 9],
    140. ['2016-06-02', 5],
    141. ['2016-06-03', 5],
    142. ['2016-06-06', 6],
    143. ['2016-06-07', 7],
    144. ['2016-06-08', 8],
    145. ['2016-06-09', 5],
    146. ['2016-06-10', 8],
    147. ['2016-06-13', 6],
    148. ['2016-06-14', 6],
    149. ['2016-06-15', 2],
    150. ['2016-06-16', 7],
    151. ['2016-06-17', 5],
    152. ['2016-06-20', 5],
    153. ['2016-06-21', 8],
    154. ['2016-06-22', 8],
    155. ['2016-06-23', 8],
    156. ['2016-06-24', 10],
    157. ['2016-06-27', 7],
    158. ['2016-06-28', 12],
    159. ['2016-06-29', 7],
    160. ['2016-06-30', 6],
    161. ['2016-07-01', 12],
    162. ['2016-07-04', 3],
    163. ['2016-07-05', 4],
    164. ['2016-07-06', 9],
    165. ['2016-07-07', 11],
    166. ['2016-07-08', 5],
    167. ['2016-07-11', 5],
    168. ['2016-07-12', 9],
    169. ['2016-07-13', 9],
    170. ['2016-07-14', 9],
    171. ['2016-07-15', 4],
    172. ['2016-07-18', 6],
    173. ['2016-07-19', 5],
    174. ['2016-07-20', 6],
    175. ['2016-07-21', 2],
    176. ['2016-07-22', 5],
    177. ['2016-07-25', 9],
    178. ['2016-07-26', 6],
    179. ['2016-07-27', 6],
    180. ['2016-07-28', 7],
    181. ['2016-07-29', 7],
    182. ['2016-08-01', 12],
    183. ['2016-08-02', 3],
    184. ['2016-08-03', 3],
    185. ['2016-08-04', 9],
    186. ['2016-08-05', 9],
    187. ['2016-08-08', 9],
    188. ['2016-08-09', 4],
    189. ['2016-08-10', 5],
    190. ['2016-08-11', 8],
    191. ['2016-08-12', 8],
    192. ['2016-08-15', 3],
    193. ['2016-08-16', 7],
    194. ['2016-08-17', 5],
    195. ['2016-08-18', 9],
    196. ['2016-08-19', 6],
    197. ['2016-08-22', 5],
    198. ['2016-08-23', 8],
    199. ['2016-08-24', 10],
    200. ['2016-08-25', 4],
    201. ['2016-08-26', 5],
    202. ['2016-08-29', 9],
    203. ['2016-08-30', 9],
    204. ['2016-08-31', 3],
    205. ['2016-09-01', 3],
    206. ['2016-09-02', 4],
    207. ['2016-09-05', 2],
    208. ['2016-09-06', 10],
    209. ['2016-09-07', 9],
    210. ['2016-09-08', 7],
    211. ['2016-09-09', 8],
    212. ['2016-09-12', 7],
    213. ['2016-09-13', 8],
    214. ['2016-09-14', 8],
    215. ['2016-09-15', 2],
    216. ['2016-09-16', 3],
    217. ['2016-09-19', 4],
    218. ['2016-09-20', 5],
    219. ['2016-09-21', 6],
    220. ['2016-09-22', 7],
    221. ['2016-09-23', 8],
    222. ['2016-09-26', 8],
    223. ['2016-09-27', 9],
    224. ['2016-09-28', 7],
    225. ['2016-09-29', 9],
    226. ['2016-09-30', 7],
    227. ['2016-10-03', 5],
    228. ['2016-10-04', 6],
    229. ['2016-10-05', 9],
    230. ['2016-10-06', 4],
    231. ['2016-10-07', 8],
    232. ['2016-10-10', 9],
    233. ['2016-10-11', 3],
    234. ['2016-10-12', 5],
    235. ['2016-10-13', 5],
    236. ['2016-10-14', 8],
    237. ['2016-10-17', 8],
    238. ['2016-10-18', 9],
    239. ['2016-10-19', 3],
    240. ['2016-10-20', 6],
    241. ['2016-10-21', 12],
    242. ['2016-10-24', 6],
    243. ['2016-10-25', 5],
    244. ['2016-10-26', 5],
    245. ['2016-10-27', 11],
    246. ['2016-10-28', 9],
    247. ['2016-10-31', 3],
    248. ['2016-11-01', 5],
    249. ['2016-11-02', 4],
    250. ['2016-11-03', 9],
    251. ['2016-11-04', 5],
    252. ['2016-11-07', 5],
    253. ['2016-11-08', 7],
    254. ['2016-11-09', 7],
    255. ['2016-11-10', 5],
    256. ['2016-11-11', 3],
    257. ['2016-11-14', 2],
    258. ['2016-11-15', 7],
    259. ['2016-11-16', 5],
    260. ['2016-11-17', 3],
    261. ['2016-11-18', 9],
    262. ['2016-11-21', 11],
    263. ['2016-11-22', 5],
    264. ['2016-11-23', 9],
    265. ['2016-11-24', 4],
    266. ['2016-11-25', 5],
    267. ['2016-11-28', 7],
    268. ['2016-11-29', 9],
    269. ['2016-11-30', 5],
    270. ['2016-12-01', 5],
    271. ['2016-12-02', 6],
    272. ['2016-12-05', 7],
    273. ['2016-12-06', 8],
    274. ['2016-12-07', 5],
    275. ['2016-12-08', 8],
    276. ['2016-12-09', 6],
    277. // ['2016-12-12', 6],
    278. // ['2016-12-13', 2],
    279. // ['2016-12-14', 7],
    280. // ['2016-12-15', 5],
    281. // ['2016-12-16', 5],
    282. // ['2016-12-19', 8],
    283. // ['2016-12-20', 8],
    284. // ['2016-12-21', 8],
    285. // ['2016-12-22', 10],
    286. // ['2016-12-23', 7],
    287. // ['2016-12-26', 12],
    288. // ['2016-12-27', 7],
    289. // ['2016-12-28', 6],
    290. // ['2016-12-29', 5],
    291. // ['2016-12-30', 11]
    292. ]
    293. },
    294. plotarea: {
    295. marginTop: '35%',
    296. marginBottom: '45%'
    297. }
    298. };
    299.  
    300. zingchart.loadModules('calendar', function() {
    301. zingchart.render({
    302. id: 'myChart',
    303. data: chartConfig,
    304. height: 400,
    305. width: '100%'
    306. });
    307. });