@extends('menu/menu')
<script src="{{ asset('js/jquery-3.4.1.min.js') }}" ></script>
<!-- <link rel=stylesheet href="http://35.232.42.155/ayaproduccion/sistemacaja/resources/views/graficos/css-graficos/graficos-style.css" type="text/css" media=screen> -->
<link href="{{ asset('css/graficos-style.css') }}" rel="stylesheet">


@section('content') 


<div class="container-fluid">
    <form action="" method="GET">
      <div class="container-fluid">
        <div class="container">
          <!-- BARRA DE BUSQUEDA -->
          <h1 style="margin-top: 50px">Informes Basicos</h1>
          <div class="row reex" style="height: auto">            
            <div class="container col-12" style="margin-top: 10px">
              <h2><strong>Filtrar por</strong></h2>
            </div>    
            <!--AQUI SE CARGA EL SELECT DEL CLIENTE-->
            <div class="container col-sm form-group">
              <label for="clientes"><h2>Tipo de informe</h2></label>
              <select name="tiposInforme"  class="custom-select" id="tiposInforme">
                <option selected >Seleccionar</option>
                <option  value="cantidadInstalaciones" >Cantidad de Instalaciones </option>
                <option  value="estadoInstalaciones" >Estado de las Instalaciones </option>
                <option  value="retirosFinalizados" >Retiros Finalizados</option>
                <option  value="numeroSucursales" >Número de Sucursales </option>
                <option  value="totalAcessorios" >Total de accesorios Instalados</option>
                {{-- @foreach ($carga_selectCliente as $clientesDatos)
                  @if ($clientesDatos->cliente != null) 
                    @if($clientesDatos->cliente == $clientes) 
                      <option selected value="{{$clientesDatos->cliente}}">{{ucfirst(strtolower($clientesDatos->cliente))}}</option>
                    @else
                      <option value="{{$clientesDatos->cliente}}">{{ucfirst(strtolower($clientesDatos->cliente))}}</option>
                    @endif
                  @endif
                @endforeach --}}
              </select>
            </div>
            <!--FIN SELECT DE CLIENTE-->    
            <!--AQUI SE CARGA EL SELECT DE COMUNA-->
            <div class="container col-sm form-group">
              <label for="comuna"><h2>Proveedor</h2></label>
              <select name="proveedor" disabled  class="custom-select" id="proveedor">
                <option selected   value="sele" >Seleccionar</option>


                @foreach ($instalacions as $inst)
                  @if ($inst->proveedor_instalacion != null) 
                    {{-- @if($inst->proveedor_instalacion == $proveedor_instalacion)  --}}
                      <option  value="{{$inst->proveedor_instalacion}}">{{ucfirst(strtolower($inst->proveedor_instalacion))}}</option>
                    {{-- @else --}}
                      {{-- <option value="{{$inst->proveedor_instalacion}}">{{ucfirst(strtolower($inst->proveedor_instalacion))}}</option> --}}
                    {{-- @endif --}}
                  @endif
                @endforeach 
              </select>
            </div>
            <!--FIN SELECT DE COMUNA-->    
            <!--AQUI SE CARGA EL SELECT DIRECCION-->
            <div class="container col-sm-4 form-group">
              <label for="proyectos"  ><h2>Proyecto</h2></label>
              <select name="proyectos" disabled  class="custom-select" id="proyectos">

              {{-- @if(!empty($disable))
              <select name="direccion"  class="custom-select" id="direccion">
              @else 
              <select name="direccion" disabled class="custom-select" id="direccion">
              @endif --}}
                <option selected >Seleccionar</option>
                {{-- @foreach ($carga_selectDireccion as $direcciones)
                  @if ($direcciones->direccion != null) 
                    @if($direcciones->direccion == $direccion) 
                      <option selected value="{{$direcciones->direccion}}">{{ucfirst(strtolower($direcciones->direccion))}}</option>
                    @else
                      <option value="{{$direcciones->direccion}}">{{ucfirst(strtolower($direcciones->direccion))}}</option>
                    @endif
                  @endif
                @endforeach --}}
              </select>
            </div>
            <!--FIN DE SELECT DIRECCION-->    
            <!--AQUI SE CARGA EL SELECT SUCURSAL-->
       
            <!--FIN SELECT DE SUCURSAL-->
          </div>
          <div class="container" style="margin-top: 20px">
            {{-- <button type="buscar" class="btn buscar float-sm-right">
              <h3 style="color:#FFFFFF; margin-top: 5px; width: 104px">Revisar</h3>
            </button> --}}
          </div>
        </div>
      </div>
    </form>
   
  </div>

