20

I'm using Tradigview Chart Widget to display data. I can't find a way to draw lines(or something else) on chart, and to save the drawings in order to display them when the page reloads.

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
    <div id="tradingview_6fd01"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL chart</span></a> by TradingView</div>
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    <script type="text/javascript">
        new TradingView.widget({
            "width": 980,
            "height": 610,
            "symbol": "NASDAQ:AAPL",
            "interval": "D",
            "timezone": "Etc/UTC",
            "theme": "Light",
            "style": "1",
            "locale": "en",
            "toolbar_bg": "#f1f3f6",
            "enable_publishing": false,
            "allow_symbol_change": true,
            "container_id": "tradingview_6fd01"
        });
    </script>
</div>
<!-- TradingView Widget END -->

codepen: http://codepen.io/rpokrovskij/pen/LgGzyg

mhrabiee
  • 805
  • 10
  • 23
Test O.
  • 221
  • 1
  • 2
  • 8
  • Have you came up with a solution? I`m facing the same problem. – bitQUAKE Sep 26 '18 at 14:51
  • SO code snippet doesn't work with tradingview . use codepen: https://codepen.io/rpokrovskij/pen/LgGzyg – Roman Pokrovskij Oct 03 '18 at 08:24
  • what kind of figure you want to draw? If it just points or circle you could add a overlay canvas on top of the graph. Record the coordinates and when save it. On reload redraw the figures. – Pawnesh Kumar Oct 03 '18 at 10:11
  • @bitQUAKE, what dou want to draw - any graphic primitives on knowing coordinates? – Dan Brandt Oct 03 '18 at 11:39
  • Yes, I want to draw shapes into these graphs like in the tradingview charting library where you define X as Date and Y as price. But I guess Roman Pokrovskij is right. This will not work on widgets. – bitQUAKE Oct 03 '18 at 11:50
  • I think you can draw custom graphics on chart's canvas, but if you want to do it towards any elements of chart, you will need there coordinates on canvas at that moment - and this is another task. Write if you'll have any ideas, please – Dan Brandt Oct 03 '18 at 12:10

2 Answers2

12

For anyone who wants to draw on Widget but is not dependent on tradingview live data can use the tradingview charting library. It is free but you have to request access to the github repository.

Here is an example how easy it is to draw a shape:

var order = widget.chart().createOrderLine()
    .setText("Buy Line")
    .setLineLength(3) 
    .setLineStyle(0) 
    .setQuantity("221.235 USDT")
order.setPrice(7000);

This will then result in the following drawing (BTC/USDT chart): enter image description here

There are plenty of example in the github repository so you wont be lost. BUT you have to create an own datafeed or at least set up a websocket connection to your desired data provider/marketplace.

I hope this helps everyone who is facing the same problem.

bitQUAKE
  • 473
  • 1
  • 8
  • 19
  • can you please refer to come sandbox or codepen? I want the exact same view in my react application. but somehow couldn't find a way around with your answer, it seems very close. – Jawad ul hassan Apr 05 '20 at 18:30
  • 1
    If you have access to the following Github repository: https://github.com/tradingview/charting_library/ and using this specific library, then you can use the above code inside the widgets 'onChartReady' callback: widget.onChartReady(() => {...}); – bitQUAKE Apr 15 '20 at 13:58
  • @bitQUAKE How to remove this. If i enter value in texbox create line and when i empty textbox remove order line – chintan mahant May 07 '20 at 12:09
  • @chintanmahant Please check out this documentation: https://github.com/serdimoa/charting/wiki/Chart-Methods and compare to my code above. My code sits inside 'widget.onChartReady(() => {' – bitQUAKE May 08 '20 at 09:20
  • Which library do you mean? "Technical Analysis Charts" or "Charting & Trading Platform"? – aladagemre Aug 17 '21 at 13:01
  • @aladagemre the "Charting & Trading Platform" is a paid library, so the "Technical Analysis charts" is probably the one. – carkod Sep 02 '22 at 00:32
5

Tradigview Chart Widget can show only fixed list of predefined TradingView "studies":

https://www.tradingview.com/wiki/Widget:TradingView_Widget

that means it is impossible to create custom charts with it.

Roman Pokrovskij
  • 9,449
  • 21
  • 87
  • 142