• 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. .zc-body {
    10. background-color: #FFF;
    11. font: 100%/1.5 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif, 'Comic Sans';
    12. }
    13.  
    14. .chart--container {
    15. background-color: #FFF;
    16. min-height: 530px;
    17. width: 100%;
    18. height: 100%;
    19. }
    20.  
    21. #day {
    22. color: #2196F3;
    23. }
    24.  
    25. #day {
    26. margin-top: 20px;
    27. margin-right: 20px;
    28. font-size: 25px;
    29. float: right;
    30. }
    31.  
    32. #date-picker-container {
    33. margin-left: 25px;
    34. }
    35.  
    36. [data-period] {
    37. margin: 5px;
    38. padding: 10px 10px;
    39. background-color: #2196F3;
    40. color: #FFF;
    41. display: inline-block;
    42. }
    43.  
    44. [data-period]:hover {
    45. cursor: pointer;
    46. opacity: .7;
    47. }
    48.  
    49. #date-picker-container div {
    50. display: inline-block;
    51. }
    52.  
    53. #date-from,
    54. #date-to {
    55. margin-right: 6px;
    56. margin-left: 6px;
    57. color: #2196F3;
    58. }
    59.  
    60. .active {
    61. background: #fd992b;
    62. }
    63.  
    64. .zc-ref {
    65. display: none;
    66. }
    67. </style>
    68. </head>
    69.  
    70. <body>
    71. <div id="myChart" class="chart--container">
    72. <div id="date-picker-container">
    73. <span data-period="1" class="active">30 Days</span>
    74. <span data-period="2">60 Days</span>
    75. <span data-period="3">90 Days</span>
    76. <div>
    77. <b>From:</b>
    78. <span id="date-from">1/31/19</span>
    79. </div>
    80. <div>
    81. <b>To:</b>
    82. <span id="date-to">6/17/19</span>
    83. </div>
    84. <div id="day"></div>
    85. </div>
    86. <div id="main-container">
    87. <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    88. </div>
    89. </div>
    90. <script>
    91. ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    92. let chartConfig = {
    93. type: 'mixed',
    94. title: {
    95. text: 'Projected Cash Flow',
    96. align: 'center',
    97. },
    98. plot: {
    99. tooltip: {
    100. visible: false,
    101. },
    102. aspect: 'spline',
    103. marker: {
    104. visible: false,
    105. },
    106. },
    107. plotarea: {},
    108. scaleX: {
    109. values: [
    110. '1/31/19',
    111. '2/10/19',
    112. '2/11/19',
    113. '2/12/19',
    114. '2/13/19',
    115. '2/19/19',
    116. '2/18/19',
    117. '2/19/19',
    118. '2/20/19',
    119. '2/21/19',
    120. '2/24/19',
    121. '2/25/19',
    122. '2/26/19',
    123. '2/27/19',
    124. '2/28/19',
    125. '2/3/19',
    126. '2/4/19',
    127. '2/5/19',
    128. '2/6/19',
    129. '2/7/19',
    130. '3/10/19',
    131. '3/11/19',
    132. '3/12/19',
    133. '3/13/19',
    134. '3/14/19',
    135. '3/17/19',
    136. '3/18/19',
    137. '3/19/19',
    138. '3/20/19',
    139. '3/21/19',
    140. '3/24/19',
    141. '3/25/19',
    142. '3/26/19',
    143. '3/27/19',
    144. '3/28/19',
    145. '3/3/19',
    146. '3/31/19',
    147. '3/4/19',
    148. '3/5/19',
    149. '3/6/19',
    150. '3/7/19',
    151. '4/1/19',
    152. '4/10/19',
    153. '4/11/19',
    154. '4/14/19',
    155. '4/15/19',
    156. '4/16/19',
    157. '4/17/19',
    158. '4/2/19',
    159. '4/21/19',
    160. '4/22/19',
    161. '4/23/19',
    162. '4/24/19',
    163. '4/25/19',
    164. '4/28/19',
    165. '4/29/19',
    166. '4/3/19',
    167. '4/30/19',
    168. '4/4/19',
    169. '4/7/19',
    170. '4/8/19',
    171. '4/9/19',
    172. '5/1/19',
    173. '5/12/19',
    174. '5/13/19',
    175. '5/14/19',
    176. '5/15/19',
    177. '5/16/19',
    178. '5/19/19',
    179. '5/20/19',
    180. '5/21/19',
    181. '5/22/19',
    182. '5/23/19',
    183. '5/27/19',
    184. '5/28/19',
    185. '5/29/19',
    186. '5/30/19',
    187. '5/5/19',
    188. '5/6/19',
    189. '5/7/19',
    190. '5/8/19',
    191. '5/9/19',
    192. '6/10/19',
    193. '6/11/19',
    194. '6/12/19',
    195. '6/13/19',
    196. '6/16/19',
    197. '6/17/19',
    198. ],
    199. itemsOverlap: true,
    200. lineWidth: '0px',
    201. tick: {
    202. alpha: 1,
    203. lineColor: '#2196F3',
    204. lineWidth: '2px',
    205. },
    206. zooming: true,
    207. zoomTo: [0, 30],
    208. },
    209. scaleY: {
    210. values: '0:20000:1000',
    211. guide: {
    212. visible: false,
    213. },
    214. },
    215. scaleY2: {},
    216. crosshairX: {
    217. lineColor: '#2196F3',
    218. lineStyle: 'dashed',
    219. lineWidth: '2px',
    220. marker: {
    221. type: 'triangle',
    222. size: '5px',
    223. visible: true,
    224. },
    225. plotLabel: {
    226. visible: false,
    227. },
    228. },
    229. preview: {
    230. live: true,
    231. },
    232. series: [{
    233. type: 'bar',
    234. values: [
    235. 4000, 10000, 5000, 2000, 6000, 10000, 15000, 8000, 3000, 7000, 13000,
    236. 4000, 10000, 5000, 2000, 6000, 10000, 15000, 8000, 3000, 7000, 13000,
    237. 4000, 10000, 5000, 2000, 6000, 10000, 15000, 8000, 3000, 7000, 13000,
    238. 4000, 10000, 5000, 2000, 6000, 10000, 15000, 8000, 3000, 7000, 13000,
    239. 4000, 10000, 5000, 2000, 6000, 10000, 15000, 8000, 3000, 7000, 13000,
    240. 4000, 10000, 5000, 2000, 6000, 10000, 15000, 8000, 3000, 7000, 13000,
    241. 4000, 10000, 5000, 2000, 6000, 10000, 15000, 8000, 3000, 7000, 13000,
    242. 4000, 10000, 5000, 2000, 6000, 10000, 15000, 8000, 3000, 7000, 13000,
    243. 8000, 0, 5000,
    244. ],
    245. backgroundColor: '#FFEB3B',
    246. scales: 'scale-x, scale-y-2',
    247. },
    248. {
    249. type: 'line',
    250. values: [
    251. 6000, 7000, 3000, 4000, 10000, 13000, 5000, 0, 9000, 16000, 9000, 6000,
    252. 7000, 3000, 4000, 10000, 13000, 5000, 0, 9000, 16000, 9000, 6000, 7000,
    253. 3000, 4000, 10000, 13000, 5000, 0, 9000, 16000, 9000, 6000, 7000, 3000,
    254. 4000, 10000, 13000, 5000, 0, 9000, 16000, 9000, 6000, 7000, 3000, 4000,
    255. 10000, 13000, 5000, 0, 9000, 16000, 9000, 6000, 7000, 3000, 4000, 10000,
    256. 13000, 5000, 0, 9000, 16000, 9000, 6000, 7000, 3000, 4000, 10000, 13000,
    257. 5000, 0, 9000, 16000, 9000, 6000, 7000, 3000, 4000, 10000, 13000, 5000,
    258. 0, 9000, 16000, 9000, 6000, 7000, 15000,
    259. ],
    260. lineColor: '#2196F3',
    261. scales: 'scale-x, scale-y-2',
    262. },
    263. ],
    264. };
    265.  
    266. zingchart.render({
    267. id: 'myChart',
    268. data: chartConfig,
    269. width: '100%',
    270. });
    271.  
    272. /**
    273. * As we are moving the guide, we want to update the items outside
    274. * of the chart. We could do this inside the chart, but since JS
    275. * is single threaded we don't want to block UI with a chart
    276. * update. A chart update is more expensive than a node update.
    277. * You may see no performance gains on a dataset this size, but
    278. * with some increase its possible to see a discrepancy for the
    279. * user. This is why I chose to contstruct the items outside
    280. * of the graph.
    281. */
    282. zingchart.guide_mousemove = (e) => {
    283. if (e['scale-label']) {
    284. document.getElementById('day').innerHTML =
    285. 'Day: ' + e['scale-label']['scale-x'];
    286. }
    287. };
    288.  
    289. /*********** Functions ***********/
    290.  
    291. /**
    292. * ZingChart defined event listener. Will capture ZoomEvent and related
    293. * Zooming Information.
    294. */
    295. zingchart.zoom = (e) => {
    296. displayZoomValues(e.kmin, e.kmax);
    297. };
    298.  
    299. /**
    300. * Apply dates to display current zoomed dates
    301. */
    302. let displayZoomValues = (sFrom, sTo) => {
    303. let dateFrom = document.getElementById('date-from');
    304. let dateTo = document.getElementById('date-to');
    305.  
    306. // If viewall is clicked show the default dates
    307. if (!sFrom) {
    308. sFrom = '1/31/19';
    309. }
    310. if (!sTo) {
    311. sTo = '6/17/19';
    312. }
    313.  
    314. dateFrom.innerHTML = sFrom;
    315. dateTo.innerHTML = sTo;
    316. };
    317.  
    318. /**
    319. * Apply zoom to graph.
    320. */
    321. let zoomToIndex = (max) => {
    322. // ZingChart api automated zoom. Have to be careful
    323. // not to zoom past the end of the graph
    324. zingchart.exec('myChart', 'zoomto', {
    325. xmax: max,
    326. xmin: 0,
    327. });
    328. };
    329.  
    330. /**
    331. * Capture the spans clicks with data-period attribute.
    332. */
    333. document
    334. .getElementById('date-picker-container')
    335. .addEventListener('click', (e) => {
    336. let target = e.target;
    337.  
    338. // Only capture spans with data-period attribute
    339. if (target.dataset['period']) {
    340. // Toggle classes
    341. removeActiveClass();
    342. e.target.classList.toggle('active');
    343.  
    344. switch (target.dataset['period']) {
    345. case '1':
    346. zoomToIndex(30);
    347. break;
    348. case '2':
    349. zoomToIndex(60);
    350. break;
    351. default:
    352. zingchart.exec('myChart', 'viewall');
    353. break;
    354. }
    355. }
    356. });
    357.  
    358. let removeActiveClass = () => {
    359. let activeElement = document.querySelector('[data-period].active');
    360. activeElement.classList.toggle('active');
    361. };
    362. </script>
    363. </body>
    364.  
    365. </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. <div id="myChart" class="chart--container">
    12. <div id="date-picker-container">
    13. <span data-period="1" class="active">30 Days</span>
    14. <span data-period="2">60 Days</span>
    15. <span data-period="3">90 Days</span>
    16. <div>
    17. <b>From:</b>
    18. <span id="date-from">1/31/19</span>
    19. </div>
    20. <div>
    21. <b>To:</b>
    22. <span id="date-to">6/17/19</span>
    23. </div>
    24. <div id="day"></div>
    25. </div>
    26. <div id="main-container">
    27. <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    28. </div>
    29. </div>
    30. </body>
    31.  
    32. </html>
    1. .zc-body {
    2. background-color: #FFF;
    3. font: 100%/1.5 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif, 'Comic Sans';
    4. }
    5.  
    6. .chart--container {
    7. background-color: #FFF;
    8. min-height: 530px;
    9. width: 100%;
    10. height: 100%;
    11. }
    12.  
    13. #day {
    14. color: #2196F3;
    15. }
    16.  
    17. #day {
    18. margin-top: 20px;
    19. margin-right: 20px;
    20. font-size: 25px;
    21. float: right;
    22. }
    23.  
    24. #date-picker-container {
    25. margin-left: 25px;
    26. }
    27.  
    28. [data-period] {
    29. margin: 5px;
    30. padding: 10px 10px;
    31. background-color: #2196F3;
    32. color: #FFF;
    33. display: inline-block;
    34. }
    35.  
    36. [data-period]:hover {
    37. cursor: pointer;
    38. opacity: .7;
    39. }
    40.  
    41. #date-picker-container div {
    42. display: inline-block;
    43. }
    44.  
    45. #date-from,
    46. #date-to {
    47. margin-right: 6px;
    48. margin-left: 6px;
    49. color: #2196F3;
    50. }
    51.  
    52. .active {
    53. background: #fd992b;
    54. }
    55.  
    56. .zc-ref {
    57. display: none;
    58. }
    1. let chartConfig = {
    2. type: 'mixed',
    3. title: {
    4. text: 'Projected Cash Flow',
    5. align: 'center',
    6. },
    7. plot: {
    8. tooltip: {
    9. visible: false,
    10. },
    11. aspect: 'spline',
    12. marker: {
    13. visible: false,
    14. },
    15. },
    16. plotarea: {},
    17. scaleX: {
    18. values: [
    19. '1/31/19',
    20. '2/10/19',
    21. '2/11/19',
    22. '2/12/19',
    23. '2/13/19',
    24. '2/19/19',
    25. '2/18/19',
    26. '2/19/19',
    27. '2/20/19',
    28. '2/21/19',
    29. '2/24/19',
    30. '2/25/19',
    31. '2/26/19',
    32. '2/27/19',
    33. '2/28/19',
    34. '2/3/19',
    35. '2/4/19',
    36. '2/5/19',
    37. '2/6/19',
    38. '2/7/19',
    39. '3/10/19',
    40. '3/11/19',
    41. '3/12/19',
    42. '3/13/19',
    43. '3/14/19',
    44. '3/17/19',
    45. '3/18/19',
    46. '3/19/19',
    47. '3/20/19',
    48. '3/21/19',
    49. '3/24/19',
    50. '3/25/19',
    51. '3/26/19',
    52. '3/27/19',
    53. '3/28/19',
    54. '3/3/19',
    55. '3/31/19',
    56. '3/4/19',
    57. '3/5/19',
    58. '3/6/19',
    59. '3/7/19',
    60. '4/1/19',
    61. '4/10/19',
    62. '4/11/19',
    63. '4/14/19',
    64. '4/15/19',
    65. '4/16/19',
    66. '4/17/19',
    67. '4/2/19',
    68. '4/21/19',
    69. '4/22/19',
    70. '4/23/19',
    71. '4/24/19',
    72. '4/25/19',
    73. '4/28/19',
    74. '4/29/19',
    75. '4/3/19',
    76. '4/30/19',
    77. '4/4/19',
    78. '4/7/19',
    79. '4/8/19',
    80. '4/9/19',
    81. '5/1/19',
    82. '5/12/19',
    83. '5/13/19',
    84. '5/14/19',
    85. '5/15/19',
    86. '5/16/19',
    87. '5/19/19',
    88. '5/20/19',
    89. '5/21/19',
    90. '5/22/19',
    91. '5/23/19',
    92. '5/27/19',
    93. '5/28/19',
    94. '5/29/19',
    95. '5/30/19',
    96. '5/5/19',
    97. '5/6/19',
    98. '5/7/19',
    99. '5/8/19',
    100. '5/9/19',
    101. '6/10/19',
    102. '6/11/19',
    103. '6/12/19',
    104. '6/13/19',
    105. '6/16/19',
    106. '6/17/19',
    107. ],
    108. itemsOverlap: true,
    109. lineWidth: '0px',
    110. tick: {
    111. alpha: 1,
    112. lineColor: '#2196F3',
    113. lineWidth: '2px',
    114. },
    115. zooming: true,
    116. zoomTo: [0, 30],
    117. },
    118. scaleY: {
    119. values: '0:20000:1000',
    120. guide: {
    121. visible: false,
    122. },
    123. },
    124. scaleY2: {},
    125. crosshairX: {
    126. lineColor: '#2196F3',
    127. lineStyle: 'dashed',
    128. lineWidth: '2px',
    129. marker: {
    130. type: 'triangle',
    131. size: '5px',
    132. visible: true,
    133. },
    134. plotLabel: {
    135. visible: false,
    136. },
    137. },
    138. preview: {
    139. live: true,
    140. },
    141. series: [{
    142. type: 'bar',
    143. values: [
    144. 4000, 10000, 5000, 2000, 6000, 10000, 15000, 8000, 3000, 7000, 13000,
    145. 4000, 10000, 5000, 2000, 6000, 10000, 15000, 8000, 3000, 7000, 13000,
    146. 4000, 10000, 5000, 2000, 6000, 10000, 15000, 8000, 3000, 7000, 13000,
    147. 4000, 10000, 5000, 2000, 6000, 10000, 15000, 8000, 3000, 7000, 13000,
    148. 4000, 10000, 5000, 2000, 6000, 10000, 15000, 8000, 3000, 7000, 13000,
    149. 4000, 10000, 5000, 2000, 6000, 10000, 15000, 8000, 3000, 7000, 13000,
    150. 4000, 10000, 5000, 2000, 6000, 10000, 15000, 8000, 3000, 7000, 13000,
    151. 4000, 10000, 5000, 2000, 6000, 10000, 15000, 8000, 3000, 7000, 13000,
    152. 8000, 0, 5000,
    153. ],
    154. backgroundColor: '#FFEB3B',
    155. scales: 'scale-x, scale-y-2',
    156. },
    157. {
    158. type: 'line',
    159. values: [
    160. 6000, 7000, 3000, 4000, 10000, 13000, 5000, 0, 9000, 16000, 9000, 6000,
    161. 7000, 3000, 4000, 10000, 13000, 5000, 0, 9000, 16000, 9000, 6000, 7000,
    162. 3000, 4000, 10000, 13000, 5000, 0, 9000, 16000, 9000, 6000, 7000, 3000,
    163. 4000, 10000, 13000, 5000, 0, 9000, 16000, 9000, 6000, 7000, 3000, 4000,
    164. 10000, 13000, 5000, 0, 9000, 16000, 9000, 6000, 7000, 3000, 4000, 10000,
    165. 13000, 5000, 0, 9000, 16000, 9000, 6000, 7000, 3000, 4000, 10000, 13000,
    166. 5000, 0, 9000, 16000, 9000, 6000, 7000, 3000, 4000, 10000, 13000, 5000,
    167. 0, 9000, 16000, 9000, 6000, 7000, 15000,
    168. ],
    169. lineColor: '#2196F3',
    170. scales: 'scale-x, scale-y-2',
    171. },
    172. ],
    173. };
    174.  
    175. zingchart.render({
    176. id: 'myChart',
    177. data: chartConfig,
    178. width: '100%',
    179. });
    180.  
    181. /**
    182. * As we are moving the guide, we want to update the items outside
    183. * of the chart. We could do this inside the chart, but since JS
    184. * is single threaded we don't want to block UI with a chart
    185. * update. A chart update is more expensive than a node update.
    186. * You may see no performance gains on a dataset this size, but
    187. * with some increase its possible to see a discrepancy for the
    188. * user. This is why I chose to contstruct the items outside
    189. * of the graph.
    190. */
    191. zingchart.guide_mousemove = (e) => {
    192. if (e['scale-label']) {
    193. document.getElementById('day').innerHTML =
    194. 'Day: ' + e['scale-label']['scale-x'];
    195. }
    196. };
    197.  
    198. /*********** Functions ***********/
    199.  
    200. /**
    201. * ZingChart defined event listener. Will capture ZoomEvent and related
    202. * Zooming Information.
    203. */
    204. zingchart.zoom = (e) => {
    205. displayZoomValues(e.kmin, e.kmax);
    206. };
    207.  
    208. /**
    209. * Apply dates to display current zoomed dates
    210. */
    211. let displayZoomValues = (sFrom, sTo) => {
    212. let dateFrom = document.getElementById('date-from');
    213. let dateTo = document.getElementById('date-to');
    214.  
    215. // If viewall is clicked show the default dates
    216. if (!sFrom) {
    217. sFrom = '1/31/19';
    218. }
    219. if (!sTo) {
    220. sTo = '6/17/19';
    221. }
    222.  
    223. dateFrom.innerHTML = sFrom;
    224. dateTo.innerHTML = sTo;
    225. };
    226.  
    227. /**
    228. * Apply zoom to graph.
    229. */
    230. let zoomToIndex = (max) => {
    231. // ZingChart api automated zoom. Have to be careful
    232. // not to zoom past the end of the graph
    233. zingchart.exec('myChart', 'zoomto', {
    234. xmax: max,
    235. xmin: 0,
    236. });
    237. };
    238.  
    239. /**
    240. * Capture the spans clicks with data-period attribute.
    241. */
    242. document
    243. .getElementById('date-picker-container')
    244. .addEventListener('click', (e) => {
    245. let target = e.target;
    246.  
    247. // Only capture spans with data-period attribute
    248. if (target.dataset['period']) {
    249. // Toggle classes
    250. removeActiveClass();
    251. e.target.classList.toggle('active');
    252.  
    253. switch (target.dataset['period']) {
    254. case '1':
    255. zoomToIndex(30);
    256. break;
    257. case '2':
    258. zoomToIndex(60);
    259. break;
    260. default:
    261. zingchart.exec('myChart', 'viewall');
    262. break;
    263. }
    264. }
    265. });
    266.  
    267. let removeActiveClass = () => {
    268. let activeElement = document.querySelector('[data-period].active');
    269. activeElement.classList.toggle('active');
    270. };