I'm trying to graph out a month of data that looks like this,
0: {created: 1601820360, magic: -0.1, magnitude: 0.1, createdDay: "2020-10-05"}
1: {created: 1601820365, magic: -0.8, magnitude: 0.8, createdDay: "2020-10-05"}
2: {created: 1601900938, magic: -0.2, magnitude: 0.2, createdDay: "2020-10-05"}
3: {created: 1601900956, magic: -0.2, magnitude: 0.2, createdDay: "2020-10-05"}
4: {created: 1601900971, magic: 0.2, magnitude: 0.2, createdDay: "2020-10-05"}
Currently the graph looks like this,
There are 3000 ish data points in this array, and I am looking for it to be aggregated by time, say 15 minute or hour, instead of individual time stamps, over the date it is on.
How can I get this sort of output? Is it just that the data itself needs to be averaged over time?
Trying to re-format the incoming data so it is more usable for the graph. I want to make it so that the data comes in and is averaged over say, 15 minute intervals, but really confused about how to achieve this.
This is first part of code that is just taking the data and sorting it appropriately to get the line graph above,
export default function generateLineGraphPointsSentiment(
sentimentData
) {
if (sentimentData !=null) {
const DataInput = [];
Object.keys(sentimentData).map(function (key, item) {
var sentimentCurrent = sentimentData[key];
sentimentCurrent.map(function (k, num) {
let dateCreated = new Date(k.created * 1000);
DataInput.push({
created: dateCreated,
sentiment: k.sentiment,
magnitude: k.magnitude,
});
});
});
return DataInput
}
else { return 0 }
}
The averaging of the data itself is sort of like this, but not sure how to make it work over multiple days,
function generateSentimentPoints(Sentiments) {
let nOfEntries = Array(24).fill(1);
Sentiments.forEach((item) => {
const createdHour = new Date(item.created * 1000).getHours();
values[createdHour] = values[createdHour] + item.sentiment;
nOfEntries[createdHour] += 1;
});
Appreciate a better way to achieve this outcome
Try replace your piece with,
<AreaChart
width={500}
height={400}
data={data}
margin={{
top: 10,
right: 30,
left: 0,
bottom: 0
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="createdDay" />
<YAxis />
<Tooltip />
<Area type="monotone" dataKey="magnitude" stroke="#8884d8" fill="#8884d8" />
</AreaChart>
Three variables needs to be right,
data
, you used Data
i don't know if that is a typo