@endsection

@section('graficos') 
<br><br>
<div class="" style="text-align: center; display:none"   id="id_div_grafico"  >
 
  <div class="container reex p-2" >
  	<div class="container rein table-responsive-lg">
      <div class="container ">
      

        <div class="row mt-3">

          <div  class="col-3 div_oculto " style="display:none"> <label for="" id="lCantidad"></label></div>
          <div  class="col-6 div_oculto " style="display:none"> <label class="proveedor" for="" id="lProveedor"></label></div>
          <div  class="col-2 div_oculto mt-2" style="display:none"> <label class="totalins" for="" id="lTotalintalaciones"> </label></div>
          <div  class="col-1 div_oculto" style="display:none"> <h2 class="total text-left" id="lTotal"></h2></div><br>
        </div>
        <div class="row d-flex justify-content-end mt-4 mb-4"> 
          <div class="instalaciones" id="divColoruno"><label for="" id="label1"></label></div>
          <div class="finalizados"id="divColordos"><label for="" id="label2"></label></div>
        </div>

        <div class="row mb-5" >
          <canvas id="chart-rea3" class="pie"></canvas>
        </div>

      </div>
    </div>
  </div>  

  

</div>

@endsection

@section('scrypt') 
<!-- {{-- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js" ></script> --}} -->

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" ></script> -->






 <script src="{{ asset('js/chart.min.js') }}" ></script> 



<script>
  
  function nombreRegiom(numeroRegion){
nombre = "";

if(numeroRegion == 1){
    nombre = "R.Tarapacá";
}else if(numeroRegion == 2){
    nombre = "R.Antofagasta";
}else if(numeroRegion == 3){
    nombre = "R.Atacama";
}else if(numeroRegion == 4){
    nombre = "R.Coquimbo";
}else if(numeroRegion == 5){
    nombre = "R.Valparaiso";
}else if(numeroRegion == 6){
    nombre = "R.O’Higgins";
}else if(numeroRegion == 7){
    nombre = "R.Maule";
}else if(numeroRegion == 8){
    nombre = "R.Bio Bio";
}else if(numeroRegion == 9){
    nombre = "R.Araucanía";
}else if(numeroRegion == 10){
    nombre = "R.Los Lagos";
}else if(numeroRegion == 11){
    nombre = "R.Aysén";
}else if(numeroRegion == 12){
    nombre = "R.Magallanes";
}else if(numeroRegion == 13){
    nombre = "R.Metropolitana";
}else if(numeroRegion == 14){
    nombre = "R.Los Rios";
}else if(numeroRegion == 15){
    nombre = "R.Arica Parinacota";
}else if(numeroRegion == 16){
    nombre = "R.Ñuble";
}else{
    nombre ="No";
}
return nombre;

}


</script>

<script>
// activarGrafico();
    //variables globales
    var clientes =[];
    var valores =[];
    let myChart;
    var valoresFinalizados =[];
    let tipoGrafico;
    let proveedor;
    let labelUno;
    let labelDos;
    let lTotal;

    // activarGrafico();
//obtener los cambios de los select
$(document).ready(function(){

  if (myChart) {
        myChart.destroy();
    }
    //tipo de informe
	$("#tiposInforme").change(function(){

            $(".div_oculto").css("display","none");
            $("#id_div_grafico").css("display","none");

            
            tipoGrafico =$(this).val();
            $("#proveedor option[value='sele']").prop("selected", true);
            $("#proyectos option[value='sele']").prop("selected", true);
            $("#proveedor").prop('disabled', false);
            $("#proyectos").prop('disabled', true);
	});
    //tipo de proveedor
	$("#proveedor").change(function(){
 

            //alert($('select[id=tiposInforme]').val());
        proveedor= $(this).val();
        if(tipoGrafico == "estadoInstalaciones" || tipoGrafico == "numeroSucursales" || tipoGrafico == "totalAcessorios"  ){
          $("#id_div_grafico").css("display","none");
          $("#proyectos").prop('disabled', false);
          buscarProyectosProveedor(proveedor);
        }else{
          
          if(tipoGrafico == "retirosFinalizados" ){
             activarGraficoRetiro(proveedor);
          }else{
            activarGrafico(proveedor);
          }
         
        }

	});

  $("#proyectos").change(function(){
            // alert($('select[id=tiposInforme]').val());
         clienteproyecto= $(this).val();

         if(tipoGrafico == "estadoInstalaciones"){
            labelUno = "Estados";
            labelDos = "";
            $("#lTotal").text("");
            $("#lTotalintalaciones").text("");
            activarGraficoPorProyecto(clienteproyecto);
         }else if(tipoGrafico == "numeroSucursales" ){
            activarGraficoPorSucursales(clienteproyecto);
            labelUno = "Sucursales";
            labelDos = "";
            $("#lTotal").text("");
            $("#lTotalintalaciones").text("");
        
         }else if(tipoGrafico == "totalAcessorios" ){
          activarGraficoPorAccesorios(clienteproyecto);
            labelUno = "Accesorios";
            labelDos = "";
            $("#lTotal").text("");
            $("#lTotalintalaciones").text("");
        
         }
       
       
        

        

	});

});


function buscarProyectosProveedor(proveedor){

  $.ajax({

        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },

        type: 'POST',

        url:"{{ route('informes.graficos.instalaciones.proyectos.asociados') }}",

        data: { 'proveedor': proveedor },

        success: function(data) {

console.log(data);
            $("#proyectos").empty();
            $("#proyectos").append('<option value="sele">' + "Seleccionar"+ '</option>');
            $.each(data, function(id, datos) {
            
            
            
                $("#proyectos").append('<option value=' +"'"+ datos.sCliente +"'"+ '>' + datos.sCliente + '</option>');
            
          
            
            });
          
        },

        error: function(xhr, status) {

            alert('Disculpe, ha ocurrido un problema, intente mas tarde');

        }

    });
}

function activarGraficoPorAccesorios(clienteproyecto){

clientes =[];
valores =[];
valoresFinalizados =[];
       $.ajax({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        type: 'POST',
        url:"{{ route('informes.graficos.por.acessorios') }}",
        data: { 'proveedor': proveedor ,'clienteproyecto':clienteproyecto},
        
        success:function(data){
          sum = 0;
          $.each(data, function(i, item) {
              clientes.push("RED");
              valores.push(item.usb_red);
              clientes.push("MUEBLE");
              valores.push(item.CsMueble);
              clientes.push("SD");
              valores.push(item.CsSD);
              clientes.push("KIT LECTOR");
               valores.push(item.CsKit_lector);
               clientes.push("BANDEJA ADICIONAL");
               valores.push(item.CsBandeja_adicional	);
              // clientes.push("Mueble");
              // valores.push(item.CsMueble);
              // clientes.push("Mueble");
              // valores.push(item.CsMueble);
              // clientes.push("Mueble");
              // valores.push(item.CsMueble);
              // clientes.push("Mueble");
              // valores.push(item.CsMueble);
              // clientes.push("Mueble");
              // valores.push(item.CsMueble);
              // clientes.push("Mueble");
              // valores.push(item.CsMueble);
              sum = item.usb_red+item.CsMueble+item.CsSD+item.CsKit_lector+item.CsBandeja_adicional;
         });

         lTotal = number_format(sum);
         $("#lTotal").text(lTotal);
         $("#lTotalintalaciones").text("Total Acessorios");
                llenarGraficoBarrar(1);
                $("#label1").text("Acessorios");
                $("#label2").text("");
                $("#divColoruno").css("display","");
                $("#divColordos").css("display","none");
        }
       });


}


function activarGraficoPorSucursales(clienteproyecto){

clientes =[];
valores =[];
valoresFinalizados =[];
       $.ajax({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        type: 'POST',
        url:"{{ route('informes.graficos.por.sucursales') }}",
        data: { 'proveedor': proveedor ,'clienteproyecto':clienteproyecto},
        success:function(data){
          sum = 0;
          $.each(data, function(i, item) {
              clientes.push(nombreRegiom(item.sRegion));
              valores.push(item.cantidad);
              sum = sum+ item.cantidad;

         });
         lTotal = number_format(sum);
         $("#lTotal").text(lTotal);
         $("#lTotalintalaciones").text("Total Sucursales");
                llenarGraficoBarrar(1);
                $("#label1").text("Sucursales");
                $("#label2").text("");
                $("#divColoruno").css("display","");
                $("#divColordos").css("display","none");
        }
       });


}

function activarGraficoPorProyecto(clienteproyecto){

    clientes =[];
    valores =[];
    valoresFinalizados =[];

           $.ajax({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            type: 'POST',
            url:"{{ route('informes.graficos.por.proyectos') }}",
            data: { 'proveedor': proveedor ,'clienteproyecto':clienteproyecto},
            success:function(data){
              sum = 0;
              $.each(data, function(i, item) {
                  clientes.push(convertir(item.sEstado_instalacion));
                  valores.push(item.cantidad);
                  sum = sum+ item.cantidad;

             });
                    llenarGraficoBarrar(1);

                    labelUno = "Instalaciones";
                    // $("#label1").text("Intalaciones");

                    // $("#label2").text("");
                    $("#divColoruno").css("display","");
                    $("#divColordos").css("display","none");

                lTotal = number_format(sum);
             $("#lTotal").text(lTotal);
             $("#lTotalintalaciones").text("Total Instalaciones");
            }
           });


}


function number_format(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + '.' + '$2');
    }
    return x1 + x2;
}


