Written by 최태열
on January 18, 2021

Ajax로 Google Chart 비동기로 그리기

노선별 핵심 지하철 지표 비교
노선 입력 :

dataRes.json

{
"DESCRIPTION" : {"USE_DT":"사용일자","SUB_STA_NM":"역명","WORK_DT":"등록일자","RIDE_PASGR_NUM":"승차총승객수","LINE_NUM":"호선명","ALIGHT_PASGR_NUM":"하차총승객수"},
"DATA" : [
{"line_num":"우이신설선","ride_pasgr_num":2661,"alight_pasgr_num":2498,"work_dt":"20200810","use_dt":"20200807","sub_sta_nm":"4.19민주묘지"},
{"line_num":"경원선","ride_pasgr_num":6415,"alight_pasgr_num":6082,"work_dt":"20200810","use_dt":"20200807","sub_sta_nm":"가능"},
{"line_num":"8호선","ride_pasgr_num":8056,"alight_pasgr_num":9185,"work_dt":"20200810","use_dt":"20200807","sub_sta_nm":"가락시장"},
{"line_num":"3호선","ride_pasgr_num":9723,"alight_pasgr_num":9491,"work_dt":"20200810","use_dt":"20200807","sub_sta_nm":"가락시장"},
{"line_num":"7호선","ride_pasgr_num":44574,"alight_pasgr_num":45217,"work_dt":"20200810","use_dt":"20200807","sub_sta_nm":"가산디지털단지"},
{"line_num":"경부선","ride_pasgr_num":17423,"alight_pasgr_num":19838,"work_dt":"20200810","use_dt":"20200807","sub_sta_nm":"가산디지털단지"},
{"line_num":"9호선","ride_pasgr_num":22493,"alight_pasgr_num":21156,"work_dt":"20200810","use_dt":"20200807","sub_sta_nm":"가양"},
{"line_num":"우이신설선","ride_pasgr_num":3889,"alight_pasgr_num":3632,"work_dt":"20200810","use_dt":"20200807","sub_sta_nm":"가오리"},
.
.
.

requestSubway.html

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Subway</title>
<script type="text/javascript"
	src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
	노선별 핵심 지하철 지표 비교
	<br> 노선 입력 :
	<input type="text" id="lineNum">
	<button onclick="chartView()">차트 확인하기</button>

	<script type="text/javascript">
        google.charts.load('current', { 'packages': ['corechart', 'line'] });
		
        function chartView() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    var data = document.getElementById("lineNum").value;
                    var line = JSON.parse(this.responseText);

                    //"line_num":"우이신설선","ride_pasgr_num":2661,"alight_pasgr_num":2498,"work_dt":"20200810","use_dt":"20200807","sub_sta_nm":"4.19민주묘지"},
                    
                    var arr = [["정거장명", "유동인구(승차승객+하차승객)"]];	//유동인구 차트
                    var arr2 = [];	//승차인구 차트
                    for (const li of line.DATA) {
                        if (li.line_num == data) {
                            arr.push([li.sub_sta_nm, li.alight_pasgr_num + li.ride_pasgr_num]);
                            arr2.push([li.sub_sta_nm, li.ride_pasgr_num - li.alight_pasgr_num]);
                        }
                    }
                    
                    
                    //유동인구 차트
                    document.getElementById("piechart").style.display="block";
                    document.getElementById("barchart").style.display="block";
                    new google.visualization.PieChart(document.getElementById('piechart'))
                    .draw(google.visualization.arrayToDataTable(arr), { title: `${data} 유동인구` });
                    new google.visualization.BarChart(document.getElementById('barchart'))
                    .draw(google.visualization.arrayToDataTable(arr), { title: `${data} 유동인구` });
					
                    //승차승객 차트
                    var lineData = new google.visualization.DataTable();
                    lineData.addColumn('string', '정거장명');
                    lineData.addColumn('number', '실승차객');
                    lineData.addRows(arr2);
                    
                    new google.charts.Line(document.getElementById('barchart2'))
                    .draw(lineData, { title: `${data} 실승차객` });
                    
                    //display setting
                    document.getElementById("barchart").style.display="none";
                    console.log(document.getElementById("tButton"));
                    document.getElementById("tButton").style.display="block";
                }
            };
            xhttp.open("GET", "dataRes.json", true);
            xhttp.send();
        }
    </script>
    
    <div id="piechart" style="width: 900px; height: 400px;"></div>
    <div id="barchart" style="width: 900px; height: 400px;"></div>
    <div id="tButton" style="display: none;">
        <button onclick="toggle(0)">PieChart 보기</button>
        <button onclick="toggle(1)">BarChart 보기</button>
    </div>
    <div id="barchart2" style="width: 900px; height: 400px;"></div>

    <script>
        function toggle(num){
            if (num=='0'){
                document.getElementById("piechart").style.display="block";
                document.getElementById("barchart").style.display="none";
            } else {
                document.getElementById("piechart").style.display="none";
                document.getElementById("barchart").style.display="block";
            }
        }
    </script>
</body>
</html>

Discussion and feedback

← → Top