@extends('layouts.consentimientos')

@section('styles')
<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" style="margin-top: 5%">

   <div class="row mt-2 mb-4">
      <div class="col">
         <div class="card">
            <div class="card-body">
               <h4 class="card-title text-center text-uppercase">{{$titulo}}</h4>
               <div id="myfirstchart" style="height: 250px;"></div>

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


</div>

@endsection

@section('scripts')

<script>
   new Morris.Bar({
      // ID of the element in which to draw the chart.
      element: 'myfirstchart',
      // Chart data records -- each entry in this array corresponds to a point on
      // the chart.
      data: [
         {
            year: 'Enero',
            value:          },
         {
            year: 'Febrero',
            value:          },
         {
            year: 'Marzo',
            value:          },
         {
            year: 'Abril',
            value:          },
         {
            year: 'Mayo',
            value:          },
         {
            year: 'Junio',
            value:          },
         {
            year: 'Julio',
            value:          },
         {
            year: 'Agosto',
            value:          },
         {
            year: 'Septiembre',
            value:          },
         {
            year: 'Octubre',
            value:          },
         {
            year: 'Noviembre',
            value:          },
         {
            year: 'Diciembre',
            value:          },

      ],
      // The name of the data record attribute that contains x-values.
      xkey: 'year',
      // A list of names of data record attributes that contain y-values.
      ykeys: ['value'],
      // Labels for the ykeys -- will be displayed when you hover over the
      // chart.
      labels: ['Total '],
      barColors: ['#B28DFF']
   });
</script>
@endsection