Eggs Sunny Side Up
본문 바로가기
Web/JavaScript

[JS] 그래프 연동

by guswn100059 2023. 8. 4.

Controller

// 그래프 연동
	@PostMapping("/graph.com")
	public String graph(@RequestParam("u_id") String u_id) {
		Map<String, List<?>> result = new HashMap<>();
		List<tb_Security_alarm_car> sac = sacmapper.calendarSac(u_id);
		result.put("sac", sac);
		List<tb_Security_alarm_human> sah = sahmapper.calendarSah(u_id);
		result.put("sah", sah);
		
		// List 배열을 json으로 데이터변환
		String json = new Gson().toJson(result);
		System.out.println(json);
		
		return json;
	}

 

chart-area.js

ajax 부분

/*ajax*/
$(function(){
	$.ajax({
		url : 'graph.com',
		type : 'post',
		data : {"u_id": data},
		dataType : 'json',
		success: function(res){
			/*console.log(res);*/
			/*console.log(res.sac[0].sac_in_count);
			console.log(res.sac[0].sac_out_count);
			console.log(res.sac[0].sac_in_at);*/
			/*console.log(res.sac[0].sac_in_at.substring(10,13));*/
			
			let labels = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
			/*console.log(labels);*/
			
			/*침입 시간 -> in*/
			let sac_intrusion_time = [];
			let sah_intrusion_time = [];
			/*출입 시간 -> out*/
			let sac_entrance_time = [];
			let sah_entrance_time = [];
			
			/*침입 카운트*/
			let sac_intrusion_count = [];
			let sah_intrusion_count = [];
			/*출입 카운트*/
			let sac_entrance_count = [];
			let sah_entrance_count = [];
			
			for(var i = 0; i < res.sac.length; i++){
				/*console.log(res.sac[i].sac_in_at.substring(11,13));*/
				sac_intrusion_time.push(res.sac[i].sac_in_at.slice(11,13));
				sac_entrance_time.push(res.sac[i].sac_out_at.slice(11,13));
				/*console.log(sac_intrusion_time);*/
				/*console.log(typeof(res.sac[i].sac_out_at.slice(11,13)));*/
				
				for(var j = 0; j < labels.length; j++){
					if(sac_intrusion_time == labels[j]){
						sac_intrusion_count.push(res.sac[i].sac_in_count);
						sac_entrance_count.push(res.sac[i].sac_out_count);
					}else{
						sac_intrusion_count.push(0);
						sac_entrance_count.push(0);
					}

				}
			}
			sac_intrusion_count = sac_intrusion_count.slice(0, 24);
			sac_entrance_count = sac_entrance_count.slice(0, 24);
			/*console.log(sac_intrusion_count);
			console.log(sac_entrance_count);*/
			
			for(var i = 0; i < res.sah.length; i++){
				sah_intrusion_time.push(res.sah[i].sah_in_at.slice(11,13));
				if(res.sah[i].sah_out_at !==undefined && !isNaN(res.sah[i].sah_out_at)){
					res.sah[i].sah_out_at = res.sah[i].sah_out_at.slice(11,13);
				}
				sah_entrance_time.push(res.sah[i].sah_out_at);

				for(var j = 0; j < res.sah.length; j++){
					if(sah_intrusion_time == labels[j]){
						sah_intrusion_count.push(res.sah[i].sah_in_count);
						sah_entrance_count.push(res.sah[i].sah_out_count);
						console.log(sah_entrance_count);
					}else{
						sah_intrusion_count.push(0);
						sah_entrance_count.push(0);
					}
				}
			}
			sah_intrusion_count = sah_intrusion_count.slice(0, 24);
			sah_entrance_count = sah_entrance_count.slice(0, 24);
			
			AreaChart(labels, sac_intrusion_count, sac_entrance_count, sah_intrusion_count, sah_entrance_count);
			
		}
	});
})

그래프 부분

/* 체크박스 선택시 값 불러오기 */
let result = [];

/* 체크박스 선택시 값 불러오기 - 출입침입선택 */
function getNavChkbxVal(test) {
	if (test.checked) {
		result = [];
		result.push(test.value);
		test.checked=false;
	}
	console.log(result);
};

/* 체크박스 선택시 값 불러오기 - 차량사람선택 */
function getChkbxVal(test) {
	if (test.checked) {
		if (!result.includes(test.value)) {
			result.push(test.value);
		}
	} else {
		const index = result.indexOf(test.value);
		if (index !== -1) {
			result.splice(index, 1);
		}
	}
	console.log(result);
};


