chartjs-plugin-streaming
chartjs-plugin-streaming copied to clipboard
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):
- https://github.com/chartjs/chartjs-adapter-date-fns
- https://github.com/chartjs/chartjs-adapter-luxon
- https://github.com/chartjs/chartjs-adapter-moment
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!