function activarGraficoRetiro(clienteproyecto){

clientes =[];
valores =[];
valoresFinalizados =[];
labelUno = "Retiros";
labelDos = "Finalizados";
       $.ajax({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        type: 'POST',
        url:"{{ route('informes.graficos.retiros.proyectos') }}",
        data: { 'proveedor': proveedor ,'clienteproyecto':clienteproyecto},
        success:function(data){
          sum = 0;
          $.each(data, function(i, item) {
                        clientes.push(convertir(item.cliente));
                        valores.push(item.totalretiros);
                        sum = sum+ item.totalretiros;
                        valoresFinalizados.push(item.totalFinalizados);
         });
         lTotal = number_format(sum);
         $("#lTotal").text(lTotal);
         $("#lTotalintalaciones").text("Total Retiros");

         $("#label1").text("Retiros");
         $("#label2").text("Finalizados");
         $("#divColoruno").css("display","");
         $("#divColordos").css("display","");
                llenarGraficoBarrar(2);
        }
       });


}

   
function activarGrafico(provee){
    clientes =[];
     valores =[];
     valoresFinalizados =[];
     provee= provee;
    var _token = $('input[name="_token"]').val();
           $.ajax({
             
            url:"{{ route('informes.graficos.instalaciones.proyectos') }}",
            method:"GET",
            data:{ proveedor:provee,_token:_token},
            success:function(data){
               sum = 0;
              $.each(data, function(i, item) {
                        // $("#cliente").val(item.sCliente);
                    
                        clientes.push(convertir(item.cliente));
                        valores.push(item.totalInstalaciones);
                        sum = sum+ item.totalInstalaciones;
                        valoresFinalizados.push(item.totalFinalizados);
             });

                    lTotal = number_format(sum);
                    $("#lTotal").text(lTotal);
                    $("#lTotalintalaciones").text("Total Instalaciones");
                    $("#label1").text("Instalaciones");
                    $("#label2").text("Finalizados");
                    $("#divColoruno").css("display","");
                     $("#divColordos").css("display","");


                    labelUno = "instalaciones";
                    labelDos = "Finalizadas";
                    llenarGraficoBarrar(2);
            }
           });


}


  function llenarGraficoBarrar__(graficos) {


    $(".div_oculto").css("display","");
    $("#lProveedor").text(proveedor);
    $("#id_div_grafico").css("display","");
    // var ctx = document.getElementById('myChart').getContext('2d');
    if (myChart) {
        myChart.destroy();
    }
    var barChartData = {
     //   labels: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio"],
      labels: clientes,
      
        datasets: [{

          label: "My First dataset",
        
          fillColor: '#c5d1ef',
            // strokeColor: 'rgba(255, 99, 132, 0.2)',  //borde
            // highlightFill: 'rgba(255, 99, 132, 0.2)', //borde
            highlightStroke: "#ffffff",
            data: valores,

          },
          {
            label: "My First dataset",
            fillColor: '#e8d9cf',

            // strokeColor: "#ffffff",
            // highlightFill: "#ee7f49",
            highlightStroke: "#ffffff",
            data: valoresFinalizados,

          }

        ]

      }

        var options = {
          responsive: true,
          showTooltips: false,
          scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
     


          onAnimationComplete: function() {

            var ctx = this.chart.ctx;
            ctx.font = this.scale.font;
            ctx.fillStyle = this.scale.textColor
            ctx.textAlign = "center";
            ctx.textBaseline = "bottom";

            this.datasets.forEach(function(dataset) {
              dataset.bars.forEach(function(bar) {
                ctx.fillText(bar.value, bar.x, bar.y - 5);
              });
            })
          }
        };

        var ctx3 = document.getElementById("chart-rea3").getContext("2d");
        window.myPie = new Chart(ctx3).Bar(barChartData, options);

        
  }

  function convertir(string) {

if(string != null && string  != ""){


        return string.toUpperCase();
}else{
  return string;
}
    

    }


