Etc/Frontend

07.13

z.zzz 2021. 7. 14. 16:12

그룹별로 묶어 합을 구하고 그 합의 평균값 구하기

 - 사용자별로 총 운동한 횟수를 구하고, 이에 따른 평균을 구해 '평균 사용자 운동 횟수'를 구함

 - 예상쿼리 : SELECT AVG(count(*)) FROM challenge WHERE c_date GROUP BY id; ( X )

SELECT AVG(result.C)
FROM (SELECT COUNT(*) AS C
               FROM challenge
               WHERE c_date
               GROUP BY id) result;

 

이번 달에 해당하는 column을 COUNT하기

 - '이번 달 운동 횟수' 구하기          //c_date 컬럼에 운동한 날짜를 저장

SELECT COUNT(*) FROM challenge WHERE id='{$id}' AND c_date > DATE_FORMAT(now(), '%Y-%m');

 

월 별 데이터 SELECT 및 COUNT하기

 - 사용자의 월별 운동 횟수 구하기

SELECT COUNT(*)
FROM challenge
WHERE id='{$id}'
GROUP BY DATE_FORMAT(c_date,'%Y-%m')
ORDER BY DATE_FORMAT(c_date,'%Y-%m') DESC   /* 이번 달 기준 */                    
LIMIT 12;                                                                        /* 12개월간의 데이터 */                    

 

javascript로 DB 데이터 이용하기(php 데이터를 js로 넘기기)

//php에서 데이터를 배열 형태로 전달
$data = array();

// DB에서 date 값 받아오기
<script>
  const data = <?php echo json_encode($data)?>;
</script>

 

이번달의 마지막 날짜 구하기

- getMonth()만 하면 7월 기준 6이 결과로 나오는데 new Date(...getMonth())는 7월 기준 7이 결과로 나와서 예시코드는 8월의 0일, 즉 7월 마지막 날을 나타냄

let lastday = new Date(today.getYear(), today.getMonth()+10).getDate();

 

Chart.js 사용법

차트 라이브러리 : https://www.chartjs.org/docs/latest/

① doughnut chart

   - type : 'doughnut'

   - responsive: false로 차트 사이즈 고정 (true면 브라우저 크기에 따라, 차트 크기도 달라짐)

 

② bar chart

   - type : 'bar'

'Etc > Frontend' 카테고리의 다른 글

내비게이션 바에서 링크를 클릭했을 때 클릭된 내용을 본문에 나타내기  (0) 2021.08.11
07.13 공부일지 - Javascript 2주차  (0) 2021.07.14
2021.07.11  (0) 2021.07.11
2021.07.07  (0) 2021.07.07
[생활코딩-React] Update  (0) 2021.03.17