Ciao a tutti , sono qualche anno che mi sto affacciando alla programmazione . sono qualche settimana che sto sbattendo la testa contro il muro per questo problema che ora vi cito. Ho creato un grafico che prende i dati tramite comando fetch() . fino a questo punto è ok ... vorrei ora però che il grafico si aggiorni ogni 1 secondo. non voglio il refresh della pagina ma solamente che ci sia un aggiornamento...ho provato in svariati modi ad usare setInterval () ma non riesco... potete aiutarmi?? ( so che vedrete delle lacune in ciò che ho fatto , sono un pivellino )
questo è il codice:
<html lang="en" >
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
<link rel="icon" href="images/favicon1.png" type="image/png" />
</head>
<body>
<div>
<div id="parent">
<div id="tvchart"></div>
</div>
<style>
#parent {
position: relative;
width: 100%;
padding-bottom: 50%;
}
#tvchart {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<script>
const log = console.log;
const container = document.getElementById("tvchart");
var intervallo = window.setInterval(frame, 1000);
function frame(){
var data = new Date();
$("tvchart")}
$(document).ready(function () {
const defaultW = $(window).width(); //$(window).width();
const defaultH = $(window).height(); //$(window).height();
const chart = LightweightCharts.createChart(container, {
width: defaultW,
height: defaultH
});
chart.applyOptions({
timeScale: {
rightOffset: 12,
barSpacing: 10,
fixLeftEdge: true,
lockVisibleTimeRangeOnResize: true,
rightBarStaysOnScroll: true,
borderVisible: true,
borderColor: 'blek',
visible: true,
timeVisible: true,
secondsVisible: true,
},
},
);
chart.applyOptions({
layout: {
textColor: '#696969',
fontSize: 22,
fontFamily: 'Calibri',
},
});
chart.applyOptions({
watermark: {
color: 'rgba(28,160,255,0.5)' , //'rgba(11, 94, 29, 0.4)',
visible: true,
fontSize: 50,
horzAlign: 'left',
vertAlign: 'bottom',
},
});
chart.applyOptions({
grid: {
vertLines: {
color: 'rgba(70, 130, 180, 0.5)',
style: 1,
visible: true,
},
horzLines: {
color: 'rgba(70, 130, 180, 0.5)',
style: 1,
visible: true,
},
},
});
const candleSeries = chart.addCandlestickSeries();
fetch(`https://**********/v0/apps/3c14481f-42d8-4944-b7a8-80ca77c16b91/collections/**********************offset=0&limit=unlikely`, {
method: "GET",
headers:{'Authorization' : 'Bearer **************************}
})
.then(res => res.json())
.then(data => {const cdata = data.records.map(a => {
return{ time:parseFloat(a.time) ,open:parseFloat(a.open ) ,high:parseFloat(a.high ) ,low:parseFloat(a.low ),close:parseFloat(a.close )}
});
candleSeries.setData(cdata);
})
.catch(err => log(err))
$(window).resize(function() {
const w = $('#parent').outerWidth() < defaultW ? $('#parent').outerWidth() : defaultW;
const h = $('#parent').outerHeight() < defaultH ? $('#parent').outerHeight() : defaultH;
chart.applyOptions({
width: $(window).width(),
height: $(window).height(),
});
});
})
</script>
</body>
</html>