function AreaChart(labels, sac_intrusion_count, sac_entrance_count, sah_intrusion_count, sah_entrance_count){

var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
	type: 'line',
	data: {
		labels: labels,
		datasets: [{
			label: "출입:차량",
			lineTension: 0.3,
			backgroundColor: "rgba(201, 34, 28, 0.2)",
			borderColor: "rgba(201, 34, 28,1)",
			pointRadius: 5,
			pointBackgroundColor: "rgba(201, 34, 28,1)",
			pointBorderColor: "rgba(255,255,255,0.8)",
			pointHoverRadius: 5,
			pointHoverBackgroundColor: "rgba(201, 34, 28,1)",
			pointHitRadius: 50,
			pointBorderWidth: 2,
			data: sac_entrance_count,
			pointStyle: true,
			fill: true
		},
		{
			label: "출입:사람",
			lineTension: 0.3,
			backgroundColor: "rgba(247, 164, 20,0.3)",
			borderColor: "rgba(247, 164, 20,1)",
			pointRadius: 5,
			pointBackgroundColor: "rgba(247, 164, 20,1)",
			pointBorderColor: "rgba(255,255,255,0.8)",
			pointHoverRadius: 5,
			pointHoverBackgroundColor: "rgba(247, 164, 20,1)",
			pointHitRadius: 50,
			pointBorderWidth: 2,
			data: sah_entrance_count,
			pointStyle: true,
			fill: true
		},
		{
			label: "침입:차량",
			lineTension: 0.3,
			backgroundColor: "rgba(247, 119, 20,0.2)",
			borderColor: "rgba(247, 119, 20,1)",
			pointRadius: 5,
			pointBackgroundColor: "rgba(247, 119, 20,1)",
			pointBorderColor: "rgba(255,255,255,0.8)",
			pointHoverRadius: 5,
			pointHoverBackgroundColor: "rgba(247, 119, 20,1)",
			pointHitRadius: 50,
			pointBorderWidth: 2,
			data: sac_intrusion_count,
			pointStyle: true,
			fill: true
		},
		{
			label: "침입:사람",
			lineTension: 0.3,
			backgroundColor: "rgba(247, 164, 20,0.3)",
			borderColor: "rgba(247, 164, 20,1)",
			pointRadius: 5,
			pointBackgroundColor: "rgba(247, 164, 20,1)",
			pointBorderColor: "rgba(255,255,255,0.8)",
			pointHoverRadius: 5,
			pointHoverBackgroundColor: "rgba(247, 164, 20,1)",
			pointHitRadius: 50,
			pointBorderWidth: 2,
			data: sah_intrusion_count,
			pointStyle: true,
			fill: true
		}],
	},
	options: {
		scales: {
			xAxes: [{
				time: {
					unit: 'date'
				},
				gridLines: {
					display: false
				},
				ticks: {
					maxTicksLimit:24
				}
			}],
			yAxes: [{
				ticks: {
					min: 0,
					max: 10,
					maxTicksLimit: 5 //Axes에 출력할 숫자 5개로 제한
				},
				gridLines: {
					color: "rgba(0, 0, 0, .125)",
				}
			}],
		},
		legend: {
			display: false
		}
	}
});

/* 전송받은 값 토대로 데이터 표시여부 설정 */
$('.datachkbx').on('click', function() {
	/*console.log("up!");*/
	/*passing 출입*/
	if(result.includes('passing')) {
		if (result.includes('car') && !result.includes('human') && result.includes('passing')) {
			myLineChart.data.datasets[0].data = sac_entrance_count;
			myLineChart.data.datasets[1].data = [];
			myLineChart.data.datasets[2].data = [];
			myLineChart.data.datasets[3].data = [];
		} else if(!result.includes('car') && result.includes('human') && result.includes('passing')){
			myLineChart.data.datasets[0].data = [];
			myLineChart.data.datasets[1].data = sah_entrance_count;
			myLineChart.data.datasets[2].data = [];
			myLineChart.data.datasets[3].data = [];
		} else if(result.includes('car') && result.includes('human') && result.includes('passing')) {
			myLineChart.data.datasets[0].data = sac_entrance_count;
			myLineChart.data.datasets[1].data = sah_entrance_count;
			myLineChart.data.datasets[2].data = [];
			myLineChart.data.datasets[3].data = [];
		} else {
			myLineChart.data.datasets[0].data = [];
			myLineChart.data.datasets[1].data = [];
			myLineChart.data.datasets[2].data = [];
			myLineChart.data.datasets[3].data = [];
		};
		/*intrude 침입*/
	}else if(result.includes('intrude')){
		if (result.includes('car') && !result.includes('human') && result.includes('intrude')) {
			myLineChart.data.datasets[0].data = [];
			myLineChart.data.datasets[1].data = [];
			myLineChart.data.datasets[2].data = sac_intrusion_count;
			myLineChart.data.datasets[3].data = [];
		} else if(!result.includes('car') && result.includes('human') && result.includes('intrude')){
			myLineChart.data.datasets[0].data = [];
			myLineChart.data.datasets[1].data = [];
			myLineChart.data.datasets[2].data = [];
			myLineChart.data.datasets[3].data = sah_intrusion_count;
		} else if(result.includes('car') && result.includes('human') && result.includes('intrude')) {
			myLineChart.data.datasets[0].data = [];
			myLineChart.data.datasets[1].data = [];
			myLineChart.data.datasets[2].data = sac_intrusion_count;
			myLineChart.data.datasets[3].data = sah_intrusion_count;
		} else {
			myLineChart.data.datasets[0].data = [];
			myLineChart.data.datasets[1].data = [];
			myLineChart.data.datasets[2].data = [];
			myLineChart.data.datasets[3].data = [];
		};
	};
	myLineChart.update();
});
}

 

 

