I have a twelvedata api, where i get my data to the lightweightchart. I convert the time to unix timestamp with getTime(), but the chart is still not working.
Error:
Uncaught Error: Value is null
The code:
var intervals = ['15min', '1day', '1week', '1month'];
const apiKey = 'myapikey';
async function fetchData(interval) {
const now = new Date();
let startDate, endDate;
if (interval === '15min') {
// fetch last 14 days of data
endDate = now.toISOString().split('T')[0];
startDate = new Date(now.getTime() - 14 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
} else if (interval === '1day') {
// fetch last 6 weeks of data
endDate = now.toISOString().split('T')[0];
startDate = new Date(now.getTime() - 6 * 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
} else if (interval === '1week') {
// fetch last 12 months of data
endDate = now.toISOString().split('T')[0];
startDate = new Date(now.getTime() - 12 * 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
} else if (interval === '1month') {
// fetch last 3 years of data
endDate = now.toISOString().split('T')[0];
startDate = new Date(now.getTime() - 3 * 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
}
const url = `https://api.twelvedata.com/time_series?symbol=AAPL&interval=${interval}&apikey=${apiKey}&start_date=${startDate}&end_date=${endDate}&format=JSON&timezone=utc`;
const response = await fetch(url);
const data = await response.json();
console.log(data);
const values = data.values || [];
return values.map(d => {
return {
time: new Date(d.datetime).getTime(),
open: Number(d.open),
high: Number(d.high),
low: Number(d.low),
close: Number(d.close)
};
});
}
// let candlestickSeries;
let candlestickSeries;
async function syncToInterval(interval) {
const data = await fetchData(interval);
console.log('data for interval:', interval);
console.log(data);
if (candlestickSeries) {
chart.removeSeries(candlestickSeries);
}
candlestickSeries = chart.addCandlestickSeries({
upColor: '#4caf50',
downColor: '#ef5350',
borderVisible: false
});
candlestickSeries.setData(data);
}
// initial load
syncToInterval(intervals[0]);
var switcherElement = createSimpleSwitcher(intervals, intervals[0], syncToInterval);
var chartElement = document.createElement('div');
var chart = LightweightCharts.createChart(chartElement, {
width: 900,
height: 600,
layout: {
background: {
type: 'solid',
color: '#000000',
},
textColor: '#d1d4dc',
},
grid: {
vertLines: {
visible: false,
},
horzLines: {
color: 'rgba(42, 46, 57, 0.5)',
},
},
rightPriceScale: {
borderVisible: false,
},
timeScale: {
borderVisible: false,
},
crosshair: {
horzLine: {
visible: false,
},
},
});
const currentLocale = window.navigator.languages[0];
const myPriceFormatter = Intl.NumberFormat(currentLocale, {
style: "currency",
currency: "USD", // Currency for data points
}).format;
chart.applyOptions({
localization: {
priceFormatter: myPriceFormatter,
},
});
document.body.appendChild(chartElement);
document.body.appendChild(switcherElement);
I tryed deleting the getTime(), and in the chart there showed up one bar. I tryed to make a breakdown to hour,minute,second and then convert to unix timestamp but that not worked to.
If you want to use a timestamp, then the time property should be defined as a UNIX timestamp. This is different to the value you get from the native JS Date object. Essentially you would need to divide the number by 1000.
(https://tradingview.github.io/lightweight-charts/docs/api#utctimestamp)