<script src="${base.contextPath}/resources/hls/hlsPage/javascript/hlsConponentBase.js" type="text/javascript"></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>
<script src="${base.contextPath}/resources/script/CSH/accountPie.js"></script>
<script src="${base.contextPath}/resources/hls/beyondChart/assets/js/charts/morris/raphael-2.0.2.min.js"></script>


<style>
    .hls-foldLine-chart-title {
        height: 40px;
        line-height: 40px;
        color: #000;
        clear: both;
    }

    .hls-foldLine-chart-chart {
        width: 870px;
        height: 355px;
        float: left;
        background: white;
        box-shadow: 3px 3px 3px rgb(204, 204, 204);
        border-radius: 5px;
    }
</style>

<div class="hls-foldLine-chart-chart ${class!}" <#if style??> style="${style!}"</#if>>
    <div class="hls-foldLine-chart-title">
        <div>
            <div style="float:left;margin-top:1px;">
                <span id="account_first_title_color"
                      style="width:12px;height:12px;background:${color};display:inline-block;margin-left:5px;"></span>
            </div>
            <span id="${titleId}" style="padding-left:10px;"> </span>
        </div>
    </div>
    <div id="${chartId!}"  <#if chartStyle ??> style="${chartStyle}"</#if>>

    </div>
</div>
<script>

    ${hlsDataSource}.fetch(function (datas) {
        var config = ${config};
        if(window["${color}"]!=undefined)
            config.color = window["${color}"];
        else
            config.color = "${color}";
        if(window["${showTitle}"]!=undefined)
            config.showTitle = window["${showTitle}"];
        else
            config.showTitle = "${showTitle}";
        config.hlsDataSource = datas;
        ${id} = new HlsFoldLineChart();
        ${id}._init(config);
    });
</script>