@extends('layouts.app')

@section('styles')
<link rel="stylesheet" href="{{asset('assets/theme/vendor/charts2/chart.min.css')}}">
<link rel="stylesheet" href="{{asset('plugins/morrisChart/morris.css')}}">

@endsection

@section('content')

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

   <div class="row mt-2 mb-4">
      <div class="col">
         <div class="card">
            <div class="card-body">
               <h4 class="card-title">MESES</h4>
               <div id="myfirstchart2" style="height: 250px;"></div>

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

@endsection

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

<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>


<script>
   new Morris.Bar({
      // ID of the element in which to draw the chart.
      element: 'myfirstchart2',
      // Chart data records -- each entry in this array corresponds to a point on
      // the chart.
      data: [{
         mes: 'Enero',
         value:       }, {

         mes: 'Febrero',
         value:          
      }, {
         mes: 'Marzo',
         value: 
      }, {
         mes: 'Abril',
         value: 
      }, {
         mes: 'Mayo',
         value: 
      }, {
         mes: 'Junio',
         value:       }, {
         mes: 'Julio',
         value:       }, {
         mes: 'Agosto',
         value: 
      }, {
         mes: 'Septiembre',
         value: 
      }, {
         mes: 'Octubre',
         value: 
      }, {
         mes: 'Noviembre',
         value: 
      }, {
         mes: 'Diciembre',
         value: 
      }],
      // The name of the data record attribute that contains x-values.
      xkey: 'mes',
      // 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: ['NUERO DE VISITAS'],
      barColors: ['#FFABAB']
   });
</script>
@endsection