Mapping issue on Chart Js Bar Chart

Question

I have a small problem in my Bar Chart. I am using Chart.js v 2.9.4. I have successfully made the chart. The data is also coming. But I have a small issue. let me explain that.

I have 2 datasets both are getting from the Database. The datasets are as follows:

1. The total number of calls received on a certain date e.g, (5 calls on 5th October, 7 Calls on 6th October, 3 call on 7th October etc)
2. The number of paid calls received on a certain date e.g (3 calls on 5th October, 2 Calls on 6th October )

I successfully gets the data in JSON format and put it on the bar chart. The code for this is as follows:

var data_s = response.call_data;
var data_b = response.bill_data;
var c_days = [];
var b_days = [];
var calls = [];
var b_calls = [];

for (var i in data_s) {
  var date = data_s[i].dated // date of the call (Total Call)
  var res = date.split("-");
  var year = res[0];
  var month = res[1];
  var day = res[2];
  var dm = day + "/" + month;

  c_days.push(dm);
  calls.push(data_s[i].calls); // Number of calls
}

for (var i in data_b) {
  var date = data_b[i].b_dated; // Date of Paid Call
  var res = date.split("-");
  var year = res[0];
  var month = res[1];
  var day = res[2];
  var dm = day + "/" + month;

  b_days.push(dm);
  b_calls.push(data_b[i].b_calls); // Number of paid calls
}

var c = c_days.concat(b_days);
var unique = c.filter(function(itm, i, c) {
  return i == c.indexOf(itm);
});

var chartdata = {
  labels: unique,
  datasets: [{
      label: 'Total Calls',
      backgroundColor: '#007bff',
      borderColor: '#007bff',
      hoverBackgroundColor: '#007bff',
      hoverBorderColor: '#666666',
      responsive: true,
      maintainAspectRatio: false,
      datasetFill: false,
      data: calls
    },
    {
      label: 'Billed Calls',
      backgroundColor: '#28a745',
      borderColor: '#28a745',
      hoverBackgroundColor: '#28a745',
      hoverBorderColor: '#666666',
      responsive: true,
      maintainAspectRatio: false,
      datasetFill: false,
      data: b_calls
    }
  ]
};

var graphTarget = $("#barChart");

var barGraph = new Chart(graphTarget, {
  type: 'bar',
  data: chartdata,
  options: barChartOptions
});

The problem is that that on a single bar chart the data on the dates are mismanaged. Like for example the total number of calls received on 7th October can be 10 while the billed calls (paid calls) can be 0.

My SQL query which fetch data from the database only gives total number of calls on the date.

The bar chart is successfully plotted but the paid calls data get a bit miss managed as told earlier.

You can say it is not necessary that if we receive call on certain day it must be paid call. Like on 5th October we can have total of 15 calls and none of it can be billed or paid. So the bar chart populates total call correctly but on paid call it doesn't put zero but next day billed or paid call on that 5th October date.

Answer 1

You should define the x-axis as a time cartesian axis and provide the data as individual points, an array of objects, having a x (alternatively also t) and an y property each.

There's no need for complex data processing using for loops. The response can instead be converted and directly assigned to the data properties through the Array.map() method as follows.

var chartdata = {
  // omit labels 
  datasets: [{
    ...
    data: response.call_data.map(v => ({ x: v.dated, y: v.calls })) 
  },
  {
    ...
    data: response.bill_data.map(v => ({ x: v.b_dated, y: v.b_calls })) 
  }]
};

For further information, please take a look at this answer.

The different date/time formats from the mentioned answer obviously need to be adapted to the format of your data and the desired display.