<?php
defined("BASEPATH") or exit("No direct access allowed");
$track = mysqli_query($con, "SELECT ID,baca FROM bc order by ID asc");
$track2 = mysqli_query($con, "SELECT ID,sum(kirim) as kirim,sum(gagal) as gagal,sum(baca) as baca FROM bc order by ID asc");
?>

<style type="text/css">
            .container {
                width: 50%;
                margin: 15px auto;
            }
    </style>
    
    <div class="container">
            <canvas id="demobar" width="100" height="100"></canvas>
    </div>

      	<script  type="text/javascript">

    	  var ctx = document.getElementById("demobar").getContext("2d");
    	  var data = {
    	            labels: ['Kirim','Gagal','Buka'],
            datasets: [
            {
              label: "Grafik Tracking Email",
              data: [<?php while ($p = mysqli_fetch_array($track2)) { 
                  echo '"' . $p['kirim'] . '",';
                  echo '"' . $p['gagal'] . '",';
                  echo '"' . $p['baca'] . '",';
                  
              }?>],
              backgroundColor: [
                '#29B0D0',
                '#2A516E',
                '#F07124',
                '#CBE0E3',
                '#979193'
              ]
            }
            ]
            };

    	  var myBarChart = new Chart(ctx, {
    	            type: 'bar',
    	            data: data,
    	            options: {
    	            barValueSpacing: 20,
    	            scales: {
    	              yAxes: [{
    	                  ticks: {
    	                      min: 0,
    	                  }
    	              }],
    	              xAxes: [{
    	                          gridLines: {
    	                              color: "rgba(0, 0, 0, 0)",
    	                          }
    	                      }]
    	              }
    	          }
    	        });
    	</script>


