lastPriceAnimation did not work #1306

minghangben · 2023-03-17T08:43:55Z

link: #567

dear developer, i just want that animation when price jumps, but lastPriceAnimation did not work
@SlicedSilver

mydemo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
</head>

<body>
    <script>
        var chart = LightweightCharts.createChart(document.body, {
            width: 600,
            height: 300,
            // crosshair: {
            //     mode: LightweightCharts.CrosshairMode.Normal,
            // },
        });

        var candleSeries = chart.addLineSeries({
            lastPriceAnimation: LightweightCharts.LastPriceAnimationMode.OnDataUpdate,
        });
        // chart.timeScale().scrollToPosition(2000, true);
        // chart.timeScale().scrollToRealTime()

        var data = [
            { time: '2019-04-11', value: 80.01 },
            { time: '2019-04-12', value: 96.63 },
            { time: '2019-04-13', value: 76.64 },
            { time: '2019-04-14', value: 81.89 },
            { time: '2019-04-15', value: 74.43 },
            { time: '2019-04-16', value: 80.01 },
            { time: '2019-04-17', value: 96.63 },
            { time: '2019-04-18', value: 76.64 },
            { time: '2019-04-19', value: 81.89 },
            { time: '2019-04-20', value: 74.43 },
        ];

        candleSeries.setData(data);

        var lastClose = data[data.length - 1].value;
        var lastIndex = data.length - 1;

        var targetIndex = lastIndex + 105 + Math.round(Math.random() + 30);
        var targetPrice = getRandomPrice();

        var currentIndex = lastIndex + 1;
        var currentBusinessDay = { day: 29, month: 5, year: 2019 };
        var ticksInCurrentBar = 0;
        var currentBar = {
            value: null,
            time: currentBusinessDay,
        };

        function mergeTickToBar(price) {
            // if (currentBar.value === null) {
            currentBar.value = price;
            // } else {
            //     currentBar.close = price;
            //     currentBar.high = Math.max(currentBar.high, price);
            //     currentBar.low = Math.min(currentBar.low, price);
            // }
            candleSeries.update(currentBar);
        }

        function reset() {
            candleSeries.setData(data);
            lastClose = data[data.length - 1].value;
            lastIndex = data.length - 1;

            targetIndex = lastIndex + 5 + Math.round(Math.random() + 30);
            targetPrice = getRandomPrice();

            currentIndex = lastIndex + 1;
            currentBusinessDay = { day: 29, month: 5, year: 2019 };
            ticksInCurrentBar = 0;
        }

        function getRandomPrice() {
            return 10 + Math.round(Math.random() * 10000) / 100;
        }

        function nextBusinessDay(time) {
            var d = new Date();
            d.setUTCFullYear(time.year);
            d.setUTCMonth(time.month - 1);
            d.setUTCDate(time.day + 1);
            d.setUTCHours(0, 0, 0, 0);
            return {
                year: d.getUTCFullYear(),
                month: d.getUTCMonth() + 1,
                day: d.getUTCDate(),
            };
        }

        setInterval(function () {
            var noisedPrice = getRandomPrice();
            mergeTickToBar(noisedPrice);

            // move to next bar
            currentIndex++;
            currentBusinessDay = nextBusinessDay(currentBusinessDay);
            currentBar = {
                value: null,
                time: currentBusinessDay,
            };
            ticksInCurrentBar = 0;
            if (currentIndex === 5000) {
                reset();
                return;
            }
            if (currentIndex === targetIndex) {
                // change trend
                lastClose = noisedPrice;
                lastIndex = currentIndex;
                targetIndex = lastIndex + 5 + Math.round(Math.random() + 30);
                targetPrice = getRandomPrice();
            }
        }, 1000);
    </script>
</body>

</html>

The text was updated successfully, but these errors were encountered:

SlicedSilver · 2023-03-17T12:13:36Z

LastPriceAnimation appears to be working correctly in the example you provided.

It is the expanding circle animation which appears at the last data point.

Screen.Recording.2023-03-17.mov

Perhaps you are looking for these methods on the timescale:

You can call these after you call series.update()

minghangben · 2023-03-20T02:21:30Z

thx SlicedSilver, is there has some smooth flow animation just like this ?

@SlicedSilver

SlicedSilver · 2023-03-20T09:59:24Z

Here is a related discussion:
#1278 (comment)

You could attempt achieve this by using the update method to 'animate' the price (as discussed in the comment above).

There isn't a built-in in what to achieve exactly what you are looking for.

minghangben changed the title ~~lastPriceAnimation did not word~~ lastPriceAnimation did not work Mar 17, 2023

SlicedSilver closed this as completed Mar 17, 2023

SlicedSilver added question General question. working as intended Works as intended. labels Mar 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

lastPriceAnimation did not work #1306

lastPriceAnimation did not work #1306

minghangben commented Mar 17, 2023 •

edited

Loading

SlicedSilver commented Mar 17, 2023

minghangben commented Mar 20, 2023 •

edited

Loading

SlicedSilver commented Mar 20, 2023

lastPriceAnimation did not work #1306

lastPriceAnimation did not work #1306

Comments

minghangben commented Mar 17, 2023 • edited Loading

SlicedSilver commented Mar 17, 2023

minghangben commented Mar 20, 2023 • edited Loading

SlicedSilver commented Mar 20, 2023

minghangben commented Mar 17, 2023 •

edited

Loading

minghangben commented Mar 20, 2023 •

edited

Loading