<script src="${base.contextPath}/resources/hls/hlsPage/javascript/hlsConponentBase.js" type="text/javascript"></script>
<script src="${base.contextPath}/resources/hls/charts/highcharts.js" type="text/javascript"></script>

<style>
    .hls-multi-bar-chart{
        width:850px;
        height:315px;
    }
</style>

<div  class="hls-multi-bar-chart ${class!}" id="${id!}" <#if style??> style="${style!}" </#if>></div>
<script>

    ${hlsDataSource!}
    .fetch(function (hlsDataSource) {
        var seriesFirst = new Array();
        var series_type = new Array();
        var series_datas = new Array();
        var series = new Array();
        var config = ${config};
        config.hlsDataSource = hlsDataSource;
        config.series_name = "${series_name!''}";
        for (var n = 0; n < config.items[1].map.split(',').length; n++) {
            series_datas[n] = config.items[1].map.split(',')[n];
            var sss = series_datas[n];
            for (var i = 0; i < config.hlsDataSource.length; i++) {
                seriesFirst[i] =config.hlsDataSource[i][sss];
                console.log(seriesFirst[i]);
            }
            series[n] = [].concat(seriesFirst);
            series_type[n] = {
                name: config.series_name.split(',')[n],
                data: series[n],
                color: config.series_color.split('|')[n]
            };
        }
        config.series_type = series_type;
        ${id}= new HlsMultiBarChart();
    ${id}._init(config);
    });


</script>