LifeCenter/src/main/webapp/WEB-INF/jsp/api/monitor/chart.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script>
var startDate = "<c:out value='${startDate}'/>";
var endDate   = "<c:out value='${endDate}'/>";

    $(function() {
        $("input[name=\"startDate\"]").daterangepicker({
            singleDatePicker : true,
            showDropdowns : true,
//             startDate : "<c:out value='${startDate}'/>",
            locale : {
                //format : "M/DD hh:mm A"
                format : "YYYY-MM-DD"
            },
            maxDate : new Date()
        });
        $("input[name=\"endDate\"]").daterangepicker({
            singleDatePicker : true,
            showDropdowns : true,
//             startDate : "<c:out value='${endDate}'/>",
            locale : {
                //format : "M/DD hh:mm A"
                format : "YYYY-MM-DD"
            },
            maxDate : new Date()
        });
        
        $("input[name=\"startDate\"]").val( startDate );
        $("input[name=\"endDate\"]").val( endDate );
        
        var options = {
            type: 'bar',
            data: {
                labels: [], //X축 제목
                datasets: [
                    {                            // 1번째 선그래프의 값
                        label: 'Api Request Total',
                        backgroundColor: "#fcc100",
                        data: [],
                              borderWidth: 1
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        barPercentage: 0.4
                    }]
                },
                showDatapoints: true
            }
        };
        
        
        $( "#chart-data li" ).each( function(){
            var $this  = $( this );
            var inDate = $this.find( "span.chart-date" ).text();
            var total  = $this.find( "span.chart-total" ).text();
            
            options.data.labels.push( inDate );
            options.data.datasets[0].data.push( total );
        });
        
        
        Chart.plugins.register({
            afterDraw: function(chartInstance) {
                if (chartInstance.config.options.showDatapoints) {
                var helpers = Chart.helpers;
                var ctx = chartInstance.chart.ctx;
                var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor);
                
                // render the value of the chart above the bar
                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';
                ctx.fillStyle = fontColor;
                
                chartInstance.data.datasets.forEach( function (dataset) {
                        for (var i = 0; i < dataset.data.length; i++) {
                           var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                           var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
                           var yPos = (scaleMax - model.y) / scaleMax >= 0.93 ? model.y + 20 : model.y - 5;
                           ctx.fillText(dataset.data[i], model.x, yPos);
                        }
                    });
                }
            }
        });
        
        
        var ctx = document.getElementById('myChart').getContext('2d');
        new Chart(ctx, options);
    });

function getExcel(){
    if( $.trim( $( "#downMemo" ).val() ) == "" ){
        alertBox({ txt : "사유를 입력해주세요" });
        $( ".modal-header>.modal-title h3" ).remove();
        return false;
    }
    var newForm = $( "#searchForm" ).clone();
    
    newForm.attr( "id", "excelForm" );
    newForm.attr( "method", "post" );
    newForm.attr( "action", "./excel" );
    newForm.attr( "target", "_blank" );
    newForm.hide();
    
    $( document.body ).append( newForm );
    newForm.submit();
    $( "button.close" ).click();
    $( "#downMemo" ).val( "" );
    $( "#excelForm" ).remove();
    
}




