I'm facing a challenge while plotting a graph using chart JS with approximately 300,000 data points. The performance is slow, so I am exploring ways to enhance it by utilizing the data decimation plugin. However, the data doesn't seem to be getting decimated as expected.
Here's a snippet of my code:
const dataset = {
datasets: {[,
data : [{
x : timetag,
y : data,
}],
id : 'id',
label: 'label',
indexAxis: 'x'
,]}
const config = {
type: 'line',
data: dataset,
options: {
// parsing: false,
animation: false,
scales : {
x: {
type: 'time',
title: {
display: true,
text: 'Time Of Day'},
},
y:{
min : 0,
},
}}};
const myChart = new Chart(
document.getElementById("Chart"),
config
);
function decimateData(myChart) {
myChart.options.plugins.decimation.algorithm = 'lttb';
myChart.options.plugins.decimation.enabled = true;
myChart.options.plugins.decimation.samples = 50;
myChart.update()
}
sample of the data structure
[
{
"x": "2022-02-24 00:00:26",
"y": "11"
},
{
"x": "2022-02-24 00:00:27",
"y": "7"
},
{
"x": "2022-02-24 00:00:28",
"y": "8"
}
]
Referencing the chart js docs:
- The dataset must have an indexAxis of 'x'
- The dataset must be a line
- The X axis for the dataset must be either a 'linear' or 'time' type axis
- Data must not need parsing, i.e. parsing must be false
- The dataset object must be mutable. The plugin stores the original data as dataset._data and then defines a new data property on the dataset.
I believe requirements 1, 2, and 3 are met. However, enabling parsing: false in the config causes issues with my plot.
What could be wrong with my data structure that prevents chart js from interpreting it accurately?
Any advice or assistance on this matter would be greatly appreciated. Thank you.
Update
Below is the function I used to generate the data options in the config block:
function genDatasets() {
base = {
datasets: [],
parsing: false,,
fill: false};
for (var i = 0; i < sources.length; i++){
set =[{
data : [{
x : timetags,
y : data,
}],
id : sources[i].slice(0,-4),
label: sources[i].slice(0,-4),
borderColor: colours[i],
indexAxis: 'x'
,}]
base['datasets'].push(set[0]) ;
}
return base;
};