• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

96
Views
Graphing Dataset with recharts with continous line or area graph for average of 15 minute intervals javascript

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, enter image description here

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

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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
  • "createdDay", x axis label
  • "magnitude", y axis label
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error