chart-bar.js

ajax부분

/*ajax*/
$(function(){
	$.ajax({
		url : 'graph.com',
		type : 'post',
		data : {"u_id": data},
		dataType : 'json',
		success: function(res){
			/*console.log(res);*/
			/*console.log(res.sac[0].sac_in_count);
			console.log(res.sac[0].sac_out_count);
			console.log(res.sac[0].sac_in_at);*/
			/*console.log(res.sac[0].sac_in_at.substring(10,13));*/
			
			let labels = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
			/*console.log(labels);*/
			
			/*침입 시간 -> in*/
			let sac_intrusion_time = [];
			let sah_intrusion_time = [];
			/*출입 시간 -> out*/
			let sac_entrance_time = [];
			let sah_entrance_time = [];
			
			/*침입 카운트*/
			let sac_intrusion_count = [];
			let sah_intrusion_count = [];
			/*출입 카운트*/
			let sac_entrance_count = [];
			let sah_entrance_count = [];
			
			for(var i = 0; i < res.sac.length; i++){
				console.log(res.sac[i].sac_in_at.substring(5,7));
				sac_intrusion_time.push(res.sac[i].sac_in_at.slice(5,7));
				sac_entrance_time.push(res.sac[i].sac_out_at.slice(5,7));
				/*console.log(sac_intrusion_time);*/
				/*console.log(typeof(res.sac[i].sac_out_at.slice(11,13)));*/
				
				for(var j = 0; j < labels.length; j++){
					if(sac_intrusion_time == labels[j]){
						sac_intrusion_count.push(res.sac[i].sac_in_count);
						sac_entrance_count.push(res.sac[i].sac_out_count);
					}else{
						sac_intrusion_count.push(0);
						sac_entrance_count.push(0);
					}

				}
			}
			sac_intrusion_count = sac_intrusion_count.slice(0, 24);
			sac_entrance_count = sac_entrance_count.slice(0, 24);
			/*console.log(sac_intrusion_count);
			console.log(sac_entrance_count);*/
			
			for(var i = 0; i < res.sah.length; i++){
				sah_intrusion_time.push(res.sah[i].sah_in_at.slice(5,7));
				if(res.sah[i].sah_out_at !==undefined && !isNaN(res.sah[i].sah_out_at)){
					res.sah[i].sah_out_at = res.sah[i].sah_out_at.slice(5,7);
				}
				sah_entrance_time.push(res.sah[i].sah_out_at);

				for(var j = 0; j < res.sah.length; j++){
					if(sah_intrusion_time == labels[j]){
						sah_intrusion_count.push(res.sah[i].sah_in_count);
						sah_entrance_count.push(res.sah[i].sah_out_count);
						console.log(sah_entrance_count);
					}else{
						sah_intrusion_count.push(0);
						sah_entrance_count.push(0);
					}
				}
			}
			sah_intrusion_count = sah_intrusion_count.slice(0, 24);
			sah_entrance_count = sah_entrance_count.slice(0, 24);
			
			BarChart(labels, sac_intrusion_count, sac_entrance_count, sah_intrusion_count, sah_entrance_count);
			
		}
	});
})

 

그래프 부분

