{% extends "DAIManagementApp/base.html" %}
{% block content %}

<div class="app-content">
    <div class="side-app">

        <!-- PAGE-HEADER -->

        <div class="page-header">
            <div>
                <h1 class="page-title">Stats per Channels </h1>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#"> Stats </a></li>
                    <li class="breadcrumb-item active" aria-current="page">Stats per Channels </li>
                </ol>
            </div>
        </div>
            
               
        <div class="row">
            
            <div class="col-sm-12 col-md-4 col-lg-12 col-xl-9" >
                <div class="card">
                    <div class='card-header'> Daily Average Adbreaks per Channels                     </div>
                    <div class="card-body">
                        <canvas id="bar-chart2" class="h-275 chartjs-render-monitor" width="860" height="200" ></canvas>
                    </div>
                </div>
            </div>

        </div>
        
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script >
$(function() {
        new Chart(document.getElementById("bar-chart2"), {
            type: 'bar',
            data: {
            labels: {{ adbreak.label|safe }},
            datasets: [
                {
                label: "",
                backgroundColor: {{ adbreak.color|safe }},
                data: {{ adbreak.data|safe }}
                }
            ]
            },
            options: {
            legend: { display: false },
            title: {
                display: false,
                text: 'Predicted world population (millions) in 2050'
            }
            }
        });
});

        
</script>



{% endblock content %}