그래프 생성을 위해 Google Charts를 사용합니다.
☞ Google Charts 란?
Google Charts는 구글이 제공하는 그래프 작성 서비스로, JavaScript를 사용해 그래프를 작성 및 표시할 수 있습니다.
● Google Charts
https://developers.google.com/chart/
● Google Charts 이용 규약
https://developers.google.com/chart/terms?h1=ko
Google Charts 그래프의 종류는 AreaChart, Bubble Chart 등 여러가지가 있습니다. 먼저 그래프 데이터, 옵션, 차트 유형으 세 개를 받아 그래프를 그리는 JavaScript 함수와 해당 그래프를 그리는 <div> 태그를 반환하는 사용자 정의 함수 makeChart Parts()를 작성합니다.
● makeChartParts() 함수 (make_chart_parts.php)
<?php
// 그래프를 그리는 JS 함수와 그래프를 표시하는 <div> 태그를 생성하는 사용자 정의 함수을 만듭니다.
function makeChartParts($data, $options, $type)
{
static $index = 1;
$package = 'corechart';
$special_type = array('GeoChart', 'AnnotatedTimeLine','TreeMap', 'OrgChart',
'Gauge', 'Table', 'TimeLine', 'GeoMap', 'MotionChart');
if (in_array($type, $special_type)) {
$package = strtolower($type);
}
$load = 'google.load("visualization", "1", {packages:["' . $package . '"]});';
$jsData = json_encode($data);
$jsonOptions = json_encode($options);
// 그래프를 그리는 JS 함수를 생성합니다.
$chart = <<<CHART_FUNC
{$load}
google.setOnLoadCallback(drawChart{$index});
function drawChart{$index}() {
var data = {$jsData};
var chartData = new google.visualization.arrayToDataTable(data);
var options = {$jsonOptions};
var chartDiv = document.getElementById('chart{$index}');
var chart = new google.visualization.{$type}(chartDiv);
chart.draw(chartData, options);
}\n
CHART_FUNC;
// 그래프를 표시하는 <div> 태그를 생성합니다.
$div = '<div id="chart' . $index . '"></div>';
$index++;
return array($chart, $div);
}
?>
우선 Google Charts의 다양한 API를 로드하기 위한 Google Loader를 HTML의 <head>태그에 삽입합니다.
<script src="https://www.google.com/jsapi"></script>
그래프 데이터는 2차원 배열로 하고 1차원의 첫 번째 요소에 제목을 배열로 지정합니다. 그리고 두 번째 이후의 요소에 그래프 데이터를 배열로 설정하는데, 이때 그래프 옵션은 연관 배열로 지정합니다. 한국어가 있는 경우 그래프 데이터나 옵션의 문자 인코딩을 UTF-8로 지정합니다. makeChartParts() 함수는 두 가지 요소의 배열을 반환하기 때문에 list()에서 변수에 대입합니다.
● 그래프 생성하기 (create_chart.php)
<?php
// 다른 파일의 사용자 정의 함수 「makeChartParts( )」를 불러옵니다.
require_once './make_chart_parts.php';
// 그래프의 값
$data = array();
$data[] = array('', '가격'); // 제목
$data[] = array('짜장 라면', 590);
$data[] = array('매운 라면', 750);
$data[] = array('보통 라면', 630);
// 그래프의 옵션
$options = array(
'title' => '그래프를 생성하고 싶을 때', // 그래프 제목
'titleTextStyle' => array('fontSize' => 16), // 제목의 스타일
'hAxis' => array('title' => '좋아하는 라면', // 가로 축 라벨
'titleTextStyle' => array('color' => 'blue')), // 스타일
'vAxis' => array('minValue' => 0, 'maxValue' => 800, // 세로축 범위
'title' => '단위: 원'), // 세로축 라벨
'width' => 500, // 폭
'height' => 400, // 높이
'bar' => array('groupWidth' => '50%'), // 바의 굵기
'legend' => array('position' => 'top', 'alignment' => 'end')); // 범례
// 그래프 종류
$type = 'ColumnChart';
// 그래프 그림의 JavaScript의 함수, 표시할 <div>태그의 생성
list($chart, $div) = makeChartParts($data, $options, $type);
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>그래프를 생성하고 싶을 때</title>
<script src="https://www.google.com/jsapi"></script>
<script>
<?php
// 그래프 그림을 위한 JavaScript의 함수를 표시합니다.
echo $chart;
?>
</script>
</head>
<body>
<div>
<?php
// 그래프를 표시할 <div> 태그를 적절한 장소에 배치합니다.
echo $div;
?>
</div>
</body>
</html>
