Dentro de mi proyecto Laravel estoy implementando la librería chart.js tratando de visualizar un gráfico de barras. El cual debería de mostrar todas las órdenes de trabajo en estado terminado que se asignaron a los usuarios con el rol de operario.
Al querer graficar, simplemente no se visualiza ningún dato, es un grafico vacio.
Este es mi controlador ReportController con este metodo public function getChart() realizo mi consulta
public function getChart(Request $request)
{
$_orders = DB::table('users')
->join('orders','orders.user_id','=','users.id')
->join('model_has_roles', 'users.id', '=', 'model_has_roles.model_id')
->select('users.id','users.name', DB::raw('COUNT(orders.id) as orders_by_user'), 'model_has_roles.role_id as rol')
->where('model_has_roles.role_id', '2');
$_orders->groupBy('orders.user_id', 'users.id', 'users.name', 'model_has_roles.role_id');
$orders=$_orders->get();
return ['orders' => $orders];
}
Este es el resultado de mi consulta: como se observa tengo lo que necesito nombre de usuario y la cantidad de ordenes terminadas por usuario.
{
"orders": [
{
"id": 4,
"name": "Luis",
"orders_by_user": 2,
"rol": 2
},
{
"id": 6,
"name": "Jose",
"orders_by_user": 1,
"rol": 2
},
{
"id": 7,
"name": "Miguel",
"orders_by_user": 1,
"rol": 2
}
]
}
Mi problema esta en mi metodo function getChartData() que es el metodo donde realizo mi llamada ajax o esta en el metodo function renderChart(data, labels) que es el metodo que utilizo para realizar el grafico con los datos obtenidos?.
Este es mi archivo report.js para el grafico:
function renderChart(data, labels) {
var ctx = document.getElementById("orders").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'ordenes',
data: data,
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderWidth: 1,
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
display: true,
text: "Ordenes en estado terminado"
},
}
});
}
function getChartData() {
$.ajax({
url: '/admin/reports/getChart',
type: 'GET',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
dataType: 'json',
success: function (data) {
// console.log(data);
var data = [];
var labels = [];
for (var i in data) {
data.push(data[i].orders_by_user);
labels.push(data[i].name);
}
renderChart(data, labels);
},
error: function (data) {
console.log(data);
}
});
}
$("#renderBtn").click(
function () {
getChartData();
}
);
¿Podrian ayudarme a encontrar y dar solucion a mi error?