</script>
</head>
<body>
    <div class="modal fade" id="excelDownMemo" tabindex="-1" role="dialog" aria-hidden="true" data-memoid="">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">생활치료센터 리스트 Excel 다운로드</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span> </button>
                </div>
                <div class="modal-body m-3">
                    <table class="table mobile-table">
                        <colgroup>
                            <col style="width: 20%">
                            <col style="width: 80%">
                        </colgroup>
                        <tr>
                            <th><span class="fix">*</span>다운로드 사유</th>
                            <td>
                                <div class="form-row">
                                    <textarea id="downMemo" name="downMemo" class="form-control" cols="" rows="6" placeholder="" maxlength="200"></textarea>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="addMemoTools modal-footer">
                    <button type="button" class="btn btn-outline-primary" data-dismiss="modal">취소</button>
                    <button type="button" class="btn btn-primary" onclick="getExcel();">제출 후 다운로드</button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="wrapper">
        <jsp:include page="${data._INCLUDE}/sidebar.jsp"></jsp:include>
        
        <div class="main">
            <jsp:include page="${data._INCLUDE}/top.jsp"></jsp:include>

            <main class="content">
                <div class="container-fluid p-0">
                    <!-- 환지관리 START -->
                    <div class="row">
                        <div class="col-12 col-lg-6">
                            <h1 class="h3 mb-3">생활치료센터 오픈API 통계</h1>
                        </div>
                        <div class="col-12 col-lg-6  text-right">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="javscript:;">Home</a></li>
                                    <li class="breadcrumb-item active">생활치료센터 오픈API 통계</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <form action="?" method="get" id="searchForm">
                                    <div class="card-body">
                                        <table class="table mobile-table">
                                            <colgroup>
                                                <col style="width:10%">
                                                <col style="width:40%">
                                                <col style="width:10%">
                                                <col style="width:40%">
                                            </colgroup>
                                            <tr>
                                                <th>지역</th>
                                                <td>
                                                    <select class="custom-select form-control" name="locationCode">
                                                        <option value="">전체</option>
                                                        <c:forEach var="i" items="${locationList}">
                                                            <option value="${i.locationCode}" <c:if test="${i.locationCode eq locationCode}"> selected="selected"</c:if>><c:out value="${i.locationName}"/></option>
                                                        </c:forEach>
                                                    </select>
                                                </td>
                                                <th>생활치료센터명</th>
                                                <td>
                                                    <input type="text" class="form-control" name="centerName" placeholder="생활치료센터명" value="<c:out value="${centerName}" />">
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>등록일</th>
                                                <td>
                                                    <div class="row">
                                                        <div class="col-lg-5 col-sm-5">
                                                            <div class="form-group calendar-bar mb-xl-0">
                                                                <input class="form-control" type="text" name="startDate" placeholder="검색 시작일자" autocomplete="off">
                                                                <i class="align-middle mr-2 fas fa-fw fa-calendar-alt"></i>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-2 col-sm-2 text-center">
                                                            ~
                                                        </div>
                                                        <div class="col-lg-5 col-sm-5">
                                                            <div class="form-group calendar-bar mb-xl-0">
                                                                <input class="form-control" type="text" name="endDate" placeholder="검색 종료일자" autocomplete="off">
                                                                <i class="align-middle mr-2 fas fa-fw fa-calendar-alt"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td colspan="2">
                                                    <button class="btn btn-primary">검색</button>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row mb-3">
                                        <div class="col-6">
<!--                                             전체 : -->
                                            <fmt:formatNumber value="${total}" pattern="#,###" />
                                        </div>
                                        <div class="col-6 text-right">
                                            <button class="btn btn-success" data-toggle="modal" data-target="#excelDownMemo">Excel 다운로드</button>
                                            <c:if test="${role._CREATE eq 'Y'}">
                                                <button class="btn btn-primary" onclick="location.href='./new';">생활치료센터 신규 등록</button>
                                            </c:if>
                                        </div>
                                    </div>
                                    
                                    <div id="chart-data" style="display:none;">
                                        <ul>
                                            <c:forEach var="c" items="${chart}">
                                                <li>
                                                    <span class="chart-date">${c.inDate}</span>
                                                    <span class="chart-total">${c.total}</span>
                                                </li>
                                            </c:forEach>
                                        </ul>
                                    </div>
                                    
                                    <div style="height:400px;">
                                        <canvas id="myChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 환자관리 END -->
                </div>
            </main>

            <jsp:include page="${data._INCLUDE}/footer.jsp"></jsp:include>
        </div>
    </div>
</body>
</html>