so I created an object array with Times and Sizes for each object. I took that object array called 'Dates' and inserted it into my Line Chart labels and used parsing to only select the 'Date' within each object. I might have done it wrong, but it displays the labels, but with [object object] first five times.
All data is pulled from an API using an Axios and useEffect from NASA Near Earth Objects. I'm trying to create a timeline displaying the sizes throughout today.
const Dates = [
{DateNum: parseInt(DateOne.substring(12)), Time: DateOne.substring(12), Size: 'Object ' + [0] + ' ' + data[1].name},
{DateNum: parseInt(DateTwo.substring(12)), Time: DateTwo.substring(12), Size: 'Object ' + [0] + ' ' + data[1].name},
{DateNum: parseInt(DateThree.substring(12)), Time: DateThree.substring(12), Size: 'Object ' + [0] + ' ' + data[1].name},
{DateNum: parseInt(DateFour.substring(12)), Time: DateFour.substring(12), Size: 'Object ' + [0] + ' ' + data[1].name},
{DateNum: parseInt(DateFive.substring(12)), Time: DateFive.substring(12), Size: 'Object ' + [0] + ' ' + data[1].name},
]
const sortedDates = Dates.sort((b, a) => b.DateNum - a.DateNum);
// let DateTwoName = 'Object ' + [1] + ' ' + data[2].name;
// let DateThreeName = 'Object ' + [2] + ' ' + data[3].name;
// let DateFourName = 'Object ' + [3] + ' ' + data[4].name;
// let DateFiveName = 'Object ' + [4] + ' ' + data[5].name;
setTimeLineInfo(sortedDates);
const labels = TimeLineInfo;
return(
//fragment
<Line options = {{
responsive: true,
plugins: {
legend: {
},
title: {
display: false,
},
},
}}
data = {{
labels,
datasets: [
{
label: '5 Objects today by time',
data: TimeLineInfo,
parsing: {
xAxisKey: 'Time'
},
borderColor: 'rgba(255, 102, 0, 1)',
backgroundColor: 'rgba(255, 102, 0, 0.5)',
}
],
}}
height = {800}
width = {1200}
/>
)
Ignore the Size entry I have not completed it yet.