Null value error when trying to feed OHLC data to Trading Viewight weight charts

I am feeding the following OHLC data to Tradingview's light weight CandleStick chart and it is giving error:

lightweight-charts.js:7 Uncaught Error: Value is null
    at f (lightweight-charts.js:7:2213)
    at Ai.Candlestick [as Yh] (lightweight-charts.js:7:45786)
    at Ai.Hs (lightweight-charts.js:7:47034)
    at Ut.ne (lightweight-charts.js:7:30810)
    at lightweight-charts.js:7:27153
    at Array.map (<anonymous>)
    at Ut.qs (lightweight-charts.js:7:27140)
    at Ut.Fs (lightweight-charts.js:7:24613)
    at Ut.xt (lightweight-charts.js:7:24448)
    at fs (lightweight-charts.js:7:104471)

Below isO OHLC data in JSON format:

[{"time":"2023-10-17 15:15:00","open":"371.6","high":"371.79","low":"371.6","close":"371.79"},{"time":"2023-10-17 15:05:00","open":"371.6","high":"371.6","low":"371.6","close":"371.6"},{"time":"2023-10-17 15:00:00","open":"370.1","high":"375","low":"370.1","close":"375"},{"time":"2023-10-17 14:55:00","open":"374.9","high":"374.9","low":"370.1","close":"370.1"},{"time":"2023-10-17 14:45:00","open":"370.06","high":"375","low":"370.06","close":"374.9"},{"time":"2023-10-17 14:40:00","open":"370.06","high":"370.06","low":"370.06","close":"370.06"},{"time":"2023-10-17 14:15:00","open":"375","high":"375","low":"375","close":"375"},{"time":"2023-10-17 13:55:00","open":"375.5","high":"375.5","low":"375","close":"375"},{"time":"2023-10-17 13:40:00","open":"375.5","high":"375.5","low":"375.5","close":"375.5"},{"time":"2023-10-17 13:10:00","open":"371.5","high":"375","low":"371.5","close":"375"},{"time":"2023-10-17 12:30:00","open":"372","high":"372","low":"371.5","close":"371.5"},{"time":"2023-10-17 12:10:00","open":"372","high":"372","low":"372","close":"372"},{"time":"2023-10-17 11:55:00","open":"375","high":"375","low":"374","close":"374"},{"time":"2023-10-17 11:45:00","open":"371.1","high":"375","low":"371.1","close":"375"},{"time":"2023-10-17 11:00:00","open":"371.1","high":"371.1","low":"371.1","close":"371.1"},{"time":"2023-10-17 10:55:00","open":"372","high":"372","low":"372","close":"372"},{"time":"2023-10-17 10:45:00","open":"371.15","high":"371.15","low":"371.15","close":"371.15"},{"time":"2023-10-17 10:15:00","open":"371.01","high":"371.01","low":"371.01","close":"371.01"},{"time":"2023-10-16 15:25:00","open":"375","high":"375","low":"374.89","close":"374.89"},{"time":"2023-10-16 15:05:00","open":"375","high":"375","low":"375","close":"375"},{"time":"2023-10-16 13:25:00","open":"374.99","high":"374.99","low":"374.99","close":"374.99"},{"time":"2023-10-16 13:00:00","open":"374","high":"374","low":"372.01","close":"372.01"},{"time":"2023-10-16 12:20:00","open":"374","high":"374","low":"374","close":"374"},{"time":"2023-10-16 12:15:00","open":"370.56","high":"374","low":"370.56","close":"374"},{"time":"2023-10-16 12:00:00","open":"371","high":"371","low":"370.56","close":"370.56"},{"time":"2023-10-16 11:55:00","open":"373.5","high":"373.5","low":"371","close":"371"},{"time":"2023-10-16 11:50:00","open":"373","high":"373.5","low":"373","close":"373.5"},{"time":"2023-10-16 11:05:00","open":"375","high":"375.01","low":"373","close":"373"},{"time":"2023-10-16 10:45:00","open":"371.07","high":"375","low":"371.07","close":"375"},{"time":"2023-10-16 10:30:00","open":"384","high":"384","low":"371.07","close":"371.07"}]

The code is given below:

<script>
        function generateCandleSticks(data,chartId) {
            const chart = LightweightCharts.createChart(document.getElementById(chartId), { width: 500, height: 400,timeScale: {
            rightOffset: 1, 
            barSpacing: 1}})
            const candlestickSeries = chart.addCandlestickSeries(
            { 
                upColor: '#26a69a', 
                downColor: '#ef5350',
                borderVisible: false,
                wickUpColor: '#26a69a', 
                wickDownColor: '#ef5350'
            })
            chart.applyOptions({
        timeScale: {
            timeVisible: true,
            secondsVisible: false,
            tickMarkFormatter: (time, tickMarkType, locale) => {
                return time
            },
        },
        })
        candlestickSeries.setData(data)
        chart.timeScale().fitContent()
    }
    </script>
    <script>
        
        $(document).ready(function() {
            console.log('Ready Loaded')  
            let ohlcData = '<?= $result ?>'
            console.log(ohlcData)
            console.log('=================================')
            ohlcData = JSON.parse(ohlcData)

            ohlcData.forEach(item => {
                // Convert the time string to a JavaScript Date object
                const date = new Date(item.time);

                // Convert the date to a UTC timestamp
                item.time = date.getTime() / 1000; // Divide by 1000 to get seconds

                // Convert open, high, low, close to numbers
                item.open = parseFloat(item.open);
                item.high = parseFloat(item.high);
                item.low = parseFloat(item.low);
                item.close = parseFloat(item.close);
                });

            
            console.log(ohlcData)
            generateCandleSticks(ohlcData,'chart')
        })
    </script>

Current State of Chart

Solution

Based on that error you mentioned:

Assertion failed: data must be asc ordered by time, index=1, time=1697537100, prev time=1697537700

It seems that you have to reorder your OHLC data. Right now you have them in descending order. I believe a simple sorting will do the work here:

const reorderedData = ohlcData.sort((a, b) => {
  if (new Date(a.time).getTime() > new Date(b.time).getTime()) {
    return 1;
  }
  if (new Date(a.time).getTime() < new Date(b.time).getTime()) {
    return -1;
  }
  return 0;
});