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