• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingSoft Demo</title>
    7. <style>
    8. * {
    9. font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
    10. font-size: 12px;
    11. }
    12. </style>
    13.  
    14. <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    15. <style>
    16. html,
    17. body {
    18. height: 100%;
    19. width: 100%;
    20. margin: 0;
    21. padding: 0;
    22. }
    23.  
    24. #myChart {
    25. height: 100%;
    26. width: 100%;
    27. min-height: 150px;
    28. }
    29.  
    30. .zc-ref {
    31. display: none;
    32. }
    33. </style>
    34. </head>
    35.  
    36. <body>
    37. <div id="myChart"></div>
    38. <script>
    39. ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    40. let chartConfig = {
    41. type: 'depth',
    42. backgroundColor: '#f3f3f3 #d9d9d9',
    43. options: {
    44. buttonZoomin: {
    45. borderColor: 'red',
    46. borderWidth: 4,
    47. topState: {
    48. backgroundColor: 'blue',
    49. offsetX: 10,
    50. offsetY: 10,
    51. },
    52. },
    53. buttonZoomout: {
    54. borderColor: 'red',
    55. borderWidth: 4,
    56. topState: {
    57. backgroundColor: 'blue',
    58. offsetX: 10,
    59. offsetY: 10,
    60. },
    61. },
    62. currency: '$',
    63. mmpMarker: {
    64. lineColor: 'blue',
    65. lineWidth: 5
    66. },
    67. subtitle: {
    68. text: 'Subtitle'
    69. },
    70. title: {
    71. text: 'Title'
    72. },
    73. },
    74. series: [{
    75. values: [
    76. [1168.49, 0],
    77. [1164.69, 12.0211],
    78. [1163.38, 33.0049],
    79. [1160.98, 45.5622],
    80. [1158.64, 60.4819],
    81. [1154.04, 71.5594],
    82. [1146.54, 83.2051],
    83. [1133.37, 106.8834],
    84. [1129.63, 127.1219],
    85. [1126.89, 145.2484],
    86. [1115.14, 155.8074],
    87. [1113.54, 171.8438],
    88. [1110.49, 184.443],
    89. [1106.92, 202.3068],
    90. [1106.7, 224.5185],
    91. [1104.03, 244.5286],
    92. [1101.99, 256.5801],
    93. [1099.57, 272.8992],
    94. [1099.47, 289.2549],
    95. [1095.76, 300.107],
    96. [1091.75, 320.0837],
    97. [1091.37, 334.7523],
    98. [1086.9, 357.9836],
    99. [1086.6, 375.3844],
    100. [1081.13, 387.3668],
    101. [1079.3, 403.3796],
    102. [1074.56, 420.0898],
    103. [1069.69, 438.8176],
    104. [1068.59, 462.0495],
    105. [1056.35, 484.2044],
    106. [1052.93, 507.0559],
    107. [1052.03, 529.1966],
    108. [1047.46, 541.6345],
    109. [1033.06, 551.942],
    110. [1030.42, 569.7072],
    111. [1025.65, 583.7136],
    112. [1023.38, 608.1764],
    113. [1020.04, 620.0944],
    114. [1018.53, 644.661],
    115. [1014.92, 661.6777]
    116. ],
    117. text: 'Sell'
    118. },
    119. {
    120. values: [
    121. [1168.49, 0],
    122. [1172.22, 33.1932],
    123. [1174.28, 50.5177],
    124. [1174.99, 81.8346],
    125. [1189.53, 104.332],
    126. [1191.07, 119.9178],
    127. [1195.62, 146.3812],
    128. [1199.32, 180.9109],
    129. [1201.89, 199.313],
    130. [1204.34, 228.9945],
    131. [1206.47, 251.6454],
    132. [1209.44, 285.6366],
    133. [1221.89, 312.7949],
    134. [1230.48, 328.6889],
    135. [1235.24, 351.3438],
    136. [1248.33, 377.9289],
    137. [1251.24, 409.9444],
    138. [1253.75, 435.5418],
    139. [1257.48, 453.8852],
    140. [1261.01, 483.8769],
    141. [1265.06, 499.7163],
    142. [1268.75, 529.6374],
    143. [1270.2, 552.1779],
    144. [1272.15, 579.5218],
    145. [1274.19, 606.4376],
    146. [1276.17, 638.8508],
    147. [1283.07, 668.7969],
    148. [1285.76, 694.1647],
    149. [1287.89, 709.9417],
    150. [1288.72, 735.6358],
    151. [1295.71, 765.2281],
    152. [1303.26, 784.6807],
    153. [1305.43, 801.1021],
    154. [1307.78, 817.4528],
    155. [1312.76, 836.7914],
    156. [1317.6, 859.4746],
    157. [1322.31, 891.443],
    158. [1324.35, 907.6098],
    159. [1325.7, 931.1996],
    160. [1528.01, 949.3013]
    161. ],
    162. text: 'Buy'
    163. }
    164. ]
    165. };
    166.  
    167. let chartConfig2 = {
    168. type: 'depth',
    169. backgroundColor: '#000',
    170. options: {
    171. currency: '\u20ac',
    172. title: {
    173. color: '#ff0'
    174. },
    175. subtitle: {
    176. visible: false
    177. },
    178. mmpMarker: {
    179. alpha: 0.75,
    180. lineColor: '#999',
    181. label: {
    182. color: '#fff',
    183. fontSize: 15,
    184. offsetY: 20
    185. }
    186. },
    187. palette: ['#909', '#990'],
    188. },
    189. scaleX: {
    190. item: {
    191. fontSize: 11,
    192. color: '#f90'
    193. }
    194. },
    195. scaleY: {
    196. item: {
    197. color: '#fff'
    198. }
    199. },
    200. scaleY2: {
    201. item: {
    202. color: '#fff'
    203. }
    204. },
    205. plot: {
    206. mode: 'normal'
    207. },
    208. crosshairX: {
    209. plotLabel: {
    210. color: '#fff',
    211. backgroundColor: '#000'
    212. }
    213. },
    214. series: [{
    215. values: [
    216. [83168.4942, 0],
    217. [83165.2911, 24.5257],
    218. [83162.4432, 41.831],
    219. [83155.7512, 55.5769],
    220. [83155.2945, 67.9671],
    221. [83151.4232, 78.4742],
    222. [83151.3712, 91.5577],
    223. [83150.8574, 104.5983],
    224. [83150.4721, 123.8432],
    225. [83149.6144, 147.7095],
    226. [83148.2683, 171.1301],
    227. [83147.3312, 190.1485],
    228. [83142.4782, 210.6557],
    229. [83139.2812, 228.9494],
    230. [83139.1911, 244.5898],
    231. [83134.4493, 258.1534],
    232. [83131.9837, 278.0654],
    233. [83131.6223, 302.7251],
    234. [83130.3352, 317.3595],
    235. [83122.9212, 333.889],
    236. [83118.0342, 352.3895],
    237. [83117.3329, 374.7495],
    238. [83105.0412, 388.6047],
    239. [83103.0253, 404.7422],
    240. [83098.6836, 426.4222],
    241. [83095.4497, 437.743],
    242. [83091.9221, 461.9394],
    243. [83087.6823, 474.8041],
    244. [83083.1435, 495.8427],
    245. [83080.8234, 513.83],
    246. [83078.3357, 535.1954],
    247. [83076.0832, 554.3064],
    248. [83073.8655, 572.399],
    249. [83071.9923, 587.107],
    250. [83068.2523, 606.2238],
    251. [83066.6343, 623.5779],
    252. [83059.5455, 642.0529],
    253. [83057.8222, 664.9309],
    254. [83057.7349, 677.6618],
    255. [83054.5993, 702.1566]
    256. ],
    257. text: 'Vendre'
    258. },
    259. {
    260. values: [
    261. [83168.4942, 0],
    262. [83173.5953, 29.0944],
    263. [83177.5155, 60.5268],
    264. [83178.2274, 94.9951],
    265. [83178.8583, 129.6222],
    266. [83190.3322, 155.1349],
    267. [83193.0553, 179.3527],
    268. [83196.3542, 205.565],
    269. [83197.8851, 227.5875],
    270. [83202.0866, 247.89],
    271. [83202.6833, 278.4508],
    272. [83204.7512, 311.6391],
    273. [83218.5123, 343.4197],
    274. [83218.5655, 378.3272],
    275. [83222.1664, 395.7356],
    276. [83226.3923, 418.799],
    277. [83230.4766, 446.4546],
    278. [83232.0442, 469.4259],
    279. [83245.1453, 490.0896],
    280. [83249.8511, 523.8051],
    281. [83256.5532, 546.2099],
    282. [83257.7456, 575.9132],
    283. [83259.8746, 593.3904],
    284. [83261.8122, 621.4962],
    285. [83266.4694, 640.2163],
    286. [83270.2922, 669.7849],
    287. [83271.7844, 692.9558],
    288. [83272.8266, 718.0753],
    289. [83277.1333, 751.864],
    290. [83280.1222, 779.7172],
    291. [83282.6788, 809.8779],
    292. [83285.2123, 826.0661],
    293. [83293.2132, 857.981],
    294. [83297.19, 884.2067],
    295. [83311.1421, 899.814],
    296. [83311.5344, 927.7719],
    297. [83314.5662, 954.9667],
    298. [83322.4794, 986.9748],
    299. [83322.8721, 1013.3939],
    300. [83323.0612, 1040.1686]
    301. ],
    302. text: 'Acheter'
    303. }
    304. ]
    305. };
    306.  
    307. let chartupdate = function(c) {
    308.  
    309. // generate random data
    310. if (c === 0) {
    311. let fMidMarketPrice = 1168.49 + (-50 + 100 * Math.random());
    312. } else {
    313. let fMidMarketPrice = 83168.49 + (-500 + 1000 * Math.random());
    314. }
    315.  
    316. let sells = [],
    317. buys = [],
    318. kref, vref, kstep, vstep, mul, vmax = 0;
    319.  
    320. kref = fMidMarketPrice;
    321. vref = 0;
    322. for (let s = 0; s < 100; s++) {
    323. vmax = Math.max(vmax, vref);
    324. sells.push([parseFloat(kref.toFixed(2)), parseFloat(vref.toFixed(4))]);
    325. mul = Math.random() < 0.25 ? 15 : 5;
    326. kstep = mul * Math.random();
    327. vstep = 10 + 15 * Math.random();
    328. kref -= kstep;
    329. vref += vstep;
    330. }
    331.  
    332. kref = fMidMarketPrice;
    333. vref = 0;
    334. for (let b = 0; b < 100; b++) {
    335. vmax = Math.max(vmax, vref);
    336. buys.push([parseFloat(kref.toFixed(2)), parseFloat(vref.toFixed(4))]);
    337. mul = Math.random() < 0.25 ? 15 : 5;
    338. kstep = mul * Math.random();
    339. vstep = 15 + 20 * Math.random();
    340. kref += kstep;
    341. vref += vstep;
    342. }
    343.  
    344. if (c === 0) {
    345. chartConfig['series'][0]['values'] = sells;
    346. chartConfig['series'][1]['values'] = buys;
    347. zingchart.exec('zc1', 'setdata', {
    348. data: chartConfig
    349. });
    350. } else {
    351. chartConfig2['series'][0]['values'] = sells;
    352. chartConfig2['series'][1]['values'] = buys;
    353. zingchart.exec('zc2', 'setdata', {
    354. data: chartConfig2
    355. });
    356. }
    357.  
    358. };
    359.  
    360.  
    361.  
    362. zingchart.render({
    363. id: 'myChart',
    364. data: chartConfig
    365. });
    366. </script>
    367. </body>
    368.  
    369. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingSoft Demo</title>
    7. <style>
    8. * {
    9. font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
    10. font-size: 12px;
    11. }
    12. </style>
    13.  
    14. <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    15. </head>
    16.  
    17. <body>
    18. <div id="myChart"></div>
    19. </body>
    20.  
    21. </html>
    1. html,
    2. body {
    3. height: 100%;
    4. width: 100%;
    5. margin: 0;
    6. padding: 0;
    7. }
    8.  
    9. #myChart {
    10. height: 100%;
    11. width: 100%;
    12. min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16. display: none;
    17. }
    1. let chartConfig = {
    2. type: 'depth',
    3. backgroundColor: '#f3f3f3 #d9d9d9',
    4. options: {
    5. buttonZoomin: {
    6. borderColor: 'red',
    7. borderWidth: 4,
    8. topState: {
    9. backgroundColor: 'blue',
    10. offsetX: 10,
    11. offsetY: 10,
    12. },
    13. },
    14. buttonZoomout: {
    15. borderColor: 'red',
    16. borderWidth: 4,
    17. topState: {
    18. backgroundColor: 'blue',
    19. offsetX: 10,
    20. offsetY: 10,
    21. },
    22. },
    23. currency: '$',
    24. mmpMarker: {
    25. lineColor: 'blue',
    26. lineWidth: 5
    27. },
    28. subtitle: {
    29. text: 'Subtitle'
    30. },
    31. title: {
    32. text: 'Title'
    33. },
    34. },
    35. series: [{
    36. values: [
    37. [1168.49, 0],
    38. [1164.69, 12.0211],
    39. [1163.38, 33.0049],
    40. [1160.98, 45.5622],
    41. [1158.64, 60.4819],
    42. [1154.04, 71.5594],
    43. [1146.54, 83.2051],
    44. [1133.37, 106.8834],
    45. [1129.63, 127.1219],
    46. [1126.89, 145.2484],
    47. [1115.14, 155.8074],
    48. [1113.54, 171.8438],
    49. [1110.49, 184.443],
    50. [1106.92, 202.3068],
    51. [1106.7, 224.5185],
    52. [1104.03, 244.5286],
    53. [1101.99, 256.5801],
    54. [1099.57, 272.8992],
    55. [1099.47, 289.2549],
    56. [1095.76, 300.107],
    57. [1091.75, 320.0837],
    58. [1091.37, 334.7523],
    59. [1086.9, 357.9836],
    60. [1086.6, 375.3844],
    61. [1081.13, 387.3668],
    62. [1079.3, 403.3796],
    63. [1074.56, 420.0898],
    64. [1069.69, 438.8176],
    65. [1068.59, 462.0495],
    66. [1056.35, 484.2044],
    67. [1052.93, 507.0559],
    68. [1052.03, 529.1966],
    69. [1047.46, 541.6345],
    70. [1033.06, 551.942],
    71. [1030.42, 569.7072],
    72. [1025.65, 583.7136],
    73. [1023.38, 608.1764],
    74. [1020.04, 620.0944],
    75. [1018.53, 644.661],
    76. [1014.92, 661.6777]
    77. ],
    78. text: 'Sell'
    79. },
    80. {
    81. values: [
    82. [1168.49, 0],
    83. [1172.22, 33.1932],
    84. [1174.28, 50.5177],
    85. [1174.99, 81.8346],
    86. [1189.53, 104.332],
    87. [1191.07, 119.9178],
    88. [1195.62, 146.3812],
    89. [1199.32, 180.9109],
    90. [1201.89, 199.313],
    91. [1204.34, 228.9945],
    92. [1206.47, 251.6454],
    93. [1209.44, 285.6366],
    94. [1221.89, 312.7949],
    95. [1230.48, 328.6889],
    96. [1235.24, 351.3438],
    97. [1248.33, 377.9289],
    98. [1251.24, 409.9444],
    99. [1253.75, 435.5418],
    100. [1257.48, 453.8852],
    101. [1261.01, 483.8769],
    102. [1265.06, 499.7163],
    103. [1268.75, 529.6374],
    104. [1270.2, 552.1779],
    105. [1272.15, 579.5218],
    106. [1274.19, 606.4376],
    107. [1276.17, 638.8508],
    108. [1283.07, 668.7969],
    109. [1285.76, 694.1647],
    110. [1287.89, 709.9417],
    111. [1288.72, 735.6358],
    112. [1295.71, 765.2281],
    113. [1303.26, 784.6807],
    114. [1305.43, 801.1021],
    115. [1307.78, 817.4528],
    116. [1312.76, 836.7914],
    117. [1317.6, 859.4746],
    118. [1322.31, 891.443],
    119. [1324.35, 907.6098],
    120. [1325.7, 931.1996],
    121. [1528.01, 949.3013]
    122. ],
    123. text: 'Buy'
    124. }
    125. ]
    126. };
    127.  
    128. let chartConfig2 = {
    129. type: 'depth',
    130. backgroundColor: '#000',
    131. options: {
    132. currency: '\u20ac',
    133. title: {
    134. color: '#ff0'
    135. },
    136. subtitle: {
    137. visible: false
    138. },
    139. mmpMarker: {
    140. alpha: 0.75,
    141. lineColor: '#999',
    142. label: {
    143. color: '#fff',
    144. fontSize: 15,
    145. offsetY: 20
    146. }
    147. },
    148. palette: ['#909', '#990'],
    149. },
    150. scaleX: {
    151. item: {
    152. fontSize: 11,
    153. color: '#f90'
    154. }
    155. },
    156. scaleY: {
    157. item: {
    158. color: '#fff'
    159. }
    160. },
    161. scaleY2: {
    162. item: {
    163. color: '#fff'
    164. }
    165. },
    166. plot: {
    167. mode: 'normal'
    168. },
    169. crosshairX: {
    170. plotLabel: {
    171. color: '#fff',
    172. backgroundColor: '#000'
    173. }
    174. },
    175. series: [{
    176. values: [
    177. [83168.4942, 0],
    178. [83165.2911, 24.5257],
    179. [83162.4432, 41.831],
    180. [83155.7512, 55.5769],
    181. [83155.2945, 67.9671],
    182. [83151.4232, 78.4742],
    183. [83151.3712, 91.5577],
    184. [83150.8574, 104.5983],
    185. [83150.4721, 123.8432],
    186. [83149.6144, 147.7095],
    187. [83148.2683, 171.1301],
    188. [83147.3312, 190.1485],
    189. [83142.4782, 210.6557],
    190. [83139.2812, 228.9494],
    191. [83139.1911, 244.5898],
    192. [83134.4493, 258.1534],
    193. [83131.9837, 278.0654],
    194. [83131.6223, 302.7251],
    195. [83130.3352, 317.3595],
    196. [83122.9212, 333.889],
    197. [83118.0342, 352.3895],
    198. [83117.3329, 374.7495],
    199. [83105.0412, 388.6047],
    200. [83103.0253, 404.7422],
    201. [83098.6836, 426.4222],
    202. [83095.4497, 437.743],
    203. [83091.9221, 461.9394],
    204. [83087.6823, 474.8041],
    205. [83083.1435, 495.8427],
    206. [83080.8234, 513.83],
    207. [83078.3357, 535.1954],
    208. [83076.0832, 554.3064],
    209. [83073.8655, 572.399],
    210. [83071.9923, 587.107],
    211. [83068.2523, 606.2238],
    212. [83066.6343, 623.5779],
    213. [83059.5455, 642.0529],
    214. [83057.8222, 664.9309],
    215. [83057.7349, 677.6618],
    216. [83054.5993, 702.1566]
    217. ],
    218. text: 'Vendre'
    219. },
    220. {
    221. values: [
    222. [83168.4942, 0],
    223. [83173.5953, 29.0944],
    224. [83177.5155, 60.5268],
    225. [83178.2274, 94.9951],
    226. [83178.8583, 129.6222],
    227. [83190.3322, 155.1349],
    228. [83193.0553, 179.3527],
    229. [83196.3542, 205.565],
    230. [83197.8851, 227.5875],
    231. [83202.0866, 247.89],
    232. [83202.6833, 278.4508],
    233. [83204.7512, 311.6391],
    234. [83218.5123, 343.4197],
    235. [83218.5655, 378.3272],
    236. [83222.1664, 395.7356],
    237. [83226.3923, 418.799],
    238. [83230.4766, 446.4546],
    239. [83232.0442, 469.4259],
    240. [83245.1453, 490.0896],
    241. [83249.8511, 523.8051],
    242. [83256.5532, 546.2099],
    243. [83257.7456, 575.9132],
    244. [83259.8746, 593.3904],
    245. [83261.8122, 621.4962],
    246. [83266.4694, 640.2163],
    247. [83270.2922, 669.7849],
    248. [83271.7844, 692.9558],
    249. [83272.8266, 718.0753],
    250. [83277.1333, 751.864],
    251. [83280.1222, 779.7172],
    252. [83282.6788, 809.8779],
    253. [83285.2123, 826.0661],
    254. [83293.2132, 857.981],
    255. [83297.19, 884.2067],
    256. [83311.1421, 899.814],
    257. [83311.5344, 927.7719],
    258. [83314.5662, 954.9667],
    259. [83322.4794, 986.9748],
    260. [83322.8721, 1013.3939],
    261. [83323.0612, 1040.1686]
    262. ],
    263. text: 'Acheter'
    264. }
    265. ]
    266. };
    267.  
    268. let chartupdate = function(c) {
    269.  
    270. // generate random data
    271. if (c === 0) {
    272. let fMidMarketPrice = 1168.49 + (-50 + 100 * Math.random());
    273. } else {
    274. let fMidMarketPrice = 83168.49 + (-500 + 1000 * Math.random());
    275. }
    276.  
    277. let sells = [],
    278. buys = [],
    279. kref, vref, kstep, vstep, mul, vmax = 0;
    280.  
    281. kref = fMidMarketPrice;
    282. vref = 0;
    283. for (let s = 0; s < 100; s++) {
    284. vmax = Math.max(vmax, vref);
    285. sells.push([parseFloat(kref.toFixed(2)), parseFloat(vref.toFixed(4))]);
    286. mul = Math.random() < 0.25 ? 15 : 5;
    287. kstep = mul * Math.random();
    288. vstep = 10 + 15 * Math.random();
    289. kref -= kstep;
    290. vref += vstep;
    291. }
    292.  
    293. kref = fMidMarketPrice;
    294. vref = 0;
    295. for (let b = 0; b < 100; b++) {
    296. vmax = Math.max(vmax, vref);
    297. buys.push([parseFloat(kref.toFixed(2)), parseFloat(vref.toFixed(4))]);
    298. mul = Math.random() < 0.25 ? 15 : 5;
    299. kstep = mul * Math.random();
    300. vstep = 15 + 20 * Math.random();
    301. kref += kstep;
    302. vref += vstep;
    303. }
    304.  
    305. if (c === 0) {
    306. chartConfig['series'][0]['values'] = sells;
    307. chartConfig['series'][1]['values'] = buys;
    308. zingchart.exec('zc1', 'setdata', {
    309. data: chartConfig
    310. });
    311. } else {
    312. chartConfig2['series'][0]['values'] = sells;
    313. chartConfig2['series'][1]['values'] = buys;
    314. zingchart.exec('zc2', 'setdata', {
    315. data: chartConfig2
    316. });
    317. }
    318.  
    319. };
    320.  
    321.  
    322.  
    323. zingchart.render({
    324. id: 'myChart',
    325. data: chartConfig
    326. });