javascript ) c3.js 차트에 데이터 연동하기 (ajax + php + mysql)

c3.js 설치 및 기본 사용법은 아래 링크 참고

https://vivacolor96.tistory.com/68

javascript ) c3.js를 이용한 차트 표시

 

위의 내용까지는 javascript 안에서 노출하고자 하는 값을 배열에 직접 값을 넣어주었다.

하지만 분석용 차트 표시하면서 이렇게 사용할 사람은 많지 않겠지..

나 또한 쇼핑몰 관리자에서 여러 값의 변화를 표시하기 위해 사용하는 것이므로 데이터 연동이 필수적이다.

페이지 로딩하자마자 보이는 차트라서 ajax를 사용하지 않아도 됐지만, 쇼핑몰 관리자이다 보니 데이터 로딩을 분산시키기 위해 ajax를 사용하기로 했다.

 

내가 보여주고자 하는 차트 중 하나인 일주일간의 신규가입자 수의 변화를 예로 작성하겠다.

 

DB구조

Member 테이블

idx	id	joindate
1	member1	2023-12-01 13:00
2	member2	2023-12-01 13:03
...

다른 데이터 다 스킵하고 필요한 컬럼은 joindate(회원가입일)

<div id="Chart"></div>
 

Ajax

ajax 파일명은 test.ajax.php로 생성했다.

<?
$Rs = array();
$Rs['Ack'] = "Fail";
$Rs['Desc'] = "";
$Rs['Data'] = "";
 
$Data = array();
$DateInfo = array(); # 그래프에 표기할 날짜
$JoinInfo = array(); # 각 날짜별 회원가입 수
 
for($i=0;$i<7;$i++){
    $DateInfo[] = date("md", strtotime("-".$i." Day"));
    $date = date("Y-m-d", strtotime("-".$i." Day")); # 오늘로부터 $i일 전 
 
    # 신규 가입
    $sql = " select count(*) as cnt from Member where joindate like '".$date."%' ";
    $result = mysqli_query($conn, $sql);
    $row = mysqli_fetch_array($result);
    $cnt = $row['cnt'] ?? 0;
    $JoinInfo[] = (int)$cnt;
}
 
$Data['Date'] = $DateInfo;
$Data['Join'] = $JoinInfo;
 
$Rs['Ack'] = "Success";
$Rs['Desc'] = "";
$Rs['Data'] = $Data;
 
$Rs = json_encode($Rs);
die($Rs);
 
?>

Javascript

ajax 데이터 리턴해서 가져오는 함수 JoinMemberCall()

페이지 로딩이 되자마자 해당 함수를 호출한다.

function JoinMemberCall(){
    $.ajax({
        url: './test.ajax.php',
        type: "POST",
        dataType: "json",
        success: function(data, textStatus) {
            MemberGraph(data['Data']);
        },
        error: function(request, status, error) {
            console.log(error);
        },
        complete: function(xhr, status) {
        }
    });
}
 
$(window).ready(function(){
    JoinMemberCall();
});

참고로 test.ajax.php가 오류 없이 데이터를 리턴할 경우, 아래와 같이 데이터를 리턴한다.

Data값 안에 Date(mmdd 날짜)와 Join(회원가입한 사람) 값이 잘 담겨있다.

에러 없이 올바르게 리턴 받았다면, MemberGraph()라는 함수에 해당 데이터를 넘긴다.

 

차트를 노출하는 함수 MemberGraph() 

받아온 data배열을 c3의 함수를 이용해서 json형태로 뿌려준다.

function MemberGraph(data){
    var date = data['Date'];
    var join = data['Join'];
    var chart = c3.generate({
        bindto: '#Chart',
        point: { r: 4 },
        color: { pattern: ["#ff2222"] },
        data:{
            json:{
                date: date,
                "신규회원": join,
            },
            x: 'date',
            type: 'line',
            types:{
                "신규회원": 'spline',
            }
        },
        grid: {
            y: {
                show: true
            }
        }
    });
}

 

결과

그리고 결과물

연동된 테이블의 값에 따라서 그래프도 바뀐다..

역시 조금 귀찮을뿐 어려운건 없었다.