0

I need show data from JSON in chart.js via Angularjs by months, but my date is in this format 2017-06-12T12:00:00.000Z. First I have problem how to group data by month name (June, July, August etc) if I have this format of date.

JSON

[
  {"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}
]

And second how can I use Chart.js in the angularjs and put date sorted by name of months on x-axis and total in y-axis.

GoranR
  • 97
  • 7

1 Answers1

1

Based on an answer to a similar question, I made some changes so the array is grouped by the month and year of the desired field, in this case date.

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


var groupByMonth = function(json_data, key_to_group) {
  // Iterate over the array
  return json_data.reduce(function(array, item) {
    // Convert the string into a date to get the month and the year
   var item_date = new Date(item[key_to_group]);
    // Get the name of the month
    var item_month = monthNames[item_date.getMonth()];
    
    // Push the item into the 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);

It's important to consider that I edited the datetime so they're in the correct format: I erased the final .. And you should also consider that grouping them by month name only works if all the data is from the same year.

Moving onto the second part of your problem. All you need is an array with the sum of the totals by month.

// Result after 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) {
    // sum the total of each item of the month
    month_total += groupedByMonth[key][subkey].total;
 });
  // add the total of the month to the array
  arr_totals.push(month_total);
});

console.log(arr_totals);

Now all you have to do is add the month names as an array to the Y-axis: Object.keys(groupedByMonth), and the totals to the X-axis arr_totals according to the type of chart you want to create. Check out the official Chart.js documentation for that.

Worth
  • 59
  • 4