I am trying to implement this tutorial and could not get it done. https://www.chartjs.org/docs/latest/axes/cartesian/time.html
Input: list of objects with (time,value) attributes. Time is Integer that means unix time in seconds; value is Float.
The tutorial says "Date Adapters. The time scale requires both a date library and a corresponding adapter to be present. Please choose from the available adapters".
Date library, date-fns: https://github.com/date-fns/date-fns
Question 1. how to install/include the date-fns library? The documentation says "npm", but I think it is only for Node.js, but I have a Django project, Ubuntu. If I just download the zip, there is a bunch of files inside.
Adapter, chartjs-adapter-date-fns https://github.com/chartjs/chartjs-adapter-date-fns.
Question 2. how to install the fns adapter? The documentation says "npm", but I have a Django project, Ubuntu. BUT, if I include <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>, I feel it is enough.
Question 3. after installing adapter and date library, how to fix the script below to make the plot work (Time Cartesian Axis)? I think it is all about updating line point["x"] = elem.time; to convert a unix time to some appropriate type.
HTML
<canvas id="myChart"></canvas>
JS
let points = [];
for(let elem of objs) {
point = {};
point["x"] = elem.time;
point["y"] = elem.value;
points.push(point);
}
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: points,
// Configuration options go here
options: {
responsive: false,
scales: {
x: {
type: 'time',
}
}
}
});
Installing all the 3 required libs can indeed be done using script tags, see live example underneath.
The reason your data doesnt show is because chart.js doesnt expect a data array in the data field. In the data field it expects an object with at least a key for all the datasets which is an array and an optional labels array, but since you are using object format for your data the labels array is not neccesarry.
Each dataset has its own label for the legend and in the dataset object you configure the data array in the data field. See live example:
const options = {
type: 'line',
data: {
datasets: [{
label: '# of Votes',
data: [{
x: 1632664468243,
y: 5
}, {
x: 1632664458143,
y: 10
}],
borderColor: 'pink'
}]
},
options: {
scales: {
x: {
type: 'time'
}
}
}
}
const ctx = document.getElementById('tt').getContext('2d');
new Chart(ctx, options);<canvas id="tt"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>