Tradingview chart

Need help
1

Hi i am trying to build my chart plugin using trading view library

in my plugin i have element and in header i have following script

below is my image of the fields of the element

f1
f11648×828 95.1 KB

and below is my update section code
function(instance, properties, context) {
// Ensure Lightweight Charts script is loaded
if (!window.LightweightCharts) {
console.error(“Lightweight Charts script not loaded.”);
return;
}

// Create container for the chart
const candlestickChartContainer = document.createElement('div');
candlestickChartContainer.style.width = '100%';
candlestickChartContainer.style.height = '400px';
candlestickChartContainer.style.position = 'relative';
instance.canvas.append(candlestickChartContainer);

// Create the chart
const candlestickChart = LightweightCharts.createChart(candlestickChartContainer, {
    width: candlestickChartContainer.clientWidth,
    height: candlestickChartContainer.clientHeight,
    layout: {
        backgroundColor: '#ffffff',
        textColor: '#000000',
        attributionLogo: false,
    },
    rightPriceScale: {
        scaleMargins: {
            top: 0.2,
            bottom: 0.2,
        },
    },
    timeScale: {
        rightOffset: 12,
        barSpacing: 3,
        fixLeftEdge: true,
    },
});

// Add candlestick series
const candlestickSeries = candlestickChart.addCandlestickSeries();

// Get dynamic data from properties
var _dates = properties.Times.get(0, properties.Times.length());
var _opens = properties.Opens.get(0, properties.Opens.length());
var _highs = properties.Highs.get(0, properties.Highs.length());
var _lows = properties.Lows.get(0, properties.Lows.length());
var _closes = properties.Closes.get(0, properties.Closes.length());
var _volumes = properties.Volumes.get(0, properties.Volumes.length());

// Function to format date to yyyy-mm-dd
function formatDate(date) {
    const d = new Date(date);
    if (isNaN(d.getTime())) return null; // Return null if the date is invalid

    let month = '' + (d.getMonth() + 1);
    let day = '' + d.getDate();
    const year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

    return [year, month, day].join('-');
}

// Map dynamic data to create data series
var data = _dates.map((date, index) => {
    const formattedDate = formatDate(date); // Format the date

    // Check for null values
    if (formattedDate && _opens[index] != null && _highs[index] != null && _lows[index] != null && _closes[index] != null) {
        const dataPoint = {
            time: formattedDate,
            open: _opens[index],
            high: _highs[index],
            low: _lows[index],
            close: _closes[index]
        };
        return dataPoint;
    }
    return null; // Return null for invalid data points
}).filter(d => d);
console.log(data);
// Set the data for the candlestick series
candlestickSeries.setData(data);

// Resize the chart to fit the container
window.addEventListener('resize', function() {
    candlestickChart.resize(candlestickChartContainer.clientWidth, candlestickChartContainer.clientHeight);
});

}
but constanly getting null value error while my data is proper like below which i am passing
{time: ‘2025-02-13’, open: 236.91, high: 242.34, low: 235.57, close: 241.53}
{time: ‘2025-02-12’, open: 231.2, high: 236.96, low: 230.68, close: 236.87}
{time: ‘2025-02-11’, open: 228.2, high: 235.23, low: 228.13, close: 232.62}
{time: ‘2025-02-10’, open: 229.57, high: 230.59, low: 227.2, close: 227.65}
{time: ‘2025-02-07’, open: 232.6, high: 234, low: 227.26, close: 227.63}
{time: ‘2025-02-06’, open: 231.29, high: 233.8, low: 230.43, close: 233.22}
{time: ‘2025-02-05’, open: 228.53, high: 232.67, low: 228.27, close: 232.47}
{time: ‘2025-02-04’, open: 227.25, high: 233.13, low: 226.65, close: 232.8}
{time: ‘2025-02-03’, open: 229.99, high: 231.83, low: 225.7, close: 228.01}
{time: ‘2025-01-31’, open: 247.19, high: 247.19, low: 233.44, close: 236}
{time: ‘2025-01-30’, open: 238.67, high: 240.79, low: 237.21, close: 237.59}
{time: ‘2025-01-29’, open: 234.12, high: 239.86, low: 234.01, close: 239.36}
{time: ‘2025-01-28’, open: 230.85, high: 240.19, low: 230.81, close: 238.26}
{time: ‘2025-01-27’, open: 224.02, high: 232.15, low: 223.98, close: 229.86}
{time: ‘2025-01-24’, open: 224.78, high: 225.63, low: 221.41, close: 222.78}
{time: ‘2025-01-23’, open: 224.74, high: 227.03, low: 222.3, close: 223.66}
{time: ‘2025-01-22’, open: 219.79, high: 224.12, low: 219.79, close: 223.83}
{time: ‘2025-01-21’, open: 224, high: 224.42, low: 219.38, close: 222.64}
{time: ‘2025-01-17’, open: 232.12, high: 232.29, low: 228.48, close: 229.98}
{time: ‘2025-01-16’, open: 237.35, high: 238.01, low: 228.03, close: 228.26}
{time: ‘2025-01-15’, open: 234.64, high: 238.96, low: 234.43, close: 237.87}
{time: ‘2025-01-14’, open: 234, high: 236, low: 232, close: 233}

any help would be appreciated.

2

This topic was automatically closed after 70 days. New replies are no longer allowed.