<div id="listeners_by_day" style="height: 250px;"></div>

<script type="text/javascript" nonce="<?=$assets->getCspNonce() ?>">
$(function () {
    $('#listeners_by_day').highcharts({
        chart: {
            zoomType: 'x'
        },
        title: { text:'' },
        xAxis: {
            type: 'datetime',
            labels: {
                formatter: function () {
                    return Highcharts.dateFormat('%a %d %b', this.value);
                },
                dateTimeLabelFormats: {
                    minute: '%H:%M',
                    hour: '%H:%M',
                    day: '%e. %b',
                    week: '%e. %b',
                    month: '%b \'%y',
                    year: '%Y'
                }
            }
        },
        yAxis: {
            title: {
                text: <?=$this->escapeJs(__('Listeners')) ?>
            },
            min: 0
        },
        tooltip: {
            crosshairs: true,
            xDateFormat: '%Y-%m-%d %l:%M%P'
        },
        plotOptions: {
            spline: {
                lineWidth: 2,
                marker: { enabled: false },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 3
                    }
                },
                threshold: null
            }
        },
        colors: [
            '#666666',
            '#2f7ed8',
            '#000000'
        ],
        
        series: [{
            name: <?=$this->escapeJs(__('Daily Listener Range')) ?>,
            type: 'arearange',
            data: <?=$daily_ranges ?>
        }, {
            name: <?=$this->escapeJs(__('Hourly Average Listeners')) ?>,
            type: 'spline',
            data: <?=$hourly_averages ?>
        }, {
            name: <?=$this->escapeJs(__('Daily Average Listeners')) ?>,
            type: 'spline',
            data: <?=$daily_averages ?>
        }]
    });
});
</script>