index.htm 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Highstock Example</title>
  7. <style type="text/css">
  8. #container {
  9. min-width: 310px;
  10. max-width: 1040px;
  11. height: 400px;
  12. margin: 0 auto;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <script src="../../code/highcharts.js"></script>
  18. <div id="container"></div>
  19. <script type="text/javascript">
  20. Highcharts.chart('container', {
  21. chart: {
  22. type: 'area',
  23. zoomType: 'xy'
  24. },
  25. title: {
  26. text: 'ETH-BTC Market Depth'
  27. },
  28. xAxis: {
  29. minPadding: 0,
  30. maxPadding: 0,
  31. plotLines: [{
  32. color: '#888',
  33. value: 0.1523,
  34. width: 1,
  35. label: {
  36. text: 'Actual price',
  37. rotation: 90
  38. }
  39. }],
  40. title: {
  41. text: 'Price'
  42. }
  43. },
  44. yAxis: [{
  45. lineWidth: 1,
  46. gridLineWidth: 1,
  47. title: null,
  48. tickWidth: 1,
  49. tickLength: 5,
  50. tickPosition: 'inside',
  51. labels: {
  52. align: 'left',
  53. x: 8
  54. }
  55. }, {
  56. opposite: true,
  57. linkedTo: 0,
  58. lineWidth: 1,
  59. gridLineWidth: 0,
  60. title: null,
  61. tickWidth: 1,
  62. tickLength: 5,
  63. tickPosition: 'inside',
  64. labels: {
  65. align: 'right',
  66. x: -8
  67. }
  68. }],
  69. legend: {
  70. enabled: false
  71. },
  72. plotOptions: {
  73. area: {
  74. fillOpacity: 0.2,
  75. lineWidth: 1,
  76. step: 'center'
  77. }
  78. },
  79. tooltip: {
  80. headerFormat: '<span style="font-size=10px;">Price: {point.key}</span><br/>',
  81. valueDecimals: 2
  82. },
  83. series: [{
  84. name: 'Bids',
  85. data: [
  86. [
  87. 0.1524,
  88. 0.948665
  89. ],
  90. [
  91. 0.1539,
  92. 35.510715
  93. ],
  94. [
  95. 0.154,
  96. 39.883437
  97. ],
  98. [
  99. 0.1541,
  100. 40.499661
  101. ],
  102. [
  103. 0.1545,
  104. 43.262994000000006
  105. ],
  106. [
  107. 0.1547,
  108. 60.14799400000001
  109. ],
  110. [
  111. 0.1553,
  112. 60.30799400000001
  113. ],
  114. [
  115. 0.1558,
  116. 60.55018100000001
  117. ],
  118. [
  119. 0.1564,
  120. 68.381696
  121. ],
  122. [
  123. 0.1567,
  124. 69.46518400000001
  125. ],
  126. [
  127. 0.1569,
  128. 69.621464
  129. ],
  130. [
  131. 0.157,
  132. 70.398015
  133. ],
  134. [
  135. 0.1574,
  136. 70.400197
  137. ],
  138. [
  139. 0.1575,
  140. 73.199217
  141. ],
  142. [
  143. 0.158,
  144. 77.700017
  145. ],
  146. [
  147. 0.1583,
  148. 79.449017
  149. ],
  150. [
  151. 0.1588,
  152. 79.584064
  153. ],
  154. [
  155. 0.159,
  156. 80.584064
  157. ],
  158. [
  159. 0.16,
  160. 81.58156
  161. ],
  162. [
  163. 0.1608,
  164. 83.38156
  165. ]
  166. ],
  167. color: '#03a7a8'
  168. }, {
  169. name: 'Asks',
  170. data: [
  171. [
  172. 0.1435,
  173. 242.521842
  174. ],
  175. [
  176. 0.1436,
  177. 206.49862099999999
  178. ],
  179. [
  180. 0.1437,
  181. 205.823735
  182. ],
  183. [
  184. 0.1438,
  185. 197.33275
  186. ],
  187. [
  188. 0.1439,
  189. 153.677454
  190. ],
  191. [
  192. 0.144,
  193. 146.007722
  194. ],
  195. [
  196. 0.1442,
  197. 82.55212900000001
  198. ],
  199. [
  200. 0.1443,
  201. 59.152814000000006
  202. ],
  203. [
  204. 0.1444,
  205. 57.942260000000005
  206. ],
  207. [
  208. 0.1445,
  209. 57.483850000000004
  210. ],
  211. [
  212. 0.1446,
  213. 52.39210800000001
  214. ],
  215. [
  216. 0.1447,
  217. 51.867208000000005
  218. ],
  219. [
  220. 0.1448,
  221. 44.104697
  222. ],
  223. [
  224. 0.1449,
  225. 40.131217
  226. ],
  227. [
  228. 0.145,
  229. 31.878217
  230. ],
  231. [
  232. 0.1451,
  233. 22.794916999999998
  234. ],
  235. [
  236. 0.1453,
  237. 12.345828999999998
  238. ],
  239. [
  240. 0.1454,
  241. 10.035642
  242. ],
  243. [
  244. 0.148,
  245. 9.326642
  246. ],
  247. [
  248. 0.1522,
  249. 3.76317
  250. ]
  251. ],
  252. color: '#fc5857'
  253. }]
  254. });
  255. </script>
  256. </body>
  257. </html>