{% extends "layouts/base.html" %}

{% load static %} 

{% block title %} Stats Advertisers {% endblock %}


{% block extra_css %}{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title"> Stats Advertisers </h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0);">Advertisers</a></li>
            <li class="breadcrumb-item active" aria-current="page">Stats</li>
        </ol>
    </div>
</div>
{% endblock %}


{% block content %}   
<div class="row">
    <div class="col-sm-12 col-md-4 col-lg-12 col-xl-9">
        <div class="card">
            <div class='card-header'> </div>
            <div class="card-body">
                <canvas id="" class="h-275 chartjs-render-monitor" width="860" height="200" ></canvas>
            </div>
        </div>
    </div> 
</div>
{% endblock content %}`
      
{% block extra_js %}   
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script >
    $(function() {

        new Chart(document.getElementById("bar-chart"), {
            type: 'bar',
            data: {
                labels: {{ brands.label|safe }},
                datasets: [{
                        label: "",
                        backgroundColor: {{ brands.color|safe }},
                        data: {{ brands.data|safe }}
                    }]
            },
            options: {
                legend: { display: false },
                title: {
                    display: false,
                    text: 'Predicted world population (millions) in 2050'
                }
            }
        });
 
        var options = {
            chart: {
            height: 305,
            type: 'radialBar',
            offsetX: 0,
            offsetY: 10,
        },
        plotOptions: {
            radialBar: {
            startAngle: -135,
            endAngle: 135,
            size: 120,
            imageWidth: 50,
            imageHeight: 50,
            track: {
                strokeWidth: "80%",
            },
            dropShadow: {
                enabled: false,
                top: 0,
                left: 0,
                bottom: 0,
                blur: 3,
                opacity: 0.5
            },
            dataLabels: {
            name: {
                fontSize: '16px',
                color: undefined,
                offsetY: 30,
            },
            hollow: {
                size: "60%"
                },
            value: {
                offsetY: -10,
                fontSize: '22px',
                color: undefined,
                formatter: function (val) {
                return val + "%";
                }
            }
            }
        }
        },
        colors: ['#ff5d9e'],
        fill: {
            type: "gradient",
            gradient: {
                shade: "gradient",
                type: "horizontal",
                shadeIntensity: .5,
                gradientToColors: ['#6259ca'],
                inverseColors: !0,
                opacityFrom: 1,
                opacityTo: 1,
                stops: [0, 100]
            }
        },
        stroke: {
            dashArray: 4
        },
        series: [{{ pacing.purcent }} ],
            labels: [""]
        };

        var chart = new ApexCharts(document.querySelector("#recentorders2"), options);
        chart.render(); 
    }); 
</script> 
{% endblock extra_js %}