Chart bugged when using equal date values

[andre-ac]

Lightweight Charts Version: standalone.production

Steps/code to reproduce:

fetch("/api/tradehistory")
  .then(function(response) {
    return response.json();
  })
  .then(function(data,response) {    
    console.log("Data loaded ")
    lineSeries.setData(data.map(line => {
    	return { time: line.time, value: line.price };
    }));
  })

This happens since I'm assigning equal time values with different price values

Sample data being fed through tradehistory endpoint
{ "maker_order": "98ab5a24-d113-495c-9d8d-fc2cafb4551a", "pair": "ETHUSD", "price": 110, "quantity": 1, "taker_order": "7d718a29-b1d5-4a61-a11e-0849f3047c6e", "time": 1595258908, "trade_id": "d9e14353-7d37-4906-b2ee-97e2beb60fbe" }, { "maker_order": "e0790be7-4688-4710-974d-d64df1a478da", "pair": "ETHUSD", "price": 100, "quantity": 1, "taker_order": "7d718a29-b1d5-4a61-a11e-0849f3047c6e", "time": 1595258908, "trade_id": "ded10223-bd48-477e-a299-b52b832c698a" }

Actual behavior:

Chart upon loading has very strange lines

Example below:

Right now it shows the chart like this:

But after ~500ms of loading it turns into how it should show

Expected behavior:

As seen above, if the same date value has 2 difference prices it should show an horizontal line for that time

[timocov]

if the same date value has 2 difference prices it should show an horizontal line for that time

I'm afraid we won't do that. If you'd like to have horizontal line between 2 time points - assign values on different time points. Meanwhile, we'll report it as error (in development mode only) in #315.

[andre-ac]

if the same date value has 2 difference prices it should show an horizontal line for that time

I'm afraid we won't do that. If you'd like to have horizontal line between 2 time points - assign values on different time points. Meanwhile, we'll report it as error (in development mode only) in #315.

Fair enough, but any idea why it loads looking all messed up but then after ~500ms looks fine?

[timocov]

Maybe you move chart a bit so the point is out of the viewport?

[andre-ac]

Sorry, I forgot to mention that I have a setInterval running on the fetch too, so the relevant code is:

setInterval(function(){
  fetch("/api/tradehistory")
  .then(function(response) {
    return response.json();
  })
  .then(function(data,response) {    
    console.log("Data loaded ")
    lineSeries.setData(data.map(line => {
    	return { time: line.time, value: line.price };
    }));
  })},1000)

On the initial load the chart looks all bugged, but once this function runs again it looks normal, exact same data.

Full chart function below:

function chart(){
  var charid = document.getElementById("chartContainer")
    
  var chart = LightweightCharts.createChart(charid, 
      { width: 700, height: 300 } 
      );

      chart.applyOptions({
        layout: {
            backgroundColor: '#fffef2',
            textColor: '#000000',
            fontSize: 12,
            fontFamily: 'Calibri'}
      });
      
      var lineSeries = chart.addLineSeries({
        title: 'ETHUSD',
        color:'#000000'});
        
  setInterval(function(){
  fetch("/api/tradehistory")
  .then(function(response) {
    return response.json();
  })
  .then(function(data,response) {    
    console.log("Data loaded ")
    lineSeries.setData(data.map(line => {
    	return { time: line.time, value: line.price };
    }));
  })},1000)

  chart.timeScale().fitContent();

  lineSeries.applyOptions({
      priceFormat: {
          type: 'custom',
         minMove: 0.01,
          formatter: price => '$' + price.toFixed(2),
      }
  })
};

[timocov]

Can you create jsfiddle with repro please?

[andre-ac]

https://jsfiddle.net/kqL2dnzg/5/

Notice how it initially loads the chart weirdly but then for some reason loads it "normal-looking"

[timocov]

Your bin has been blocked. Please contact us at https://jsonbin.io/contact to unblock.

🤔

[andre-ac]

Weird, updated the bin @timocov https://jsfiddle.net/xk1boeuf/

[timocov]

I guess it's related to some overlapping internally. When you set data for series, we prepare it internally (you can see in https://github.com/tradingview/lightweight-charts/blob/master/src/api/data-layer.ts), there is a map of data item by time point. I think that there is some overlapping with is fixed somehow after the next setting data. When you set data, we try to do less and generate "inremental" update whenever it's possible, so I guess that something is cached from the previous setting a data and is used in the next one. Anyway, every data item must have unique time points and all items must be ordered in asc order.

[andre-ac]

Interesting, thanks for the update, we can close this now. Thanks for the help