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

<script type="text/javascript" nonce="<?=$assets->getCspNonce() ?>">
$(function () {
    $('#listeners_by_hour').highcharts({
        chart: {},
        title: { text:'' },
        xAxis: {
            allowDecimals: false,
            tickInterval: 1
        },
        yAxis: {
            title: {
                text: '<?=__('Listeners') ?>'
            },
            min: 0
        },
        tooltip: {
            crosshairs: true,
            shared: true
        },
        
        series: [{
            name: <?=$this->escapeJs(__('Average Listeners')) ?>,
            type: 'column',
            data: <?=$averages_by_hour ?>
        }]
    });
});
</script>