@extends('layouts.default')

@section('content')

      <div class="row">
       <div class="col-md-10 col-md-offset-1">
           <div class="panel panel-default">
               <div class="panel-heading"><b>Charts</b></div>
               <div class="panel-body">
                   <canvas id="canvas" height="280" width="600"></canvas>
               </div>
           </div>
       </div>
     </div>
        <script src="{{asset('js/jquery.min.js')}}"></script>
        <script src="{{asset('js/bootstrap.min.js')}}"></script>
        <script src="{{asset('js/Chart.min.js')}}"></script>
        <script>

        var url = "{{ $data_url }}";
        var DekadDates = new Array();
        var Labels = new Array();
        var DekadValues = new Array();
        $(document).ready(function(){
          $.get(url, function(response){
            response.forEach(function(data){
                DekadDates.push(data.dekad_date);
                Labels.push(data.dekad_date);
                DekadValues.push(data.dekad_value);
            });

            alert(DekadValues);
            var ctx = document.getElementById("canvas").getContext('2d');
                var myChart = new Chart(ctx, {
                  type: 'bar',
                  data: {
                      labels:DekadDates,
                      datasets: [{
                          label: 'Region Stats',
                          data: DekadValues,
                          borderWidth: 1
                      }]
                  },
                  options: {
                      scales: {
                          yAxes: [{
                              ticks: {
                                  beginAtZero:true
                              }
                          }]
                      }
                  }
              });
          });
        });
        </script>

@endsection