#4 Am Chart 사용

// 실내 모니터링에서 차트
@ResponseBody
@RequestMapping(value = "/insideChart", method = RequestMethod.GET)
public JSONArray insideChart(Model model, HttpServletRequest request, HttpSession session) {
    String member_id = ((MemberVO) request.getSession().getAttribute("user")).getMember_id();
        
    String date = request.getParameter("date");
        
    ArrayList<MeasureDataVO> list = manageService.insideChart(member_id, date);
    model.addAttribute("list" + list);
 
    JSONArray jArray = new JSONArray();
    for (int i = 0; i < list.size(); i++) {
        JSONObject json = new JSONObject();
        json.put("measure", list.get(i).getMeasure()); // 측정 값
        json.put("TODAY", list.get(i).getTODAY()); // 현재 날짜
        json.put("measuretime", list.get(i).getMeasuretime()); // 측정 시간
        json.put("CODE", list.get(i).getCODE()); // 측정 코드
        json.put("iotID", list.get(i).getIotID()); // 기기 ID
        jArray.add(json);
    }
    return jArray;
}

// jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp"%>
<link rel="stylesheet" href="/resources/css/manage/monitoringIn.css">
<div id="inside">
    <%-- AmChart 시작 --%>
    <div id="chartdiv"></div>
    <%-- AmChart 끝 --%>
 
    <%-- 달력 선택 시작 --%>
    <input type="date" id="measureDate" onchange="measureDate(this)" />
    <%-- 달력 선택 끝 --%>
 
    <div id="chartList">
        <h3>측정 상세 정보</h3>
        <table class="table">
            <th class="table__heading">Today</th>
            <th class="table__heading">측정 값<sub>(㎍/㎥)</sub></th>
            <th class="table__heading">기기 ID</th>
            <th class="table__heading">측정 코드</th>
            <tbody class="chartList-list"></tbody>
        </table>
    </div>
</div>
<script src="resources/js/core.js"></script>
<script src="resources/js/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/spiritedaway.js"></script>
<script src="resources/js/manage/monitoringIn.js"></script>
<%@include file="../include/footer.jsp"%>

// js

var ip = sessionStorage.getItem('IP_ADDRESS');
var user = JSON.parse(sessionStorage.getItem("user"));
var member_id = user.member_id;
 
/*날짜 선택하기 시작*/
function measureDate(object) {
    console.log(object.value); // 20xx-xx-xx 형식으로 리턴됨
    var date = object.value;
    
    chartDetail(date);
}
/* 날짜 선택하기 끝 */
 
/* 현재 날짜 세팅하기 시작 */
document.getElementById('measureDate').value = new Date().toISOString().substring(0, 10);
var date = document.getElementById('measureDate').value;
 
chartDetail(date);
 
/* 현재 날짜 세팅하기 끝 */
 
/* 차트 불러오는거 시작 */
function chartDetail(date) {
    $.ajax({
        crossDomain: true,
        type : "GET",
        contentType: "application/json; charset=utf-8",
        url : ip+"/m.insideChart?date="+date+"&member_id="+member_id,
        headers: { "Access-Control-Allow-Origin": "*" },
        dataType : "json",
        async : false,
        success : function(data) {
            console.log(data);
            am4core.ready(function() {
 
                // Themes begin
                am4core.useTheme(am4themes_spiritedaway);
                // Themes end
 
                // Create chart instance
                var chart = am4core.create("chartdiv", am4charts.XYChart);
 
                // Add data
                chart.data = data;
                console.log(chart.data);
 
                // Set input format for the dates
                chart.dateFormatter.inputDateFormat = "yyyy MMMM dd hh:mm a";
 
                // Create axes
                var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
                var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
                valueAxis.tooltip.disabled = true;
                valueAxis.title.text = "미세먼지 측정 값(㎍/㎥)";
 
                dateAxis.baseInterval = {
                    "timeUnit" : "second",
                    "count" : 1
                };
                dateAxis.tooltipDateFormat = "yyyy MMMM dd hh:mm a";
                dateAxis.dateFormats.setKey("second", "hh:mm:ss a");
 
                // Create series
                var series = chart.series.push(new am4charts.LineSeries());
                series.dataFields.valueY = "measure";
                series.dataFields.dateX = "measuretime";
                series.tooltipText = "{measure}"
                series.strokeWidth = 2;
                series.minBulletDistance = 15;
 
                // Drop-shaped tooltips
                series.tooltip.background.cornerRadius = 20;
                series.tooltip.background.strokeOpacity = 0;
                series.tooltip.pointerOrientation = "vertical";
                series.tooltip.label.minWidth = 40;
                series.tooltip.label.minHeight = 40;
                series.tooltip.label.textAlign = "middle";
                series.tooltip.label.textValign = "middle";
 
                // Make bullets grow on hover
                var bullet = series.bullets.push(new am4charts.CircleBullet());
                bullet.circle.strokeWidth = 2;
                bullet.circle.radius = 4;
                bullet.circle.fill = am4core.color("#fff");
 
                var bullethover = bullet.states.create("hover");
                bullethover.properties.scale = 1.3;
 
                // Make a panning cursor
                chart.cursor = new am4charts.XYCursor();
                chart.cursor.behavior = "none";
                chart.cursor.xAxis = dateAxis;
                chart.cursor.snapToSeries = series;
 
                // Create vertical scrollbar and place it before the value axis
//                chart.scrollbarY = new am4core.Scrollbar();
//                chart.scrollbarY.parent = chart.leftAxesContainer;
//                chart.scrollbarY.toBack();
 
                // Create a horizontal scrollbar with previe and place it
                // underneath the
                // date axis
//                chart.scrollbarX = new am4charts.XYChartScrollbar();
//                chart.scrollbarX.series.push(series);
//                chart.scrollbarX.parent = chart.bottomAxesContainer;
 
                chart.events.on("ready", function() {
                    // dateAxis.zoom({start:0.79, end:1});
                }); // end am4core.ready()
            }); // 차트 끝
 
            // append
            var list = "";
            for (var i = 0; i < data.length; i++) {
                list += '<tr class="table__row">'
                    + '<td class="table__content">' + data[i].measuretime + '</td>'
                    + '<td class="table__content">' + data[i].measure + '<sub>(㎍/㎥)</sub></td>'
                    + '<td class="table__content">' + data[i].iotID + '</td>'
                    + '<td class="table__content">' + data[i].CODE + '</td>'
                    + '</tr>';
            }
            $(".chartList-list td").remove();        
            $(".chartList-list").append(list);
        }, // SUCCESS
        error : function() {
            console.log("연결 실패");
        }
    });
}

// css

@charset "UTF-8";

:root {
  --yellow: #ffc842;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}

body {
  font-weight: 400;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    sans-serif;
}

td,
th {
  padding: 0.5rem;
}

th {
  text-align: left;
  font-weight: 300;
  font-size: 1.25rem;
}

.table {
  width: 100%;
  padding: 1rem;
}

h3{
    text-align: center;
}

.table__heading {
  border-bottom: 2px solid var(--yellow);
}

@media (max-width: 32rem) {
  .table__heading {
    display: none;
  }

  .table__content {
    display: block;
    padding: 0.5rem 0;
  }

  .table__row {
    margin: 0.25rem 1rem;
    padding: 0.5rem 0;
    display: block;
    border-bottom: 2px solid var(--yellow);
  }

  .table__content:before {
    content: attr(data-heading);
    display: inline-block;
    width: 5rem;
    margin-right: 0.5rem;
    color: #999;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 2px;
  }
}

// 실행 화면