▶ JavaScript Graphics

JavaScript Google Chart

JavaScript Google Charts: 데이터 시각화를 위한 강력한 도구

Google Charts는 웹 페이지에서 데이터 시각화를 쉽게 구현할 수 있도록 도와주는 JavaScript 라이브러리입니다. 다양한 유형의 차트와 그래프를 제공하며, 직관적인 API를 통해 데이터의 시각적 표현을 간편하게 만들 수 있습니다. 이 가이드는 Google Charts의 사용법, 주요 기능 및 예제를 설명합니다.

1. Google Charts 소개

Google Charts는 다양한 차트와 그래프를 생성할 수 있는 강력한 도구로, 사용자가 데이터를 쉽게 이해하고 분석할 수 있도록 돕습니다. 주요 특징은 다음과 같습니다:

다양한 차트 유형: 선 그래프, 막대 그래프, 파이 차트, 히트맵 등 다양한 시각화 도구 제공.
인터랙티브 기능: 툴팁, 범례, 줌, 필터링 등의 인터랙션 지원.
다양한 데이터 형식 지원: JSON, CSV, HTML 테이블 등 다양한 형식의 데이터 입력 가능.

2. Google Charts 사용하기

2.1. Google Charts 라이브러리 포함하기

Google Charts를 사용하기 위해서는 HTML 문서에 Google Charts 라이브러리를 포함해야 합니다. 다음과 같이 <script> 태그를 사용하여 라이브러리를 추가합니다.

<script type="text/javascript" src="<https://www.gstatic.com/charts/loader.js>"></script>

2.2. 기본 차트 만들기

다음은 Google Charts를 사용하여 기본 막대 차트를 만드는 예제입니다.

2.2.1. HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Charts Example</title>
    <script type="text/javascript" src="<https://www.gstatic.com/charts/loader.js>"></script>
</head>
<body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
    <script src="script.js"></script>
</body>
</html>

2.2.2. JavaScript 코드 (script.js)

// Google Charts 로드
google.charts.load('current', {packages: ['corechart', 'bar']});

// 콜백 함수 설정
google.charts.setOnLoadCallback(drawChart);

// 차트 그리기 함수
function drawChart() {
    // 데이터 테이블 생성
    const data = google.visualization.arrayToDataTable([
        ['Element', 'Density', { role: 'style' }],
        ['Copper', 8.94, 'color: copper'], // RGB 색상 사용 가능
        ['Silver', 10.49, 'color: silver'],
        ['Gold', 19.30, 'color: gold'],
        ['Platinum', 21.45, 'color: #e5e4e2']
    ]);

    // 차트 옵션 설정
    const options = {
        title: 'Density of Precious Metals, in g/cm^3',
        width: 900,
        height: 500,
        bar: {groupWidth: '95%'},
        legend: { position: 'none' }
    };

    // 차트 생성 및 렌더링
    const chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

3. 다양한 차트 유형

Google Charts는 다양한 차트 유형을 지원합니다. 몇 가지 예를 살펴보겠습니다.

3.1. 파이 차트

function drawPieChart() {
    const data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
    ]);

    const options = {
        title: 'My Daily Activities'
    };

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

3.2. 선 차트

function drawLineChart() {
    const data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2013',  1000,      400],
        ['2014',  1170,      460],
        ['2015',  660,       1120],
        ['2016',  1030,      540]
    ]);

    const options = {
        title: 'Company Performance',
        curveType: 'function',
        legend: { position: 'bottom' }
    };

    const chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

3.3. 영역 차트

function drawAreaChart() {
    const data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2013',  1000,      400],
        ['2014',  1170,      460],
        ['2015',  660,       1120],
        ['2016',  1030,      540]
    ]);

    const options = {
        title: 'Company Performance',
        isStacked: true
    };

    const chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

4. 인터랙티브 기능

Google Charts는 차트에 다양한 인터랙티브 기능을 제공합니다.

4.1. 툴팁

각 데이터 포인트에 대한 툴팁을 제공하여 사용자가 값을 확인할 수 있게 합니다. 기본적으로 툴팁이 제공되며, 추가적인 정보를 사용자 정의할 수도 있습니다.

4.2. 범례

차트의 범례를 클릭하여 특정 데이터 시리즈를 숨기거나 표시할 수 있습니다. 이를 통해 여러 데이터 세트를 비교할 때 유용합니다.

4.3. 줌 및 패닝

Google Charts는 기본적으로 줌 및 패닝 기능을 제공합니다. 사용자가 차트를 클릭하여 드래그하면 확대 및 축소할 수 있습니다.

5. 전체 예제: Google Charts로 동적 데이터 시각화

아래는 Google Charts를 사용하여 버튼 클릭 시 데이터가 변경되는 전체 예제입니다.

5.1. HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Google Charts Example</title>
    <script type="text/javascript" src="<https://www.gstatic.com/charts/loader.js>"></script>
    <script type="text/javascript">
        google.charts.load('current', { packages: ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);

        let data;

        function drawChart() {
            data = google.visualization.arrayToDataTable([
                ['Task', 'Hours per Day'],
                ['Work', 8],
                ['Eat', 2],
                ['Commute', 2],
                ['Watch TV', 2],
                ['Sleep', 8]
            ]);

            const options = {
                title: 'My Daily Activities'
            };

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

        function updateChart() {
            data.setValue(0, 1, Math.floor(Math.random() * 10)); // Work hours 업데이트
            drawChart(); // 차트 다시 그리기
        }
    </script>
</head>
<body>
    <h1>Dynamic Google Charts</h1>
    <button onclick="updateChart()">Update Chart</button>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

이 예제는 "Update Chart" 버튼을 클릭할 때마다 차트의 데이터를 업데이트하여 시각화하는 방식입니다.

6. 요약

JavaScript Google Charts는 데이터 시각화를 쉽게 구현할 수 있는 강력한 도구입니다. 다양한 유형의 차트와 그래프를 제공하며, 사용자가 데이터를 쉽게 이해하고 분석할 수 있도록 돕습니다.

다양한 차트 유형: 선, 막대, 파이, 영역 차트 등 다양한 시각화 지원.
인터랙티브 기능: 툴팁, 범례, 줌, 패닝 기능 제공.
동적 데이터 업데이트: 버튼 클릭 등으로 데이터를 동적으로 변경 가능.

Google Charts를 활용하여 매력적이고 효율적인 데이터 시각화를 구현할 수 있습니다.

코딩 스쿨 JavaScript