구글차트

■ 구글 차트

https://developers.google.com/chart?hl=ko 

Charts  |  Google Developers

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

 

테스트를 위한 테스트 데이터를 셋팅

 /* 테스트 데이터 생성 */
    $items = [];
    $items[0] = array("ITEM_NAME" => "냉장고", "SALES_COUNT" => 67, "SALES_PRICE" => 67000000);
    $items[1] = array("ITEM_NAME" => "TV", "SALES_COUNT" => 37, "SALES_PRICE" => 14000000);
    $items[2] = array("ITEM_NAME" => "노트북", "SALES_COUNT" => 67, "SALES_PRICE" => 9500000);
    $items[3] = array("ITEM_NAME" => "에어프라이어", "SALES_COUNT" => 32, "SALES_PRICE" => 9000000);
    $items[4] = array("ITEM_NAME" => "선풍기", "SALES_COUNT" => 300, "SALES_PRICE" => 5000000);
    $items[5] = array("ITEM_NAME" => "에어컨", "SALES_COUNT" => 42, "SALES_PRICE" => 42000000);
    $items[6] = array("ITEM_NAME" => "건조기", "SALES_COUNT" => 96, "SALES_PRICE" => 32000000);

가장 먼저 차트를 불러올 div 태그

 <div style="width:90%;margin:0 auto;">
    <div style="width:45%;display:inline-block">
        <div id="chart1"></div>
    </div>
    <div style="width:45%;display:inline-block">
        <div id="chart2"></div>
    </div>
</div>

원형 차트를 그려주는 자바 스크립트 함수

/* 원형차트 그려주는 함수 */
    function drawChartCircle() {

        // 실제 데이터 셋팅하기
        var data = new google.visualization.DataTable();

        // 차트의 컬럼(헤더) 추가하기 (addColumn(데이터 타입, 데이터))
        data.addColumn('string', '상품명');
        data.addColumn('number', '판매대수');


        // 차트의 데이터 추가하기(상품명, 판매대수)
        chart_data = [];
        items.forEach(function(el){
            chart_data.push([el.ITEM_NAME, el.SALES_COUNT])
        })

        data.addRows(chart_data);

        // 옵션 설정(차트 제목, 크기)
        var options = {'title':'상품별 판매대수',
                        'width':600,
                        'height':450};

        // 차트 그리기
        var chart = new google.visualization.PieChart(document.getElementById('chart1'));
        chart.draw(data, options);
    }

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

// google chart API가 로드된 후 실제 차트를 그려주는 함수 호출
google.charts.setOnLoadCallback(drawChartCircle);