Using AngularJS to categorize dates from JSON data into monthly groups and present them in visual charts

Question

Using AngularJS to categorize dates from JSON data into monthly groups and present them in visual charts

Trying to display JSON data in a chart using Chart.js and AngularJS based on months, but facing an issue with the date format being '2017-06-12T12:00:00.000Z'. Specifically, I am unsure how to group the data by month names (June, July, August, etc.) with this date format.

JSON Data

[
  {"id":1,"date":"2017-06-12T12:00:00.000Z","total":123},
  {"id":2,"date":"2017-06-04T12:00:00.000Z","total":100},
  {"id":3,"date":"2017-08-29T12:00:00.000Z","total":94}
]

Also, looking for guidance on integrating Chart.js in AngularJS to plot the dates sorted by month names on the x-axis and the totals on the y-axis.

javascript angularjs json

Answer 1

Answer №1

After finding inspiration from a related inquiry response, I adjusted the code to organize the array based on the month and year of a specified field, such as date.

var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
 

var groupByMonth = function(json_data, key_to_group) {
  // Loop through the array
  return json_data.reduce(function(array, item) {
    // Convert date string to retrieve month and year
    var item_date = new Date(item[key_to_group]);
    // Get the month name
    var item_month = monthNames[item_date.getMonth()];
    
    // Add item to new array
    (array[item_month] = array[item_month] || []).push(item);
    return array;
  }, {});
};


var arr = [
  {"id":1,"date":"2017-06-12T12:00:00.000Z","total":123},
  {"id":2,"date":"2017-06-04T12:00:00.000Z","total":100},
  {"id":3,"date":"2017-08-29T12:00:00.000Z","total":94}
];

// Call the groupByMonth method with the array you want to group, and the name of the field that contains the date
var groupedByMonth = groupByMonth(arr, 'date');
console.log(groupedByMonth);

I modified the datetime format by removing the final .. Additionally, keep in mind that grouping by month names is only effective when all data pertains to the same year.

Now, tackling the second part of your issue. You just require an array displaying the total sums by month.

// Result post grouping by month
var groupedByMonth =
{
  "June": [
    {
      "id": 1,
      "date": "2017-06-12T12:00:00.000Z",
      "total": 123
    },
    {
      "id": 2,
      "date": "2017-06-04T12:00:00.000Z",
      "total": 100
    }
  ],
  "August": [
    {
      "id": 3,
      "date": "2017-08-29T12:00:00.000Z",
      "total": 94
    }
  ]
};


// Iterate over result
var arr_totals = [];
Object.keys(groupedByMonth).forEach(function (key) {
  var month_total = 0;
  Object.keys(groupedByMonth[key]).forEach(function (subkey) {
    // Calculate total for each item within the month
    month_total += groupedByMonth[key][subkey].total;
});
  // Append monthly total to the array
  arr_totals.push(month_total);
});

console.log(arr_totals);

All that remains is to incorporate the month names as an array on the Y-axis: Object.keys(groupedByMonth), and the totals on the X-axis as per arr_totals for the desired chart type. Refer to the official Chart.js documentation for guidance.

Answer 2

After finding inspiration from a related inquiry response, I adjusted the code to organize the array based on the month and year of a specified field, such as date.

var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
 

var groupByMonth = function(json_data, key_to_group) {
  // Loop through the array
  return json_data.reduce(function(array, item) {
    // Convert date string to retrieve month and year
    var item_date = new Date(item[key_to_group]);
    // Get the month name
    var item_month = monthNames[item_date.getMonth()];
    
    // Add item to new array
    (array[item_month] = array[item_month] || []).push(item);
    return array;
  }, {});
};


var arr = [
  {"id":1,"date":"2017-06-12T12:00:00.000Z","total":123},
  {"id":2,"date":"2017-06-04T12:00:00.000Z","total":100},
  {"id":3,"date":"2017-08-29T12:00:00.000Z","total":94}
];

// Call the groupByMonth method with the array you want to group, and the name of the field that contains the date
var groupedByMonth = groupByMonth(arr, 'date');
console.log(groupedByMonth);

I modified the datetime format by removing the final .. Additionally, keep in mind that grouping by month names is only effective when all data pertains to the same year.

Now, tackling the second part of your issue. You just require an array displaying the total sums by month.

// Result post grouping by month
var groupedByMonth =
{
  "June": [
    {
      "id": 1,
      "date": "2017-06-12T12:00:00.000Z",
      "total": 123
    },
    {
      "id": 2,
      "date": "2017-06-04T12:00:00.000Z",
      "total": 100
    }
  ],
  "August": [
    {
      "id": 3,
      "date": "2017-08-29T12:00:00.000Z",
      "total": 94
    }
  ]
};


// Iterate over result
var arr_totals = [];
Object.keys(groupedByMonth).forEach(function (key) {
  var month_total = 0;
  Object.keys(groupedByMonth[key]).forEach(function (subkey) {
    // Calculate total for each item within the month
    month_total += groupedByMonth[key][subkey].total;
});
  // Append monthly total to the array
  arr_totals.push(month_total);
});

console.log(arr_totals);

All that remains is to incorporate the month names as an array on the Y-axis: Object.keys(groupedByMonth), and the totals on the X-axis as per arr_totals for the desired chart type. Refer to the official Chart.js documentation for guidance.

Using AngularJS to categorize dates from JSON data into monthly groups and present them in visual charts

Answer №1

Similar questions

Managing errors with Node.js and handling https certificates

Step by step guide on transferring driver control from the top window to the iframe with the id of mainFrame

Obtain the dimensions (width and height) of a collection of images using Angular and TypeScript

Progress bar display not available

Retrieve an array from a json column in a postgres database and apply a mapping function to it

Is the sub-document _id generated by Mongoose unique?

What is the best way to transfer an object property to an event handler function for executing DOM manipulation tasks?

Transforming JavaScript's POST Ajax into AngularJS' POST Factory

Displaying an image in a Bootstrap 5 tooltip / Issue 304

Mapping choices array in ReactJS using the id as a key reference

Modifying an image's height and width attributes with jQuery and CSS on click action

Interactive font-awesome icons within an interactive dropdown menu

When attempting to bind various data to a single div using knockout js, the issue of duplicate records appearing arises

Unable to extract nested JSON data using JSON_TABLE in Oracle SQL

Angular - Async function does not resolve a rejected promise

How can the radio button's checked property be bound to a boolean attribute of a component in Angular 2?

What is the best way to iterate through states within an array using React?

What is the best way to integrate nano.uuid into a series of promises that are fetching data from the database?

Obtain the value from the controller of the amazing-rating component

Dealing with numerous Ajax calls within a single Ajax request