kaushal
Posts: 1
Joined: Mon Jan 24, 2022 5:47 am

Large data points return error in datetime stockchart

Mon Jan 24, 2022 6:43 am

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"
}

magdalena
Posts: 514
Joined: Tue Aug 24, 2021 1:32 pm

Re: Large data points return error in datetime stockchart

Mon Jan 24, 2022 11:32 am

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!
Magdalena Gut
Highcharts support engineer

Return to “Highcharts Stock”