반응형
구글api(google charts api)를 이용, 통계데이터를 나타낼 건데
먼저 google charts api사이트에 방문해서 어떤 소스인지 살펴봐야한다.
위의 소스를 그대로 갖고오되 데이터값을 조금 바꿔보았다.
<html>
<head>
<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);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['name', 'score'],
['철수', 100],
['영희', 90],
['동수', 80],
['민지', 70],
['길동', 60],
]);
var options = {
title: '내 친구들의 성적'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
여기서 제일 중요한 부분은 3가지이다.
1) 구글api 구현을 위한 기본소스를 불러와야하고
2) 실제 데이터에 들어가는 것을 넣어줘야하고
3) 마지막으로 piechart라는 오브젝트가 구현될 장소를 만들어주는 것이다.
위의 결과화면은 다음과 같다.
이제 조금씩 php를 이용해서 응용해야겠다.
10월 7일에 올린 [mysql] sub query를 이용해서 통계 만들기 게시물을 참고하서 만든 데이터를 php로 뽑아보면 다음과 같다.
이 데이터를 원그래프에 넣어야한다. 그리고 중간의 글자가 cnt와 hit인 항목을 분류시켜 2개의 원그래프로 만들었다.
소스는 다음과 같다.
<?
$qry = "
SELECT
total_hit, total_cnt,
ecopol_hit/total_hit*100 ecopol_hit_per, ecopol_cnt/total_cnt*100 ecopol_cnt_per,
mystery_hit/total_hit*100 mystery_hit_per, mystery_cnt/total_cnt*100 mystery_cnt_per,
story_hit/total_hit*100 story_hit_per, story_cnt/total_cnt*100 story_cnt_per
FROM
(
SELECT
SUM(sum_hit) total_hit,
SUM(cnt) total_cnt,
SUM(case when bo_table = 'ecopol' then sum_hit ELSE 0 END) ecopol_hit,
SUM(case when bo_table = 'ecopol' then cnt ELSE 0 END) ecopol_cnt,
SUM(case when bo_table = 'mystery' then sum_hit ELSE 0 END) mystery_hit,
SUM(case when bo_table = 'mystery' then cnt ELSE 0 END) mystery_cnt,
SUM(case when bo_table = 'story' then sum_hit ELSE 0 END) story_hit,
SUM(case when bo_table = 'story' then cnt ELSE 0 END) story_cnt
FROM
(
SELECT bo_table, SUM(wr_hit) sum_hit, COUNT(0) AS cnt FROM g5_board_new
WHERE
bo_table IN ('ecopol', 'mystery', 'story')
AND
bn_datetime > '".date("Y-01-01", time())."'
GROUP BY
bo_table
) A
) AA
";
$res = sql_fetch($qry);
$arr = array(
"경제"=>"ecopol",
"미스테리"=>"mystery",
"괴담"=>"story",
);
?>
<html>
<head>
<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);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['이름', '비율'],
<?foreach($arr as $ak=>$av) {?>
['<?=$ak?>', <?=$res[$av."_hit_per"]?>],
<?}?>
]);
var options = {
title: 'mrlee.co.kr의 게시글 조회수 비율'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
var data = google.visualization.arrayToDataTable([
['이름', '비율'],
<?foreach($arr as $ak=>$av) {?>
['<?=$ak?>', <?=$res[$av."_cnt_per"]?>],
<?}?>
]);
var options = {
title: 'mrlee.co.kr의 게시글 개수 비율'
};
var chart2 = new google.visualization.PieChart(document.getElementById('piechart2'));
chart2.draw(data, options);
}
</script>
</head>
<body>
<span id="piechart" style="width: 500px; height: 500px;"></span>
<span id="piechart2" style="width: 500px; height: 500px;"></span>
</body>
</html>
여기서 주목해야할 부분은 2가지다.
먼저 $arr가 왜 선언했는지 봐야한다. 이걸 통해서 각 항목을 일일히 불러올 수고를 덜어줄 수 있다.
바로 데이터를 지정할 때에 foreach를 써서 키값과 벨류값을 불러오기때문이다.
결과값은 다음과 같다.
반응형
'PHP' 카테고리의 다른 글
| iframe의 컨텐츠를 확대 축소하기 (transform:scale) (0) | 2023.05.08 |
|---|---|
| iframe에서 단축url이 안먹힐 때 해결방법 (단축url full url로 복구시키기) (0) | 2023.05.08 |
| [mysql] sub query를 이용해서 통계 만들기 (0) | 2021.10.07 |
| php에서 form-get방식으로 특수문자열을 전달할 때 쓰이는 함수 : urlencode (0) | 2021.09.13 |
| htaccess, RewriteRule을 이용해서 주소문자열 줄여보자 (0) | 2021.09.07 |