Uncaught Error - Date parsing issue with sample

I am having an issue and I am not sure how to troubleshoot from here. I am running a Flask app to visualize scientific instrument data. I have used chartjs to show this data in real time but its not as smooth as this plugin. When trying to run the tutorial I receive the following error:

jquery.min.js:2 Uncaught Error: This method is not implemented: Check that a complete date adapter is provided.

I found removing the x-scale options allows the chart to render with no errors.

    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <canvas id="canvas"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <button class="btn btn-primary" id="start_btn" onclick="start_cal()">Start</button>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"
            integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"
            integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-streaming/2.0.0/chartjs-plugin-streaming.min.js"
            integrity="sha512-pSxAn0V22F4p92VllULJWP5yR5a5FfSPCzHum2P7MrbzmYNiaYsED0UZUF9JzRSZvRlemas5Yqf7F90xFvFthA=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $(function () {
            const config = {
                type: 'line',
                data: {
                    datasets: [
                        {
                            label: 'Dataset 1',
                            backgroundColor: 'rgba(255, 99, 132, 0.5)',
                            borderColor: 'rgb(255, 99, 132)',
                            borderDash: [8, 4],
                            fill: true,
                            data: []
                        },
                        {
                            label: 'Dataset 2',
                            backgroundColor: 'rgba(54, 162, 235, 0.5)',
                            borderColor: 'rgb(54, 162, 235)',
                            cubicInterpolationMode: 'monotone',
                            fill: true,
                            data: []
                        }
                    ]
                },
                options: {
                    scales: {
                        x: {
                            type: 'realtime',
                            realtime: {
                                delay: 2000,
                                onRefresh: chart => {
                                    chart.data.datasets.forEach(dataset => {
                                        dataset.data.push({
                                            x: Date.now(),
                                            y: Math.random()
                                        });
                                    });
                                }
                            }
                        }
                    }
                },
            }
            let canvas = document.getElementById("canvas").getContext("2d");
            new Chart(canvas, config);
        });
    </script>

Remove this and the chart renders, of course without any data or functionality:

x: {type: 'realtime',
    realtime: {
        delay: 2000,
        onRefresh: chart => {
            chart.data.datasets.forEach(dataset => {
                dataset.data.push({
                    x: Date.now(),
                    y: Math.random()
                });
            });
        }
    }
}

Any insight on how to get around this or what I am doing wrong would be greatly appreciated, thank you :)

I was having the same issue. To solve your issue, you will need to install one of the following date adapters (whichever you prefer):

I see that you are already using moment so you could use the date adapter for moment by adding this script: <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script> and by using moment() in your x field instead of Date.now. So something like this:

    realtime: {
        delay: 2000,
        onRefresh: chart => {
            chart.data.datasets.forEach(dataset => {
                dataset.data.push({
                    x: moment(),
                    y: Math.random()
                });
            });
        }
    }
}

Let me know if you have any questions!

nagix / chartjs-plugin-streaming

Uncaught Error - Date parsing issue with sample #147