Page 1 of 1

Large data points return error in datetime stockchart

Posted: Mon Jan 24, 2022 6:43 am
by kaushal
Hello
I am using the highchart stock chart with datetime type.
I am loading the data using ajax call and generating the graph with every ajax request on the same element.

when series data is less then 800 it works fine but when data points are more then 800 it gives this error.

Error :

highcharts.js:513 Uncaught TypeError: Cannot read properties of undefined (reading 'info')
at G.y.getTimeTicks (highcharts.js:513)
at u.k.processData (highcharts.js:539)
at u.z.processData (highcharts.js:597)
at highcharts.js:152
at Array.forEach (<anonymous>)
at G.setTickInterval (highcharts.js:152)
at G.setScale (highcharts.js:160)
at highcharts.js:290
at Array.forEach (<anonymous>)
at a.Chart.render (highcharts.js:290)

Javascript Code :

$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type :'POST',
data:{date:date},
url : SITE_URL+'/admin/user/vitalsigns/heartRateData/{{$patient->id}}',
dataType: 'json',
success : function(response) {
if (response.status == '1') {
var heartRateData = response.data;
Highcharts.stockChart('heartRate', {
chart: {
zoomType: 'xz'
},
rangeSelector: {
buttons: [{
type: 'all',
text: 'All'
}],
enabled: false
},
scrollbar: {
enabled: true,
style: {
background: 'red',
}
},
xAxis: {
title: {
text: 'Time',
},
type: 'datetime',
labels: {
enabled: true,
formatter: function() { return heartRateData[this.value].timestamp; },
},
scrollbar: {
enabled: true,
showFull: false,
}
},
yAxis: {
title: {
text: ''
},
},
legend: {
enabled: true
},
series: [{
type: 'area',
name: 'Heart rate',
data: new_data,
color: 'red'
}],
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, 'red'],
[1, '#ffffff']
]
},
marker: {
radius: 3
},
lineWidth: 1,
states: {
hover: {
lineWidth: 2
}
},
threshold: null
}
},
});
}
}
});


Data : only for sample in real time it return 1000-2000 data
{
"data": [
{
"timestamp": "2022-01-18 01:04:43",
"value": 180
},
{
"timestamp": "2022-01-18 01:05:35",
"value": 171
},
{
"timestamp": "2022-01-18 01:05:44",
"value": 172
}
],
"status": "1"
}

Re: Large data points return error in datetime stockchart

Posted: Mon Jan 24, 2022 11:32 am
by magdalena
Hello kaushal,

Welcome to our forum and thanks for contacting us with your question!

Could you reproduce the issue in an online editor that I could work on? You can start here: https://jsfiddle.net/BlackLabel/rd94hx2m/

Regards!