javascriptlightweight-chartstwelvedata

How can i convert time to unix timestamp?


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.


Solution

  • 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)