I am new at HTML and JAVASCRIPT, I am trying to plot a candlestick chart, loading data from python, send it to javascript trough eel module. the picture shows the console.log of [data] required to plot. the plot doesn't show. when i set X close high low open manually it works. can any one show me wath's wrong?
var X = [];
var Op = [];
var Hi = [];
var Lo = [];
var Clo = [];
rows = eel.test("SOLUSDT", "1w")();
rows.then(value => value.map(function(row) {
X.push(new Date(row[0]))}));
rows.then(value => value.map(function(row) {
Op.push(parseFloat(row[1]))}));
rows.then(value => value.map(function(row) {
Hi.push(parseFloat(row[2]))}));
rows.then(value => value.map(function(row) {
Lo.push(parseFloat(row[3]))}));
rows.then(value => value.map(function(row) {
Clo.push(parseFloat(row[4]))}));
var trace = {
//x: X,
close: Clo,
high: Hi,
low: Lo,
open: Op,
// cutomise colors
increasing: {line: {color: 'black'}},
decreasing: {line: {color: 'red'}},
type: 'candlestick',
xaxis: 'x',
yaxis: 'y'
};
var data = [trace];
console.log(data)
var layout = {
dragmode: 'zoom',
showlegend: false,
xaxis: {
rangeslider: {
visible: true
}
}
};
Plotly.newPlot('athrjy', data, layout);
I think the problem comes from here, but still can't find out the solution. I can't access array's elements. console.log(relay[0]) outputs "undifined". the picture shows the console.
var i = 0
rows.then(value => value.map(function(row) {
relay[i] = parseFloat(row[4]);
console.log(relay[i])
i +=1;
}));
console.log(relay[0])