[Django] highcharts로 차트 구현하기

직원이 확인해야하는 main페이지에 자동화지만, 어떻게 하면 한눈에 돌아가고 있는 것을 확인할 수 있을까를 고민하다가 그래프를 통해 현황을 시각화하여 넣기로 하였다.

 

공사 그래프에 넣는 항목

y축 :

1. 신규 접수 공사 수

2. 금일 진행 공사 수

3. 주간 예정 공사 수

x축 : 일주일 단위의 날짜 (오늘부터 6일 후)

 

VOC 그래프에 넣는 항목

y축 :

1. 확인 전

2. 확인 중

3. 다시 처리해야할 거

4. 최종 완료

x축 : 24시간(현재 시간부터 24시간)

 

그리고 매일 시간대 별로 현황을 시각화 해서 보여준다.

 

먼저 계산이 필요했다. db에 저장되어 있는 것은 공사 시작일과 마감일뿐이기 때문에 주간 예정 공사 수를 위해서 데이터베이스에 저장되어있는 공사 시작일을 계산하여 이용하였다.

또한 voc 그래프에 시간정보가 필요해서 날짜 정보만 저장하는 DateField 에서 시간정보까지 저장하는 DateTimeField 로 변경하였다.

 

[models.py]

created_at = models.DateTimeField(auto_now_add=True)

 

 

---

 

그리고 난 후 그래프를 조금이라도 쉽게 구현하기 위해 highcharts 라는 그래프 API를 도입해보았다.

(api 사용설명이 잘되어 있고, 쓰기 편리한 것을 기준삼았다 ! )

 

html은 아래와 같이 구성하였다.

'construction-status'와 'voc-status' 두 개로 섹션을 분리하였다. 

<script src="https://code.highcharts.com/highcharts.js"></script>

 . . .
 
<div class="center-screen">
            <div class="construction-status">
                <h2>공사 접수 현황</h2>
                <div class="status-box">
                    <div class="status-item">
                        <span class="status-label">신규 접수 공사 수</span>
                        <span class="status-value">{{ registered_constructions }}</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">금일 진행 공사 수</span>
                        <span class="status-value">{{ daily_constructions }}</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">주간 예정 공사 수</span>
                        <span class="status-value">{{ weekly_constructions }}</span>
                    </div>
                </div>
                
                <div id="chart-container"></div>
            </div>
            <div class="voc-status">
                <h2>VOC 현황</h2>
                <div class="status-box">
                    <div class="status-item">
                        <span class="status-label">확인 전</span>
                        <span class="status-value">{{ preparing_vocs }}</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">확인 중</span>
                        <span class="status-value">{{ processing_vocs }}</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">재처리 필요</span>
                        <span class="status-value">{{ reprocessing_vocs }}</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">최종완료</span>
                        <span class="status-value">{{ completed_voc }}</span>
                    </div>
                </div>
                <div id="voc-chart-container"></div>
                . . .

 

 

---

 

그래프 그리기

그리고 서버에서 데이터를 받고 클라이언트에서 그래프를 그리기 위해 javascript 부분에서는 아래와 같이 구현하였다.

먼저 서버에서 전달된 (views) 데이터를 전달받아 javascript 변수로 저장하고, 그래프함수로 전달하였다.

 

 

<script>
        var xData_gongsa = {{ xData_gongsa|safe }};
        var yData_gongsa = {{ yData_gongsa|safe }};
        var xData_voc = {{ xData_voc|safe }};
        var yData_voc = {{ yData_voc|safe }};
        gongsaGraph(xData_gongsa, yData_gongsa);
        vocGraph(xData_voc, yData_voc);
        function gongsaGraph(xData, yData) {
            var emptyData = Array(xData.length - yData.length).fill(0);
            yData = emptyData.concat(yData.reverse());
            xData = xData.reverse();
            Highcharts.chart('chart-container', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Construction Status'
                },
                xAxis: {
                    categories: xData.reverse()
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '진행예정공사수'
                    }
                },
                series: [{
                    name: 'Construction Status',
                    data: yData.reverse()
                }]
            });
        }
        function vocGraph(xData, yData) { 
            var emptyData = Array(xData.length - yData.length).fill(0);
            yData = emptyData.concat(yData.reverse());
            xData = xData.reverse();
        
            Highcharts.chart('voc-chart-container', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'VOC Status' 
                },
                xAxis: {
                    categories: xData.reverse()
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '전체NW장애건수'
                    }
                },
                series: [{
                    name: 'VOC Status', 
                    data: yData.reverse()
                }]
            });
        }

 

 

---

 

서버 데이터 처리 후 템플릿으로 렌더링

그러고 난 후 서버 전송을 위해 아래와 같이 공사 그래프와 voc 그래프를 생성하는 두 개의 함수를 구현하였다.

먼저 공사 그래프의 x축은 일주일의 기간이므로 오늘(매일 날짜라 달라지므로)부터 6일 후까지의 날짜를 리스트에 저장하였다.

그리고 각 날짜에 해당하는 공사의 개수를 구하여 y축 데이터로 저장하였다.

 

voc그래프는 x축이 시간(24시간)이므로 현재 시간을 기준으로(현재의 시간을 기준으로 시간이 흐르도록)24시간 동안의 시간대를 x데이터에 저장한다. 그리고 각 시간대에 해당하는 voc 개수를 y데이터에 저장한다.

 

 

[aici/views]

from datetime import date, timedelta
from django.utils import timezone

@login_required
def main(request):
    xData_gongsa, yData_gongsa = gongsa_graph(request)
    xData_voc, yData_voc = voc_graph(request)
    
    . . .
    
    context = {
    	. . .
        'xData_gongsa': xData_gongsa,
        'yData_gongsa': yData_gongsa,
        'xData_voc': xData_voc,
        'yData_voc': yData_voc,
    }
    
    
@login_required
def gongsa_graph(request):
    today = date.today()
    end_date = today + timedelta(days=6)

    xData = [str(today + timedelta(days=i)) for i in range((end_date - today).days + 1)]

    yData = [Post.objects.filter(start_at=date_val).count() for date_val in xData]

    # Check if today's date is in xData
    if str(today) not in xData:
        xData.append(str(today))
        yData.append(0)

    return xData, yData


@login_required
def voc_graph(request):
    current_datetime = timezone.now()
    start_datetime = current_datetime.replace(minute=0, second=0, microsecond=0) - timezone.timedelta(hours=23)
    end_datetime = current_datetime.replace(minute=0, second=0, microsecond=0) + timezone.timedelta(hours=1)

    xData = []
    yData = []

    for i in range(24):
        hour_start = start_datetime + timezone.timedelta(hours=i)
        hour_end = start_datetime + timezone.timedelta(hours=i+1)

        count = VOC.objects.filter(
            voc_status__in=['발송전', '확인중', '추가조치필요'],
            created_at__gte=hour_start,
            created_at__lt=hour_end
        ).count()
        xData.append(hour_start.strftime("%H"))
        yData.append(count)

    # # 현재 시간
    # xData.append(current_datetime.strftime("%Y-%m-%d %H:%M:%S"))
    # yData.append(VOC.objects.filter(voc_status__in=['발송전', '확인중', '추가조치필요'], created_at__range=(end_datetime, current_datetime)).count())

    return xData, yData