0

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

introducir la descripción de la imagen aquí

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

introducir la descripción de la imagen aquí

Lo que quiero es algo asi:

introducir la descripción de la imagen aquí

1 respuesta 1

0

Me puse a investigar y logre obtener la solucion:

<script type="text/javascript">

var datos = @json($abonos);

mes=[];
saldo=[];
abono=[];

datos.map(o=>{
   mes.push(o.mes)
   saldo.push(o.saldo)
   abono.push(o.tabono);
})

//quitar tooltips
Chart.defaults.global.tooltips.enabled = false;

var myBarChart = new Chart(barChart, {
    type:'bar',
    
    data:{
        labels: mes,
        datasets: [{
        label:"saldo",
        backgroundColor: 'rgb(255, 99, 132, 0.2)',
        borderColor: 'black',
        borderWidth: 1,
        data: saldo

        },{
        label:"abono",
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'black',
        borderWidth: 1,
        data: abono
        }
      ],
        options:{
        responsive: true,
            layout: {
                padding: {
                left: 0,
                right: 0,
                top: 15,
                bottom: 0
                }
            },
            animation: {
            duration : 1,
                onComplete : function() {
                var chartInstance = this.chart,
                ctx = chartInstance.ctx;
        
                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle,
                Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';
        
                    this.data.datasets.forEach(function(dataset, i) {
                    var meta = chartInstance.controller.getDatasetMeta(i);
                        meta.data.forEach(function(bar, index) {
                            if (dataset.data[index] > 0) {
                            var data = dataset.data[index];
                            ctx.fillText(data, bar._model.x, bar._model.y);
                            }
                         });
                     });
                }
            }
        }

    }
});
</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.