| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263 |
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Highstock Example</title>
- <style type="text/css">
- #container {
- min-width: 310px;
- max-width: 1040px;
- height: 400px;
- margin: 0 auto;
- }
- </style>
- </head>
- <body>
- <script src="../../code/highcharts.js"></script>
- <div id="container"></div>
- <script type="text/javascript">
- Highcharts.chart('container', {
- chart: {
- type: 'area',
- zoomType: 'xy'
- },
- title: {
- text: 'ETH-BTC Market Depth'
- },
- xAxis: {
- minPadding: 0,
- maxPadding: 0,
- plotLines: [{
- color: '#888',
- value: 0.1523,
- width: 1,
- label: {
- text: 'Actual price',
- rotation: 90
- }
- }],
- title: {
- text: 'Price'
- }
- },
- yAxis: [{
- lineWidth: 1,
- gridLineWidth: 1,
- title: null,
- tickWidth: 1,
- tickLength: 5,
- tickPosition: 'inside',
- labels: {
- align: 'left',
- x: 8
- }
- }, {
- opposite: true,
- linkedTo: 0,
- lineWidth: 1,
- gridLineWidth: 0,
- title: null,
- tickWidth: 1,
- tickLength: 5,
- tickPosition: 'inside',
- labels: {
- align: 'right',
- x: -8
- }
- }],
- legend: {
- enabled: false
- },
- plotOptions: {
- area: {
- fillOpacity: 0.2,
- lineWidth: 1,
- step: 'center'
- }
- },
- tooltip: {
- headerFormat: '<span style="font-size=10px;">Price: {point.key}</span><br/>',
- valueDecimals: 2
- },
- series: [{
- name: 'Bids',
- data: [
- [
- 0.1524,
- 0.948665
- ],
- [
- 0.1539,
- 35.510715
- ],
- [
- 0.154,
- 39.883437
- ],
- [
- 0.1541,
- 40.499661
- ],
- [
- 0.1545,
- 43.262994000000006
- ],
- [
- 0.1547,
- 60.14799400000001
- ],
- [
- 0.1553,
- 60.30799400000001
- ],
- [
- 0.1558,
- 60.55018100000001
- ],
- [
- 0.1564,
- 68.381696
- ],
- [
- 0.1567,
- 69.46518400000001
- ],
- [
- 0.1569,
- 69.621464
- ],
- [
- 0.157,
- 70.398015
- ],
- [
- 0.1574,
- 70.400197
- ],
- [
- 0.1575,
- 73.199217
- ],
- [
- 0.158,
- 77.700017
- ],
- [
- 0.1583,
- 79.449017
- ],
- [
- 0.1588,
- 79.584064
- ],
- [
- 0.159,
- 80.584064
- ],
- [
- 0.16,
- 81.58156
- ],
- [
- 0.1608,
- 83.38156
- ]
- ],
- color: '#03a7a8'
- }, {
- name: 'Asks',
- data: [
- [
- 0.1435,
- 242.521842
- ],
- [
- 0.1436,
- 206.49862099999999
- ],
- [
- 0.1437,
- 205.823735
- ],
- [
- 0.1438,
- 197.33275
- ],
- [
- 0.1439,
- 153.677454
- ],
- [
- 0.144,
- 146.007722
- ],
- [
- 0.1442,
- 82.55212900000001
- ],
- [
- 0.1443,
- 59.152814000000006
- ],
- [
- 0.1444,
- 57.942260000000005
- ],
- [
- 0.1445,
- 57.483850000000004
- ],
- [
- 0.1446,
- 52.39210800000001
- ],
- [
- 0.1447,
- 51.867208000000005
- ],
- [
- 0.1448,
- 44.104697
- ],
- [
- 0.1449,
- 40.131217
- ],
- [
- 0.145,
- 31.878217
- ],
- [
- 0.1451,
- 22.794916999999998
- ],
- [
- 0.1453,
- 12.345828999999998
- ],
- [
- 0.1454,
- 10.035642
- ],
- [
- 0.148,
- 9.326642
- ],
- [
- 0.1522,
- 3.76317
- ]
- ],
- color: '#fc5857'
- }]
- });
- </script>
- </body>
- </html>
|