Estoy intentando generar graficos tipo bar con mi BD en array pero no me pinta nada, aparece en blanco. En mi consulta estoy trayendo el total de saldo y abonos agrupado por mes. Estoy utilizando laravel 5.6
Este es la ruta web.php
Route::get('reporte/barra', 'ReportesController@barra');
Est es el contralador donde hago la consulta a la bd ReportesController.php
public function barra()
{
$abonos = Abono::select(DB::raw("sum(saldo_abono) as saldo, sum(cantidad) as tabono, MONTHNAME(fecha) as mes"))
->groupBy("mes")->get();
return view('cuentas.reporte.barra',['abonos'=>$abonos]);
}
esta es la estructura de la tabla que hago la consulta
Este es el codigo de la vista barra.blade.php
@extends('layouts.admin')
@section ('contenido')
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<h3>
Reporte de abonos
</h3>
</div>
</div>
<div class="card card-stats card-round">
<div class="card-header">
<div class="card-title">DEPARTICION DE DINERO</div>
</div>
<div class="card-body">
<div class="chart-container">
<canvas id="barChart"></canvas>
</div>
</div>
</div>
@endsection
@push('script')
{{-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script> --}}
<script src="{{ asset('assets/js/plugin/chart.js/chart.min.js') }}"></script>
<script src="{{ asset('assets/js/plugin/jquery.sparkline/jquery.sparkline.min.js') }}"></script>
<script src="{{ asset('assets/js/plugin/chart-circle/circles.min.js') }}"></script>
<script src="{{ asset('assets/js/plugin/datatables/datatables.min.js') }}"></script>
<script type="text/javascript">
var myBarChart = new Chart(barChart, {
type: 'bar',
data: {
labels:
//generar dinamicamente el label del mes
@foreach ($abonos as $abono)
["{{$abono->mes}}"]
@endforeach
datasets: [{
label: "$",
backgroundColor: '#FFCE06',
borderColor: '#FFCE06',
data:
@foreach ($abonos as $abono)
["{{$abono->saldo}}, {{$abono->tabono}}"]
@endforeach
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
}
});
</script>
@endpush
Este es el resultado que obtengo
Lo que quiero es algo asi: