Chartjs-How to calculate the sum of all values per month of a JSON file in React and display it as a single month using ChartJs?

by

0👍

✅

If I understand your question correctly, you are looking for a strategy to preprocess your data. Here is a simple implementation:

// Declare and initialize an array containing 12 values (because there are 12 months)
let monthlyTotals = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

// Loop through the data array
for (let obj of data) {
  // Parse date strings and get month number (0 is January and 11 is December)
  let fromMonth = new Date(obj['Period From']).getMonth(),
      toMonth = new Date(obj['Period To']).getMonth();
   
  // Make sure that your period is correct to avoid an inconsistent result   
  if (fromMonth === toMonth) {
    // Use the month number as an index to update the right value in monthlyTotals
    monthlyTotals[fromMonth] += obj.Quantity * obj.Revenue;
  }
}

As you can see, I use this formula to update monthly totals: obj.Quantity * obj.Revenue. If obj.Quantity is not relevant in your case, for instance if obj.Revenue already takes into account the quantity, you can remove it easily and just keep what you need.

I created sample data for the first three months to give you a full example:

const ctx = document.getElementById('myChart');

const data = [
  {
    "id": 1,
    "Period From": "2022-12-31T23:00:00.000Z",
    "Period To": "2023-01-30T23:00:00.000Z",
    "Quantity": 2,
    "Revenue": 3
  },
  {
    "id": 2,
    "Period From": "2022-12-31T23:00:00.000Z",
    "Period To": "2023-01-30T23:00:00.000Z",
    "Quantity": 4,
    "Revenue": 7
  },
  {
    "id": 3,
    "Period From": "2022-12-31T23:00:00.000Z",
    "Period To": "2023-01-30T23:00:00.000Z",
    "Quantity": 1,
    "Revenue": 2
  },
  {
    "id": 4,
    "Period From": "2023-01-31T23:00:00.000Z",
    "Period To": "2023-02-27T23:00:00.000Z",
    "Quantity": 5,
    "Revenue": 5
  },
  {
    "id": 5,
    "Period From": "2023-01-31T23:00:00.000Z",
    "Period To": "2023-02-27T23:00:00.000Z",
    "Quantity": 3,
    "Revenue": 4
  },
  {
    "id": 6,
    "Period From": "2023-02-28T23:00:00.000Z",
    "Period To": "2023-03-30T23:00:00.000Z",
    "Quantity": 2,
    "Revenue": 10
  }
];

let monthlyTotals = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    
for (let obj of data) {
  let fromMonth = new Date(obj['Period From']).getMonth(),
      toMonth = new Date(obj['Period To']).getMonth();
      
   if (fromMonth === toMonth) {
     monthlyTotals[fromMonth] += obj.Quantity * obj.Revenue;
   }
}

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    datasets: [{
      label: 'Revenue',
      data: monthlyTotals,
      borderWidth: 1,
      fill: true
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});
.chart-container {
  position: relative;
  height: 90vh;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

Given that you dataset is big, you may face performance issues. If this occurs, you should preprocess from the back-end.

Leave a comment