Hi hubert. This is the video that's why I didn't transfer my code to the fiddle.
https://www.loom.com/share/fcea157b7955 ... 5fe49c8375
Code: Select all
The specified value "1970-01-01T00:00:00" does not conform to the required format. The format is "yyyy-MM-ddThh:mm" followed by optional ":ss" or ":ss.SSS".
Code: Select all
// X AXIS
chart.xAxis[0].update(
{
categories: sortedCalendar.map((el)=>new Date(el.received_at).getTime()),
tickInterval: 7, //x axis display
labels: {
format: '{value:%b:%e}',
},
},
true
);
Code: Select all
switch (qcSensorType) {
case 'humidity':
chart.series[0].setData(
sortedData.map((d) => Number(d.hum_rh)),
true
);
break;
case 'pressure':
chart.series[0].setData(
sortedData.map((d) => Number(d.pres_hpa)),
true
);
break;
case 'temperature':
chart.series[0].setData(
sortedData.map((d) => Number(d.temp_c)),
true
);
break;
default:
chart.series[0].setData(
calendarDate.map((el)=>Number (el.distance_m)),
true
);
break;
}
Code: Select all
private _getFloodHeightOtps(): any {
return {
chart: {
type: 'spline'
},
subtitle: {
text: 'Flood Height',
},
rangeSelector: {
inputDateFormat: '%b %e, %Y %H:%M',
buttons: [{
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'all',
text: 'All'
}],
selected: 3,
buttonTheme: {
width: 60,
},
},
yAxis: {
alignTicks: false,
tickInterval: 0.5,
color: '#0C2D48',
opposite: false,
plotBands: [
{
from: 0,
to: 0.5,
color: '',
label: {
text: 'Low',
},
},
{
from: 0.6,
to: 1.5,
color: '#6AF2F0',
label: {
text: 'Moderate',
style: {
color: '#0C2D48',
},
},
},
{
from: 1.6,
to: 15,
color: '#004369',
label: {
text: 'High',
style: {
color: '#0C2D48',
},
},
},
{
from: 15,
to: 30,
color: '#0067B3',
label: {
style: {
color: '#0C2D48',
},
},
},
{
from: 30,
to: 500,
color: '#0067B3',
label: {
style: {
color: '#0C2D48',
},
},
},
],
},
series: [
{
name: 'Flood Height',
color: '#0C2D48',
data: [],
// lineWidth: 1.5,
// marker: {
// enabled: false,
// },
// hover: {
// lineWidth: 5,
// },
},
],
};
}
Code: Select all
The specified value "1970-01-01T00:00:00" does not conform to the required format. The format is "yyyy-MM-ddThh:mm" followed by optional ":ss" or ":ss.SSS"
To pass data properly, you have to sort your points by date ascendly.Highcharts expects data to be sorted
This happens when creating a line series or a stock chart where the data is not sorted in ascending X order.
For performance reasons, Highcharts does not sort the data, instead it requires that the implementer pre-sorts the data.
Code: Select all
Jan 1,1970
Code: Select all
const sortedCalendar = calendarDate.sort((a: any, b: any) => {
return (
new Date(a.received_at).getTime() - new Date(b.received_at).getTime()
)
})
const processedData = calendarDate.map((el) => {
return [
sortedCalendar
,el.distance_m]
})
console.log(processedData)
Code: Select all
const processedData = calendarDate.map((el) => {
return [
el.received_at
,el.distance_m]
})