Chart.js line did not show 50.789 points #9321
Comments
|
You are using a 4 year old version of chart.js (which is unsupported since the release of V3) please update to the latest stable version (V3.3.2). This should resolve the issue as you can see in this sample where 100.000 points are being plot without any noticable delay: https://www.chartjs.org/docs/master/samples/advanced/data-decimation.html |
|
Thanks LeeLenaleee for your reply. I'll change for the new version. However, could you tell me the maximun limit points? I have a really large amount of data per minute. |
|
AFAIK Cart.js does not have any hard limits although the more points you will try to render the more resources it will take and thus longer because the amount of calculations will increase a lot and the amount of draws on the canvas, idk what would be the bottleneck. In the sample I linked from 10000000 amount of points it started to take iritating long to wait for it to update, at a factor 10 more points my chrome tab will crash because it gets out of memory |
|
Yeah, I understood what you said. But I changed the version to v3.3.2 and the graph did not plot with 50.000 points. Maybe because of the out of memory that you said. But something that I don't understand is why the page load and the graph appear in blank. I used the inspection firefox tool and I saw all the points. However they did not appear in the graph. With this amount, can the graph plot normally? If I reduce to 16.000 points the graph plot. |
|
Do you have an interactive sample because as you can see in the docs with 100.000 points it loads fine, if I try it in a jsFiddle it works fine, although the graph is not usable since there are too many points: https://jsfiddle.net/Leelenaleee/tc3qgdze/4/ |
|
I ran the jsFiddle with my values and it returned an error that it did not appear in the console.log browser: https://jsfiddle.net/1stdfcn9/1/ . Could you help me? |
|
@etimberg , this is the test with my values: https://jsfiddle.net/1stdfcn9/1/ |
|
Your |
|
@LeeLenaleee, thanks! The console.log did not show me this error before. I used the single quotes becaming the label's value in string and the graph plot: https://jsfiddle.net/f31sh8oy/ . Thanks for your help! |
I have an array with 50.789 points to show in the line graph. After populated the array and send to view the graph did not plot.
Expected Behavior
Plot the 50.789 points in the line graph.
Current Behavior
The line graph show black.
Steps to Reproduce
run the code below :
new Chart(document.getElementById("grafico3"), {
type: 'line',
data: {
labels: y3,
datasets: [{
label: 'Pressão',
borderColor: "rgba(0,0,0)",
backgroundColor: "rgba(0,0,0)",
fill: false,
data: x3,
showLine: false,
}]
},
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
title: {
display: true,
text: 'Pressão X Tempo'
},
scales: {
yAxes: [{
ticks: {
"beginAtZero": true
},
scaleLabel: {
"display": true,
"labelString": unidadeSelecionadaP
},
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
}],
xAxes: [{
"display": true,
id: 'x-axis-1',
"scaleLabel": {
"display": true,
}
}]
},
pan: {
enabled: true,
mode: 'x',
speed: 0.5,
sensitivity: 7,
rangeMax: {
x: 400
},
rangeMin: {
x: 0
}
},
zoom: {
enabled: true,
mode: 'x',
rangeMax: {
x: 200
},
rangeMin: {
x: 100
}
}
}
});
Context
This issue affected the project not to use the chart.js API in our application. I'll need to change with other if I could not show the points. This application is so important for the oil an gas segment in Brazil. And we choose your API, because it is the only one that provides graphs with the quality that we need.
The data amount to be analysed with the graph is so lage in 1h. You could not imagine. I hope that this issue will be consider in the Chat.js developer community.
Environment
The text was updated successfully, but these errors were encountered: