'Dynamically sortable table with candlestick charts

I'm trying to draw a sortable table in datatables with charts. In python, I get in turn the data for the columns and the data I need to draw the charts- then I add a row to the table. As soon as I go through all the ticker names, the queries start to be resent, the existing row is replaced with new data and immediately sorted into the table itself.

Can you please advise, how do I make another column with charts?

(async function () {

  //small amount of tickers for example
    var tickers = ["1INCHUSDT",
        "AAVEUSDT",
        "ADAUSDT",
        "AKROUSDT",
        "ALGOUSDT",
        "ZENUSDT",
        "ZILUSDT",
        "ZRXUSDT"];

    let tableData = tickers.map(ticker => {
        return {
            'Ticker': ticker,
            'a': '',
            'b': '',
            'c': '',
            'd': '',
            'e': '',
            'f': '',
            'g': ''
        }
    });

    let table = new DataTable('#table_tickers', {
        'data': tableData,
        'columns': [{ "data": "Ticker" },
        { "data": "a" },
        { "data": "b" },
        { "data": "c" },
        { "data": "d" },
        { "data": "e" },
        { "data": "f" },
        { "data": "g" }],
        'order': [[3, 'desc']]
    });


    //setInterval(updateCharts, 5000);

    while (true) {
        await updateData();
        await delay(5000);
    }

    async function updateData() {
        for (const ticker of tickers) {
            var url = new URL('http://localhost:5000/history/' + ticker);

            var newData = [];

            await fetch(url)
                .then((r) => r.json())
                .then((response) => {
                    console.log(response);
                    newData = response;
                    //Suppose here I have an array of data to draw the chart (newData[10]).
                    //What's next??
                });


            var linkname = ticker

            var row = table.row(function (idx, data, node) {
                return data.Ticker == ticker;
            }).data({
                'Ticker': ticker,
                'a': newData[1],
                'b': newData[2],
                'c': newData[3],
                'd': newData[4],
                'e': newData[5],
                'f': newData[6],
                'g': linkname.link('https://www.tradingview.com/chart/?symbol=BINANCE%3A' + ticker)
            }).draw();

        };
    }
})();

function delay(time) {
    return new Promise(resolve => setTimeout(resolve, time));
}

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />


<html>
    <head>
        <title>Binance Futures Size</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
        <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
    </head>

    <body>
        <!-- <div class="container" id="container">
  
        </div> -->
        <table id="table_tickers" class="display">
            <thead>
                <tr>
                    <th>Ticker</th>
                    <th>Per 1</th>
                    <th>Per 2</th>
                    <th>Per 3</th>
                    <th>Per 4</th>
                    <th>Per 5</th>
                    <th>Per 6</th>
                    <th>Link</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </body>

    <footer>
        <script src="{{ url_for('static', filename='chart.js') }}"></script>
    </footer>
</html>

javascript

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Dynamically sortable table with candlestick charts

Sources

Related Questions