<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/sparkline/jquery.sparkline.js"></script>
<script src="${base.contextPath}/resources/hls/beyondChart/assets/js/charts/sparkline/sparkline-init.js"></script>
<script src="${base.contextPath}/resources/hls/beyondChart/assets/js/charts/flot/jquery.flot.js"></script>
<style>
    .chartButton {
        background: white;
        border: 1px solid rgb(204,204,204);
        height: 25px;
        padding: 3px;
        color: black;
    }
    .collectionManagementContainChartTabContain {
        height: 315px;
        width: 850px;
        background-color: white;
    }
</style>

<div class="collectionManagementContainChartTabContain ${class!}"  <#if style??> style="${style}" </#if>>
    <div id="Bar_${id}" style="height:250px;width: 850px;"></div>
    <div id="Line_${id}" style="height:250px;width: 850px;" ></div>

    <div style="height:65px;width:150px;margin:auto;margin-top:20px;">
        <button id="${id}-bar-btn" class="chartButton">柱状图
        </button>
        <button id="${id}-line-btn" class="chartButton">折线图
        </button>
    </div>

</div>

<script>

    ${hlsDataSource!}.fetch(function (hlsDataSource){
        var config = ${config};
        config.hlsDataSource = hlsDataSource;
    ${id} = new HlsShiftChart();
    ${id}._init(config);
    });


    //柱状图和折线图切换
    $("#Bar_${id}").hide();
    $("#${id}-bar-btn").click( function () {
        $("#Line_${id}").hide();
        $("#Bar_${id}").show();

    });
    $("#${id}-line-btn").click( function () {
        $("#Bar_${id}").hide();
        $("#Line_${id}").show();
    });


</script>