javascript - TradingView Lightweight Chart price seems to not scale correctly - Stack Overflow

admin管理员组

文章数量:1353578

I just added the real time data of bitcoin to my chart. There has been a peak that is so high even tradingview can't handle it... At least, on my chart. This is how it looks like: As you can see at the second of june bitcoin went up so high that it goes out of the screen. This should be fixable since on the actual tradingview page itself it all look good and normal: Also if I zoom out on my chart it look perfectly normal: So what I want is that my chart scales the same way as it does on tradingview.

This is my code:

// Predifined variables
var chart, priceArea, fetchedData;

// Faster to write log();
const log = console.log;

// Get data.
fetch('./getData.php', {
    method: 'GET'
}).then(response => response.json()).then(function (data) {
    // Set data to a global variable for global usage.
    fetchedData = data;

    // To make sure the chart is initialized and set after this fetch is done. Else I would get a error for setting data that I do not yet have.
    initChartSettings();
});


/**
 * Initializes the chart and its settings.
 */
function initChartSettings() {
    // Create chart canvas
    chart = LightweightCharts.createChart(document.getElementById('Chart'), {width: 1500, height: 700,});

    // Could also be done in the width and height code line but thought it might work for scaling.
    chart.applyOptions({
        timeScale: {
            // Adds hours and minutes to the chart.
            timeVisible: true,
            secondsVisible: false
        }
    });

    // Init price line
    priceArea = chart.addAreaSeries();

    // This array is needed to make the setData work. It expects an array with objects.
    let arrayWithOldData = [];

    // Get each item in the fetchedData array. Since it gives more data then I need I use this for loop to take the time and value. Used to create chart lines.
    for (let i = 0; i < fetchedData.length; i++) {
        let dataElement = fetchedData[i];

        // Object needed for the arrayWithOldData.
        let oldData = {
            // Timestamp / 1000 to make it a workable timestamp for tradingview chart and + 7200 seconds to make sure I get a timestamp of amsterdam (+2:00).
            time: (dataElement[0] / 1000) + 7200,
            value: dataElement[4]
        };

        // Add the data to the array.
        arrayWithOldData.push(oldData);
    }

    log(arrayWithOldData);

    // Set data
    priceArea.setData(arrayWithOldData);

    // PriceLine options
    priceArea.applyOptions({
        topColor: 'rgba(70, 130, 180, 0.5)',
        bottomColor: 'rgba(70, 130, 180, 0.1)',
        lineColor: '#4682B4',
        lineWidth: 2
    });

    startTime = new Date();
    updateLiveChartData();
}

What I have tried:

I have tried the following in my code: .md -> price axis -> priceScale() -> autoScale: true and scaleMargins with diffrent top and bottoms. Seems scaleMargins works, but then when I go back in time and make sure I dont see the peak anymore everything is as good as flat :( I also tried to put at the end of the code: chart.timeScale().fitContent(); But this gives the same result as how I have it now but then zoomed out. If I zoom in with timeScale it still looking the same.

I just added the real time data of bitcoin to my chart. There has been a peak that is so high even tradingview can't handle it... At least, on my chart. This is how it looks like: As you can see at the second of june bitcoin went up so high that it goes out of the screen. This should be fixable since on the actual tradingview page itself it all look good and normal: Also if I zoom out on my chart it look perfectly normal: So what I want is that my chart scales the same way as it does on tradingview..

This is my code:

// Predifined variables
var chart, priceArea, fetchedData;

// Faster to write log();
const log = console.log;

// Get data.
fetch('./getData.php', {
    method: 'GET'
}).then(response => response.json()).then(function (data) {
    // Set data to a global variable for global usage.
    fetchedData = data;

    // To make sure the chart is initialized and set after this fetch is done. Else I would get a error for setting data that I do not yet have.
    initChartSettings();
});


/**
 * Initializes the chart and its settings.
 */
function initChartSettings() {
    // Create chart canvas
    chart = LightweightCharts.createChart(document.getElementById('Chart'), {width: 1500, height: 700,});

    // Could also be done in the width and height code line but thought it might work for scaling.
    chart.applyOptions({
        timeScale: {
            // Adds hours and minutes to the chart.
            timeVisible: true,
            secondsVisible: false
        }
    });

    // Init price line
    priceArea = chart.addAreaSeries();

    // This array is needed to make the setData work. It expects an array with objects.
    let arrayWithOldData = [];

    // Get each item in the fetchedData array. Since it gives more data then I need I use this for loop to take the time and value. Used to create chart lines.
    for (let i = 0; i < fetchedData.length; i++) {
        let dataElement = fetchedData[i];

        // Object needed for the arrayWithOldData.
        let oldData = {
            // Timestamp / 1000 to make it a workable timestamp for tradingview chart and + 7200 seconds to make sure I get a timestamp of amsterdam (+2:00).
            time: (dataElement[0] / 1000) + 7200,
            value: dataElement[4]
        };

        // Add the data to the array.
        arrayWithOldData.push(oldData);
    }

    log(arrayWithOldData);

    // Set data
    priceArea.setData(arrayWithOldData);

    // PriceLine options
    priceArea.applyOptions({
        topColor: 'rgba(70, 130, 180, 0.5)',
        bottomColor: 'rgba(70, 130, 180, 0.1)',
        lineColor: '#4682B4',
        lineWidth: 2
    });

    startTime = new Date();
    updateLiveChartData();
}

What I have tried:

I have tried the following in my code: https://github./tradingview/lightweight-charts/blob/master/docs/customization.md -> price axis -> priceScale() -> autoScale: true and scaleMargins with diffrent top and bottoms. Seems scaleMargins works, but then when I go back in time and make sure I dont see the peak anymore everything is as good as flat :( I also tried to put at the end of the code: chart.timeScale().fitContent(); But this gives the same result as how I have it now but then zoomed out. If I zoom in with timeScale it still looking the same.

• javascript
• charts
• tradingview-api
• lightweight-charts

Share Improve this question Follow edited Jun 8, 2020 at 13:47 PineCoders-LucF 8,80922 gold badges1313 silver badges2323 bronze badges asked Jun 3, 2020 at 11:46 AllartAllart 9281313 silver badges3939 bronze badges 4

• Please make sure that all values you've passed as the data are numbers, not strings or something. – timocov Commented Jun 17, 2020 at 9:07
• @timocov That can be very good one of the problems. I ignored this problem for a while. And after building it more and more I found out my markers again didn't work. Because I set the price of the priceline series as a string instead of a number. It was not giving me any errors but still fktop the markers and probably also this scaling thing. Since it now all works :) – Allart Commented Jun 18, 2020 at 12:55
• I hope we'll fix it soon and will throw an error if you pass something wrong to the library - see github./tradingview/lightweight-charts/issues/315 – timocov Commented Jun 18, 2020 at 16:26
• It would help ALOT. Especially for people like me, hahaha. – Allart Commented Jun 19, 2020 at 19:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

It seems that the issue caused by invalid data format (you've passed strings where numbers are expected). We'll warn in debug mode about invalid types after https://github./tradingview/lightweight-charts/issues/315.

EDIT: Since milestone 3.2 warnings are shown when debug mode is enabled.

本文标签： javascriptTradingView Lightweight Chart price seems to not scale correctlyStack Overflow