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