Lines and Annotations

I’m trying to plot simple horizontal lines, referencing data stored externally, and via a loop.

As there are no documented drawing tools, so I’m opting to add datapoints to a line series, on demand.

Sample data: {xe: 1562713200, xs: 1561834800, ye: 12835.97409692, ys: 12244}

The code is designed to add one or more line series dependent on the data returned, although in the examples with static code, I can see that the chart line does not cope with missing data for the timeframe resulting in a solid horizontal line, when the data should start and stop in the middle of the chart.

This is the code in question: ` function loadTrendLines() {

                const url = "/api/trendlines/" + symbol.replace("/", "_") + "/" + timeframe;

                $.ajax({
                    type: 'GET',
                    url: url,
                    contentType: 'application/json',
                    dataType: 'json',
                    responseType: 'application/json',


                    success: function (jdata)
                    {
                        console.log(jdata);

                        var i;
                        for (i = 0; i < jdata.TrendLines.length; ++i) {
                            console.log(jdata.TrendLines[i]);

                            var tldata = [];

                            tldata.push({ time: jdata.TrendLines[i].xe, value: jdata.TrendLines[i].ye });
                            tldata.push({ time: jdata.TrendLines[i].xs, value: jdata.TrendLines[i].ue });

                            var lineSeries = chart.addLineSeries({
                                lastValueVisible: false
                            });

                            lineSeries.setData(tldata);

                        }

                    }

                });
            }`

I’m receiving the following error:

Uncaught Error: Value is undefined at h (lightweight-charts.standalone.production.js:7) at p (lightweight-charts.standalone.production.js:7) at t.updateSeriesData (lightweight-charts.standalone.production.js:7) at t.updateData (lightweight-charts.standalone.production.js:7) at e.t.update (lightweight-charts.standalone.production.js:7) at Object.success (HTMLPage1.html?symbol=BINANCE:BTC/USDT&barstoshow=100&timeframe=60&trendlines=1:252) at c (jquery-3.4.1.min.js:2) at Object.fireWith [as resolveWith] (jquery-3.4.1.min.js:2) at l (jquery-3.4.1.min.js:2) at XMLHttpRequest.<anonymous> (jquery-3.4.1.min.js:2)

If I manually define the xe, xs, ye and ue values, running the same inner loop logic, but placing this outside of the loop, it is successful, however this is not referencing any live data, merely static examples.

Can you please advise on a) whether this workaround should be viable, and b) if there are drawing tools that can be leveraged?

[jimeney]

No problem. To confirm, I’ve replaced, in my local, static example, the histogram with an area series and the results are perfect for my use - I will test this shortly against the dynamic data

[timocov]

The 1.0.1 version is published just now.

https://github.com/tradingview/lightweight-charts/releases/tag/v1.0.1