Prepend () duplicates the first data

plotly.js
1

Hello guys, as you can see in the image I have a graph with historical data of the price of an asset, in the part of the candles I have two layers, one that shows the historical data of 5000 candles and the other is of a single candle which is update using a websockets,
The historical candles are loaded with a delay of 1 interval, that is, if it were 6:00 p.m. the historical one would be loaded until 5:00 p.m. and the layer of a single candle would show the data of 6:00 p.m., when the last candle was closing, that is to say at 7:00 p.m., this single candle with the 18:00 data is added to the history with a prepend and the single candle continues showing the 19:00 data and so on, in this way I save Having to update the entire history with each price change since I only update the layer that has only one candle and when it closes it is added to the history, the problem I have is that when the first prepend is executed the data is duplicated and It only happens in the first prepend, as you can see in the image the data is 5000 for x, open, high, low and close, after the first prepend is executed they should all go up to 5001 but this only happens in x and the others increase in 2 which moves the data 1 position to the left and c As you see the data of the hoverlabel does not coincide with those of the fixed label, as I mentioned, this only happens in the first prepend () it increases 1 for x and 2 for the other data and in the following prepends it increases only 1 in all the data as can view in console output

image
image1304×768 81.6 KB

this is the code i am using

var candle = {
	open: [[clOpen]],
	high: [[clHigh]],
	low: [[clLow]],
	close: [[clClose]]
},
indicators = {
	y: [[klOsc[0][0]], [klOsc[1][0]], [klOsc[2][0]]]
}

console.log(plotLayer.data[2].open)	// return 5000				
Plotly.prependTraces(plotLayer, candle, [plotIndex.candles])
console.log(plotLayer.data[2].open) //return 5002
Plotly.prependTraces(plotLayer, indicators, [plotIndex.oscillator, plotIndex.signal, plotIndex.histo])

The error is triggered from the first prepend since even changing the order and applying a log before and after the first prepend to see the length of the array, the length increases by 2 in the first prepend

A temporary solution that I have given you is to cause an error in the prepend method by adding the visible variable in the data array, this way the method does not duplicate the data

var candle = {
	open: [[clOpen]],
	high: [[clHigh]],
	low: [[clLow]],
	close: [[clClose]],
    visible: true
}

For some strange reason this works, however I do not like to see the console full of error messages and less when I am debugging, I have other observations but I already wrote a lot and I do not want to confuse those who read the post.

2

I have found the solution to my problem and at the same time I found a way to add data without using the prepend () method as well as the way to modify a single data of the graph without having to graph all the data, but I will answer that in the thread I opened about it some time ago, now I will explain my problem and how is it that I found a way to add data to the graph without using prepend and without having to graph all the points again, I will not go into much detail I will only put the form of add data to the beginning or end of a graph without the use of prepend () or extend()

	candles = {
		x: [time], 
		close: [close], 
		high: [high],  
		low: [low], 
		open: [open],
		type: 'candlestick',
		...
	}

where time, close, high, low, open are global arrays that contain the data, at the time of creating the graph each point of the graph is linked to these arrangements so that it is just by changing a data of one of the arrays these are updated automatically in the graph, but here I wanted to show you how to do the prepend without using the method, for this we use the method unshift () of Arrays which adds a value to the beginning of an array and since the arrays are linked to the graph only I need to do the following to add a new data to my graph without using prepend ()

time.unshift(timedata)
open.unshift(opendata)
high.unshift(highdata)
low.unshift(lowdata)
close.unshift(closedata)

and in the same way we can do the extend () in the following way

time[time.length] = timedata
open[open.length] = opendata
high[high.length] = highdata
low[low.length] = lowdata
close[close.length] = closedata

It is also possible to make these changes using the reference to the graphic layer that we obtain in the following way

myPlot = document.getElementById(‘myPlot’)

With this reference we could apply the same technique to do the prepend and the extend without using global arrays

myPlot.data[0].x.unshift(timedata) //prepend

myPlot.data[0].x[myPlot.data[0].x.length] = timedata // extend

and returning to my error, the problem is that I updated the arrays and later towards a prepend, so the data was duplicated