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