crypto trading bot
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

280 lines
11 KiB

  1. <!--
  2. This chart.html view uses the Highstock component from www.highcharts.com
  3. The component is ONLY free of charge for non-profit/personal use.
  4. For further details or for buying a commercial license, visit the vendor
  5. website: https://shop.highsoft.com/highcharts/
  6. http://jsfiddle.net/tvpcwLj9/
  7. -->
  8. <html>
  9. <head>
  10. <title>Green Gekko trading bot - chart view</title>
  11. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12. <link rel = "stylesheet" type = "text/css" href = "https://cloud.think5.de/gekko/include/charting.css" />
  13. </head>
  14. <script src="https://cloud.think5.de/gekko/include/charting.js"></script>
  15. <script src="https://cloud.think5.de/gekko/include/theme.js"></script>
  16. <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  17. <script src="./mybacktest.js"></script>
  18. <body>
  19. <div id="container" style="min-height: 900px; min-width: 310px; margin: 0 auto;"></div>
  20. <script>
  21. $(document).ready(function() {
  22. // split the data set into ohlc and volume
  23. var ohlc = [],
  24. volume = [],
  25. trades = [],
  26. dataLength = data.chartCandles.length,
  27. tradeLength = data.trades.length
  28. for (let i=0; i < tradeLength; i += 1) {
  29. let isBuy = data.trades[i].action === 'buy' ? true : false;
  30. let txt = `
  31. Trade: ${data.trades[i].action.toUpperCase()} <br/><br/>
  32. Price: ${data.trades[i].price}
  33. `;
  34. if (data.trades[i].origin !== undefined) txt += '<br/><br/>Origin: ' + data.trades[i].origin
  35. trades.push({
  36. x: data.trades[i].date*1000, // the date
  37. title: isBuy ? 'B' : 'S',
  38. text: txt,
  39. color: isBuy ? 'green' : 'red',
  40. fillColor: isBuy ? 'green' : 'red',
  41. stackDistance: isBuy ? 50 : 25,
  42. minPointLength: isBuy ? 30 : 15
  43. });
  44. }
  45. for (let i=0; i < dataLength; i += 1) {
  46. var diff = data.chartCandles[i].close - data.chartCandles[i].open;
  47. ohlc.push({
  48. x: data.chartCandles[i].start*1000, // the date
  49. open: data.chartCandles[i].open, // open
  50. high: data.chartCandles[i].high, // high
  51. low: data.chartCandles[i].low, // low
  52. close: data.chartCandles[i].close, // close
  53. color: diff > 0 ? 'green' : (diff === 0 ? 'green' : 'red'), // color
  54. lineColor: diff > 0 ? 'green' : (diff === 0 ? 'green' : 'red'),
  55. });
  56. volume.push({
  57. x: data.chartCandles[i].start*1000, // the date
  58. y: data.chartCandles[i].volume, // the volume
  59. color: '#434348'
  60. });
  61. }
  62. var lastDate = data.chartCandles[data.chartCandles.length - 1].start*1000;
  63. // create the chart
  64. var myChart = {
  65. navigator: {
  66. enabled:true,
  67. xAxis: {
  68. ordinal: false,
  69. min: data.chartCandles[0].start*1000,
  70. }
  71. },
  72. title: {
  73. text: data.market.asset + data.market.currency + ', ' + data.market.exchange + ' // ' + data.strategy + ' strategy'
  74. },
  75. yAxis: [{
  76. labels: {
  77. align: 'right',
  78. x: -3
  79. },
  80. title: {
  81. text: 'OHLC'
  82. },
  83. height: 300,
  84. lineWidth: 2,
  85. resize: {
  86. enabled: true
  87. }
  88. }, {
  89. labels: {
  90. align: 'right',
  91. x: -3
  92. },
  93. title: {
  94. text: 'Volume'
  95. },
  96. height: 100,
  97. top: 400,
  98. offset: 0,
  99. lineWidth: 1
  100. }
  101. ],
  102. series: [{
  103. type: 'candlestick',
  104. name: data.market.asset + data.market.currency,
  105. id: 'main',
  106. data: ohlc,
  107. dataGrouping: {
  108. units: groupingUnits
  109. },
  110. yAxis: 0,
  111. lineWidth: 1,
  112. tooltip: {
  113. valueDecimals: 2
  114. },
  115. turboThreshold: 0,
  116. //compare: 'percent'
  117. }, {
  118. type: 'flags',
  119. name: 'Flags on series',
  120. data: trades,
  121. width: 14,
  122. yAxis: 0,
  123. style: { // text style
  124. color: 'white'
  125. },
  126. states: {
  127. hover: {
  128. fillColor: '#395C84' // darker
  129. }
  130. },
  131. onSeries: 'main',
  132. shape: 'squarepin'
  133. }, {
  134. type: 'column',
  135. name: 'Volume',
  136. data: volume,
  137. yAxis: 1,
  138. dataGrouping: {
  139. units: groupingUnits
  140. },
  141. tooltip: {
  142. valueDecimals: 2
  143. },
  144. turboThreshold: 0,
  145. }]
  146. }
  147. function prepareYAxis(name, count) {
  148. var yAxis = {
  149. labels: {
  150. align: 'right',
  151. x: -3
  152. },
  153. title: {
  154. text: name
  155. },
  156. height: 100,
  157. top: 400 + (120 * count),
  158. offset: 0,
  159. lineWidth: 1
  160. }
  161. return yAxis;
  162. }
  163. function addIndicators(indicators) {
  164. var count = 1;
  165. for (var ind in indicators) {
  166. //multiple value indicator
  167. if (Array.isArray(indicators[ind].data[0].value) === true) {
  168. count++;
  169. for (var j=0; j<indicators[ind].data[0].value.length; j++) {
  170. var data = [];
  171. for (var i=0; i<indicators[ind].data.length; i++) {
  172. let item = indicators[ind].data[i];
  173. data.push({
  174. x: item.start*1000,
  175. y: item.value[j].value
  176. });
  177. }
  178. let serie = {
  179. name: indicators[ind].data[0].value[j].name,
  180. type: 'line',
  181. yAxis: count,
  182. data: data,
  183. gapSize: 5,
  184. colorIndex: 5-j,
  185. tooltip: {
  186. valueDecimals: 2
  187. },
  188. turboThreshold: 0,
  189. dataGrouping: {
  190. units: groupingUnits
  191. },
  192. threshold: null
  193. };
  194. myChart.series.push(serie);
  195. }
  196. myChart.yAxis.push(prepareYAxis(indicators[ind].meta.name, count-1));
  197. let containerHeight = 800 + (125*(count-1)) + "px";
  198. $('#container').css({minHeight: 600 + (125*(count-1)) + "px"});
  199. }
  200. //single value indicator
  201. if (Array.isArray(indicators[ind].data[0].value) === false) {
  202. count++;
  203. let data = [];
  204. for (var i=0; i<indicators[ind].data.length; i++) {
  205. let item = indicators[ind].data[i];
  206. data.push({
  207. x: item.start*1000,
  208. y: item.value
  209. });
  210. }
  211. let serie = {
  212. name: ind,
  213. type: 'area',
  214. yAxis: count,
  215. data: data,
  216. gapSize: 5,
  217. tooltip: {
  218. valueDecimals: 2
  219. },
  220. turboThreshold: 0,
  221. dataGrouping: {
  222. units: groupingUnits
  223. },
  224. colorIndex: count-2,
  225. fillColor: {
  226. linearGradient: {
  227. x1: 0,
  228. y1: 0,
  229. x2: 0,
  230. y2: 1
  231. },
  232. stops: [
  233. [0, Highcharts.getOptions().colors[count-2]],
  234. [1, Highcharts.Color(Highcharts.getOptions().colors[count-2]).setOpacity(0).get('rgba')]
  235. ]
  236. },
  237. threshold: null
  238. };
  239. myChart.yAxis.push(prepareYAxis(indicators[ind].meta.name, count-1));
  240. myChart.series.push(serie);
  241. let containerHeight = 800 + (125*(count-1)) + "px";
  242. $('#container').css({minHeight: 600 + (125*(count-1)) + "px"});
  243. }
  244. }
  245. }
  246. addIndicators(data.indicators);
  247. var fullChart = Object.assign({}, myOptions, myChart);
  248. window.chart = Highcharts.stockChart('container', fullChart);
  249. });
  250. </script>
  251. </body>
  252. </html>