@extends('base')

@section('content')

<h3>แสดงกราฟสรุปอายุของคนที่เข้ามาใช้เว็บไซต์</h3>
<div id="piechart"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js" charset="utf-8"></script>

<!--

@if(Session::get('status'))
 <div class="alert alert-info">
   {{Session::get('status')}}
 </div>
@endif -->
<a href="/ask/create" class="btn" type="button" >กดตรงนี้เพื่อตอบแบบสอบถาม</a>
<div class="" height="2" width="2">
  <canvas id="myChart" ></canvas>
</div>

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['1-10', '11-20', '21-30', '31-40', '>40'],
        datasets: [{
            label: '# of Votes',
            <?php
            $sum1 = 0;
            $sum2 = 0;
            $sum3 = 0;
            $sum4 = 0;
            $sum5 = 0;
            foreach ($asks as $value) {
              if ($value->age == "1") {
                $sum1 += 1;
              }elseif ($value->age  == "2") {
                $sum2 += 1;
              }elseif ($value->age  == "3") {
                $sum3 += 1;
              }elseif ($value->age  == "4") {
                $sum4 += 1;
              }elseif ($value->age  == "5") {
                $sum5 += 1;
              }
            }
            echo "data: [$sum1,$sum2,$sum3,$sum4,$sum5],"
            ?>
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)'
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

<!-- <div id="container" style="min-width: 111px; height: 200px; margin: 0 auto"></div> -->


@endsection
