<script src="${base.contextPath}/resources/hls/beyondChart/assets/js/charts/morris/raphael-2.0.2.min.js"></script>
<script src="${base.contextPath}/resources/hls/beyondChart/assets/js/charts/morris/morris.js"></script>
<script src="${base.contextPath}/resources/hls/beyondChart/assets/js/charts/morris/morris-init.js"></script>
<div class="hls-circular-chart ${class!}" <#if id??> id="${id}"</#if> style="position: relative; ${style!}">
    <div id="${id}_chart" style="width:${chartSize!200}px;height:${chartSize!200}px; padding:0;margin-left: 30px;">
    </div>
    <div id="show_${id}" class="foot-info global-font-size14" style="bottom:10px;position: relative;">
    </div>
</div>
<script>
    ${hlsDataSource}.fetch(function (datas) {
        var config = ${config};
        config.hlsDataSource = datas;
        config.contextPath = "${base.contextPath}";
        config.color = "${color!'#2EC3E8'}";
        config.formatter = "${formatter!}";
        <#if status?? >
            config.status = ${status!};
        </#if>

    ${id}= new HlsCircularChart();
    ${id}._init(config);
    });
</script>