Improving of trade arrows

[Ambrase]

I'm really lack of feature to have order history from begin (this can be trade arrow itself) to finish (cross maybe?) with dotted line from begin to end and customized text label for trade(profit/loss, take profit/stop loss ratio, name of robot executed this trade). Could you add this or any hints on how this can be done? Sad that you haven't forum for project to ask questions :)

[albertosantini]

If you have an array of trades representing your order history, you can use techan.plot.tradearrow.

There is an example in the gallery: http://bl.ocks.org/andredumas/3c0eefdd77a6380b1a35

Define the trade arrows:

                var tradearrow = techan.plot.tradearrow()
                          .xScale(x)
                          .yScale(y)
                          .orient(function (d) {
                              return d.type.startsWith("buy") ? "up" : "down";
                          });
                          // .on("mouseenter", enter)
                          // .on("mouseout", out);

Append the trade arrows to the chart:

                ohlcSelection.append("g")
                    .attr("class", "tradearrow");

Update the trade arrows with your custom payload (P/L, agent and so on):

                    myTrades = trades.map(function (trade) {
                        return {
                            date: new Date(trade.openTime),
                            type: trade.currentUnits > 0 ? "buy" : "sell",
                            price: trade.price
                        };
                    });
                    svg.select("g.tradearrow").datum(myTrades).call(tradearrow);

Enjoy. :)

[manishpgupta]

@albertosantini - thanks for the explanation. I was wondering if there is an easy way to change the styles of the arrows. Like, instead of the arrow shape, I want to show some other image/symbol? Is it possible?

[albertosantini]

@manishpgupta I don't think so.

SVG arrow is defined here: https://github.com/andredumas/techan.js/blob/fcb12dd2f9c0c84dca7c594801959af5b51d5969/src/svg/arrow.js