function BarChart(labels, sac_intrusion_count, sac_entrance_count, sah_intrusion_count, sah_entrance_count){

var ctx = document.getElementById("myBarChart");
var mySquareChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: "Revenue",
      backgroundColor: "rgba(201, 34, 28,1)",
      borderColor: "rgba(201, 34, 28,1)",
      data: sac_entrance_count,
    },
    {
      label: "Revenue",
      backgroundColor: "rgba(247, 164, 20,1)",
      borderColor: "rgba(247, 164, 20,1)",
      data: sac_intrusion_count,
    },
    {
      label: "Revenue",
      backgroundColor: "rgba(201, 34, 28,1)",
      borderColor: "rgba(201, 34, 28,1)",
      data: sah_entrance_count,
    },
    {
      label: "Revenue",
      backgroundColor: "rgba(247, 164, 20,1)",
      borderColor: "rgba(247, 164, 20,1)",
      data: sah_intrusion_count,
    }],
  },
  options: {
    scales: {
      xAxes: [{
        time: {
          unit: 'month'
        },
        gridLines: {
          display: false
        },
        ticks: {
          maxTicksLimit: 12
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 10,
          maxTicksLimit: 5
        },
        gridLines: {
          display: true
        }
      }],
    },
    legend: {
      display: false
    }
  }
});

/* 전송받은 값 토대로 데이터 표시여부 설정 */
$('.datachkbx').on('click', function() {
	console.log("up!");
	if(result.includes('passing')) {
		if (result.includes('car') && !result.includes('human') && result.includes('passing')) {
			mySquareChart.data.datasets[0].data = sac_entrance_count;
			mySquareChart.data.datasets[1].data = [];
			mySquareChart.data.datasets[2].data = [];
			mySquareChart.data.datasets[3].data = [];
		} else if(!result.includes('car') && result.includes('human') && result.includes('passing')){
			mySquareChart.data.datasets[0].data = [];
			mySquareChart.data.datasets[1].data = sah_entrance_count;
			mySquareChart.data.datasets[2].data = [];
			mySquareChart.data.datasets[3].data = [];
		} else if(result.includes('car') && result.includes('human') && result.includes('passing')) {
			mySquareChart.data.datasets[0].data = sac_entrance_count;
			mySquareChart.data.datasets[1].data = sah_entrance_count;
			mySquareChart.data.datasets[2].data = [];
			mySquareChart.data.datasets[3].data = [];
		} else {
			mySquareChart.data.datasets[0].data = [];
			mySquareChart.data.datasets[1].data = [];
			mySquareChart.data.datasets[2].data = [];
			mySquareChart.data.datasets[3].data = [];
		};
	}else if(result.includes('intrude')){
		if (result.includes('car') && !result.includes('human') && result.includes('intrude')) {
			mySquareChart.data.datasets[0].data = [];
			mySquareChart.data.datasets[1].data = [];
			mySquareChart.data.datasets[2].data = sac_intrusion_count;
			mySquareChart.data.datasets[3].data = [];
		} else if(!result.includes('car') && result.includes('human') && result.includes('intrude')){
			mySquareChart.data.datasets[0].data = [];
			mySquareChart.data.datasets[1].data = [];
			mySquareChart.data.datasets[2].data = [];
			mySquareChart.data.datasets[3].data = sah_intrusion_count;
		} else if(result.includes('car') && result.includes('human') && result.includes('intrude')) {
			mySquareChart.data.datasets[0].data = [];
			mySquareChart.data.datasets[1].data = [];
			mySquareChart.data.datasets[2].data = sac_intrusion_count;
			mySquareChart.data.datasets[3].data = sah_intrusion_count;
		} else {
			mySquareChart.data.datasets[0].data = [];
			mySquareChart.data.datasets[1].data = [];
			mySquareChart.data.datasets[2].data = [];
			mySquareChart.data.datasets[3].data = [];
		};
	};
	mySquareChart.update();
});
}

+) 오류 해결방법

오류 : Cannot Read Property 'slice' of undefined in pos.

위와 같은 오류가 뜨면 아래 링크에서 제시하는 방법을 쓰면 오류 안뜸!

https://www.odoo.com/ko_KR/forum/doummal-1/cannot-read-property-slice-of-undefined-in-pos-175998

if(res.sah[i].sah_out_at !==undefined && !isNaN(res.sah[i].sah_out_at)){
	res.sah[i].sah_out_at = res.sah[i].sah_out_at.slice(11,13);
}

=> 이런 식으로 if(변수 !==undefined && !isNaN(변수)){} 코드 작성하면 된당.

실행화면

'Web > JavaScript' 카테고리의 다른 글

[JS] 웹에 웹캠 거울버전으로 2개 영상 송출  (0) 2023.07.19
[JS]웹캠 영상 송출  (0) 2023.07.19
[NodeJS] nodejs로 한 화면에 2개의 rtsp 영상 송신  (0) 2023.07.18
[NodeJS]rtsp 주소(실시간 영상) 웹으로 불러오기  (0) 2023.07.17
카카오맵 API 기초  (0) 2023.04.25

관련글

댓글

티스토리툴바