<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="row page-titles">
    <div class="col-md-5 col-8 align-self-center">
        <h3 class="text-themecolor">Manage Teachers</h3>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
            <li class="breadcrumb-item active">Manage Teachers > Teachers Overview</li>
        </ol>
    </div>
    <div class="col-md-7 col-4 align-self-center">
        <!--a href="https://themewagon.com/themes/bootstrap-4-responsive-admin-template/" class="btn waves-effect waves-light btn-danger pull-right hidden-sm-down"></a-->
    </div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<!-- Row -->
<div class="row">
    <!-- Column -->
    <div class="col-sm-12 col-lg-12">
        <div class="card">
            <div class="card-header text-center lead bg-light mb-3 ">
                Teachers Overview
            </div>
            <div class="card-body">
                <canvas id="myChart" ></canvas>
            </div>
        </div>
    </div>
</div>     

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Biology', 'Mathematics', 'English', 'Geography'],
        datasets: [{
            label: 'Teachers Vs Subjects',
            data: [4, 6 , 3, 4],
            
            borderColor: [
                'rgba(30, 136, 229, 1)',
                'rgba(250, 5, 213, 1)',
                'rgba(116, 96, 238, 1)',
                'rgba(232, 5, 84, 1)'
            ],
            backgroundColor: [
                'rgba(30, 136, 229, 1)',
                'rgba(250, 5, 213, 1)',
                'rgba(116, 96, 238, 1)',
                'rgba(232, 5, 84, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>
