@extends('layouts.app')

@section('links')
<link rel="stylesheet" href="{{asset('assets/theme/vendor/charts2/chart.min.css')}}">
<link rel="stylesheet" href="{{asset('plugins/morrisChart/morris.css')}}">
<script src="{{asset('plugins/morrisChart/jquery.min.js')}}"></script>
<script src="{{asset('plugins/morrisChart/raphael-min.js')}}"></script>
<script src="{{asset('plugins/morrisChart/morris.min.js')}}"></script>
@endsection

@section('content')

<div class="container">
   <div class="row">
      <div class="col">
         <h1 class="display-4">Estadistica</h1>
      </div>
   </div>

   <div class="row">
      <div class="col">
         <div class="card ">

            <div class="card-body">
               <h3 class="card-title">
                  Control Estadisitico Mensual
               </h3>

               <div style="width:100%;">
                  <canvas id="myChart"></canvas>
               </div>
            </div>
         </div>
      </div>
   </div>

   

   
</div>

@endsection

@section('scripts')
<script src="{{asset('assets/theme/vendor/charts2/chart.min.js')}}"></script>

<script>
   var ctx = document.getElementById('myChart').getContext('2d');
   var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
         labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
         datasets: [{
            label: 'Ocultar',
            data: [, , , , , , , , , , , ],
            backgroundColor: [
               'rgba(239, 154, 154, 1)',
               'rgba(244, 143, 177, 1)',
               'rgba(206, 147, 216, 1)',
               'rgba(179, 157, 219, 1)',
               'rgba(159, 168, 218, 1)',
               'rgba(144, 202, 249, 1)',
               'rgba(129, 212, 250, 1)',
               'rgba(128, 203, 196, 1)',
               'rgba(165, 214, 167, 1)',
               'rgba(197, 225, 165, 1)',
               'rgba(255, 245, 157, 1)',
               'rgba(255, 171, 145, 1)'
            ],
            borderColor: [
               'rgba(239, 154, 154, 1)',
               'rgba(244, 143, 177, 1)',
               'rgba(206, 147, 216, 1)',
               'rgba(179, 157, 219, 1)',
               'rgba(159, 168, 218, 1)',
               'rgba(144, 202, 249, 1)',
               'rgba(129, 212, 250, 1)',
               'rgba(128, 203, 196, 1)',
               'rgba(165, 214, 167, 1)',
               'rgba(197, 225, 165, 1)',
               'rgba(255, 245, 157, 1)',
               'rgba(255, 171, 145, 1)'
            ],
            borderWidth: 1
         }]
      },
      options: {
         scales: {
            yAxes: [{
               ticks: {
                  beginAtZero: true
               }
            }]
         }
      }
   });
</script>

@endsection