function llenarGraficoBarrar(graficos){

  $(".div_oculto").css("display","");


  $("#lProveedor").text(proveedor);
 
    var ctx = document.getElementById('chart-rea3').getContext('2d');
    if (myChart) {
        myChart.destroy();
    }


    if(graficos == 1){


      datass = [{
                        label: labelUno,
                        data: valores,
                      
                        backgroundColor: [
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)'
                        ],
                     
                    } ];

    }else if (graficos == 2){


      datass =     [{
                    label: labelUno,
                    
                    // data: [12, 19, 3, 5, 2, 3],
                    data: valores,
                    backgroundColor: [
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)'
                    ],
                    borderColor: [
                      
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)'
                    ],
                    borderWidth: 1
                },
                {
                  
                    label: labelDos,
                    
                    // data: [12, 19, 3, 5, 2, 3],
                    data: valoresFinalizados,
                    backgroundColor: [
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)'
                    ],
                    borderColor: [
                        
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)'
                    ],
                    borderWidth: 1
                },
            
            ]



     }
      
          myChart = new Chart(ctx, {
            type: 'bar',
            

            data: {
                // labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                labels: clientes,
                
                datasets: datass
            },
            options: {
              layout: {
            padding: {
                left: 500,
                right: 0,
                top: 0,
                bottom: 0
            }
        },
              
              legend: {
                display: false,
                labels: {
                     //fontColor: 'rgb(255, 255, 132)',
                    // fontSize:80,
                  //  boxWidth:30
                  // padding: 10,
                  // fontColor: 'rgb(255, 99, 132)',
                  // boxWidth:120,
                  // fontSize:30,

                   
                },
                // fullWidth:true,
                // position:"right"


             
             },
             scales: {
                    yAxes: [{
                        ticks: {
                            suggestedMin: 0,
                            suggestedMax: numeroMayor(valores),
                        }
                    }]
                },
              responsive: true,
                 tooltips: {
                      enabled: false

                 },
                 layout: {
                      padding: {
                          left: 0,
                          right: 0,
                          top: 0,
                          bottom: 0
                      }
                 },
             animation: {
              onComplete: function(animation) {


                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) {
                    var data = dataset.data[index];                            
                    ctx.fillText(data, bar._model.x, bar._model.y - 1);
                });
            });

           
            }
        }
    }
       
  
  });

    


   
    $("#id_div_grafico").css("display","");


           }


function numeroMayor(arreglo){
  mayor =0;
  for(i = 0; i < arreglo.length; i++){
    if (arreglo[i] > mayor)
    {
        mayor = arreglo[i];
    }
    }


    if(mayor < 100){
      mayor = mayor + 5;
    }else if(mayor < 1000 && mayor > 100){
      mayor = mayor + 50;
    }else if(mayor > 1000){
      mayor = mayor + 100;
    }
return mayor;
}
    </script>



@endsection