프로젝트 개발하기 #6 - 구글차트 연동

개발순서

장르별 차트 구현하기

1. DB에 저장된 genre list 만들기
2. 구글차트에 연동하기

개발해보기

1) DB에 저장된 genre list 만들기

• 데이터를 가공하기 위해 aggregate 사용

• DB에 저장된 장르들의 개수를 카운트 하기 위해 $sum 사용

• 카운트가 많이 된 상위 5개 장르만 뽑아내기 위해 $sort, $limit 사용

@app.route('/genre', methods=['GET'])
def count_genre():
    genre = list(db.reviews.aggregate([
    	# 장르별로 카운트 하기
        {'$group':{'_id':'$genre', 'count':{'$sum':1}}},
        
        # 빈도순대로 배열하기
        {'$sort': {'count': -1}},
        
        # 상위 5개 장르만 가져오기
        {'$limit':5}
    ]))

    # 결과확인
    data = {'Movie' : 'Movie Genre', genre[0]['_id'] : genre[0]['count'], genre[1]['_id'] : genre[1]['count'], genre[2]['_id'] : genre[2]['count'], genre[3]['_id'] : genre[3]['count'], genre[4]['_id'] : genre[4]['count'] }
    print(data)

    # genre list를 키값으로 전달하기 
    return jsonify({'result': 'success', 'genre': genre})

데이터 가공한 genre API 형태

2) 구글차트에 연동하기

• 사용할 구글차트 찾아보기 (donutchart 사용)

https://developers.google.com/chart/interactive/docs/gallery/piechart#donut

• 받아온 API의 'genre' 키 값 삽입하여 데이터 - 차트 연동하기

function drawChart() {
    $.ajax({
        type: "GET",
        url: "/genre",
        data: {},
        success: function (response) {
            if (response["result"] == "success") {
                let genre = response['genre'];
                var data = google.visualization.arrayToDataTable([
                    ['Movie', 'Movie Genre'],
                    [genre[0]._id, genre[0].count],
                    [genre[1]._id, genre[1].count],
                    [genre[2]._id, genre[2].count],
                    [genre[3]._id, genre[3].count],
                    [genre[4]._id, genre[4].count]
                ]);

                var options = {
                    title: '나의 영화 취향',
                    pieHole: 0.4,
                };

                var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
                chart.draw(data, options);
            }
        }
    })
}


function getChart() {
    google.charts.load("current", {packages: ["corechart"]});
    google.charts.setOnLoadCallback(drawChart);

}

완성된 차트 결과