Tengo un pequeño problema en mi gráfico de barras. Estoy usando Chart.js v 2.9.4 . He hecho con éxito el gráfico. Los datos también están llegando. Pero tengo un pequeño problema. déjame explicarte eso.
Tengo 2 conjuntos de datos que ambos obtienen de la base de datos. Los conjuntos de datos son los siguientes:
Obtuve con éxito los datos en formato JSON y los puse en el gráfico de barras. El código para esto es el siguiente:
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 });El problema es que en un solo gráfico de barras se manejan mal los datos de las fechas. Como por ejemplo, el número total de llamadas recibidas el 7 de octubre puede ser 10, mientras que las llamadas facturadas (llamadas pagas) pueden ser 0.
Mi consulta SQL que obtiene datos de la base de datos solo proporciona el número total de llamadas en la fecha.
El gráfico de barras se traza con éxito, pero los datos de las llamadas pagadas se pierden un poco como se dijo anteriormente.
Puede decir que no es necesario que si recibimos una llamada en un día determinado, debe ser una llamada paga. Como el 5 de octubre, podemos tener un total de 15 llamadas y ninguna de ellas se puede facturar o pagar. Por lo tanto, el gráfico de barras completa la llamada total correctamente, pero en la llamada paga no pone cero, sino la llamada facturada o pagada al día siguiente en esa fecha del 5 de octubre.
Debe definir el eje x como un eje cartesiano de tiempo y proporcionar los datos como puntos individuales , una matriz de objetos, que tengan una x (alternativamente también t ) y cualquier propiedad y cada uno.
No hay necesidad de un procesamiento de datos complejo usando bucles for . En cambio, la respuesta se puede convertir y asignar directamente a las propiedades de los data a través del método Array.map() de la siguiente manera.
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 })) }] };Para más información, echa un vistazo a esta respuesta .
Los diferentes formatos de fecha/hora de la respuesta mencionada obviamente deben adaptarse al formato de sus datos y la visualización deseada.