{% if aNames|length > 0 %}
<div id="bar-{{ oBrick.GetId }}"></div>
<script type="text/javascript">
    $(document).ready(function(){
        $('#bar-{{ oBrick.GetId }}').on('click', function(oEvent){
            oEvent.preventDefault();
            oEvent.stopPropagation();
        });
        window.setTimeout(function() {
            var chart = c3.generate({
                bindto: d3.select('#bar-{{ oBrick.GetId }}'),
                data: {
                    json: {{ aDisplayValues | json_encode() | raw }},
                    keys: {
                        x: 'label',
                        value: ["value"]
                    },
                    onclick: function (d, element) {
                        var aURLs = {{ aUrls | json_encode() | raw }};
                        window.location.href = aURLs[d.index];
                    },
                    selection: {
                        enabled: true
                    },
                    type: 'bar'
                },
                axis: {
                    x: {
                        tick: {
                            culling: {max: 25}, // Maximum 24 labels on x axis (2 years).
                            centered: true,
                            rotate: 90,
                            multiline: false
                        },
                        type: 'category'   // this needed to load string x value
                    }
                },
                grid: {
                    y: {
                        show: true
                    }
                },
                legend: {
                    show: false,
                },
                tooltip: {
                    grouped: false,
                    format: {
                        title: function() { return '' },
                        name: function (name, ratio, id, index) {
                            var aNames = {{ aNames | json_encode() | raw }};
                            return aNames['series_' + index];
                        }
                    }
                }
            });
        }, 100);
    });
</script>
{% else %}
    <h3 class="text-center">{{ 'Brick:Portal:Manage:Table:NoData'|dict_s }}</h3>
{% endif %}