IW4M-Admin/Admin/webfront/main.html

<script>
    function getPlayerHistoryChart(playerHistory, i) {
        ///////////////////////////////////////

        // thanks to cnavas js :(
        playerHistory.forEach(function(item, i) {
            playerHistory[i].x = new Date(playerHistory[i].x);
  
        });        

        return new CanvasJS.Chart(`graph-player-history-${i}`, {
            backgroundColor: "#191919",
            height: 100,
            animationEnabled: true,

            toolTip: {
                contentFormatter: function (e) {
                    var date = new Date(e.entries[0].dataPoint.x);
                    return date.toLocaleTimeString('en-US', { timeZone: 'America/New_York', hour12: true }) + " - " + e.entries[0].dataPoint.y + " players";
                }
            },

            axisX: {
                interval: 1,
                gridThickness: 0,
                lineThickness: 0,
                tickThickness: 0,
                margin: 0,
                valueFormatString: " ",
            },

            axisY: {
                gridThickness: 0,
                lineThickness: 0,
                tickThickness: 0,
                minimum: 0,
                margin: 0,
                valueFormatString: " ",
                labelMaxWidth: 0,
            },

            legend: {
                maxWidth: 0,
                maxHeight: 0,
                dockInsidePlotArea: true,
            },

            data: [{
                showInLegend: false,
                type: "splineArea",
                color: "rgba(0, 122, 204, 0.432)",
                markerSize: 0,
                dataPoints: playerHistory,
            }]
        });
        //////////////////////////////////////
    }

    function getServers() {
        $.getJSON("/_servers", function (result) {

            $.each(result, function (i, server) {
                var selectedServer = $(`#server-${i}`);

                if (selectedServer.length < 1) {
                    $('#serverList').append(`<div id="server-${i}"><div class="serverContainer"></div></div>`);
                    selectedServer = $(`#server-${i}`);
                    selectedServer.append(`<div class="player-history" id="graph-player-history-${i}"></div><hr/><br/><br/>`)
                }


                var template =
                    `
                        <div class ="serverInfo table">
                            <div class ="serverTitle tableCell">${server.serverName}</div>
                            <div class ="serverMap tableCell">${server.mapName}</div>
                            <div class ="serverPlayers tableCell">${server.currentPlayers}/${server.maxPlayers}</div>
                        </div>
                        <div class ="serverChatList table">${formatMessages(server.chatHistory)}</div>
                        <div class ="serverPlayerList table">${formatPlayers(server.players)}</div>
                        <div style="clear:both;"></div>
                        <hr/>`;

                selectedServer.find('.serverContainer').html(template);

                if (!selectedServer.find(`#graph-player-history-${i}`).children().length) {
                    var historyGraph = getPlayerHistoryChart(server.PlayerHistory, i);
                    $(document).trigger("graphready", [historyGraph]);
                }
            });
        });
    }

    $(document).ready(function () {
        getServers();
        setInterval(getServers, 1000);
    });

    $(document).on("graphready", function (e, graph) {
        // why is this so slow I have to call it async?
        setTimeout(graph.render, 1);
    })
</script>

<div id="serverList">
</div>