차트(그래프) 관련 문의~
본문
관리자 메인페이지에 기기별 접속자 집계를 차트(그래프)로 표현하려고 합니다.
고수님들의 tip과 예제 들을 참고하여 http://www.chartjs.org/ 를 사용해서 차트를 출력하는 부분까지는 잘 되었는데요.
1.
아래 그림과 같이 tooltip 에 pc : 6 / mobile : 6 이렇게 집계가 되고 있습니다.
실제로는 mobile : 6 이렇게 되고 합계가 6.0이 되어야 하는데 12.0으로 출력이 되고있습니다.
사용된 소스는 아래와 같습니다.
<!-- # adm_device -->
<script src="<?php echo G5_ADMIN_URL ?>/adm_include/main_access_device/js/doughnutChart.js"></script>
<?php
/*$sub_menu = "200800";
include_once('./_common.php');
auth_check_menu($auth, $sub_menu, 'r');*/
$fr_date = isset($_REQUEST['fr_date']) ? preg_replace('/[^0-9 :\-]/i', '', $_REQUEST['fr_date']) : G5_TIME_YMD;
$to_date = isset($_REQUEST['to_date']) ? preg_replace('/[^0-9 :\-]/i', '', $_REQUEST['to_date']) : G5_TIME_YMD;
/*$g5['title'] = '기기별 접속자집계';
include_once('./visit.sub.php');
$colspan = 5;*/
$max = 0;
$sum_count = 0;
$arr = array();
$sql = " select * from {$g5['visit_table']}
where vi_date between '$fr_date' and '$to_date' ";
$result = sql_query($sql);
while ($row=sql_fetch_array($result)) {
$s = $row['vi_device'];
if(!$s)
$s = '기타';
if( isset($arr[$s]) ){
$arr[$s]++;
} else {
$arr[$s] = 1;
}
if ($arr[$s] > $max) $max = $arr[$s];
$sum_count++;
}
?>
<script>
$(function(){
$("#doughnutChart_device").drawDoughnutChart([
{ title:"PC", value:<?php echo $count ?>, color:"#03a9f5" },
{ title:"모바일", value:<?php echo $count ?>, color:"#616c77" },
]);
});
</script>
<div id="main_access_device" <?php echo $sum_count ?>>
<h3>접속 플랫폼 (모바일,PC)<a href="<?php echo G5_ADMIN_URL ?>/visit_device.php"></a></h3>
<div id="doughnutChart_device" class="chart_device">
<ul>
<?php
$i = 0;
$k = 0;
$save_count = -1;
$tot_count = 0;
if (count($arr)) {
arsort($arr);
foreach ($arr as $key=>$value) {
$count = $arr[$key];
if ($save_count != $count) {
$i++;
$no = $i;
$save_count = $count;
} else {
$no = '';
}
if (!$key) {
$key = 'pc';
} else {
$key = 'mobile';
}
$rate = ($count / $sum_count * 100);
$s_rate = number_format($rate, 1);
//$bg = 'bg'.($i%2);
?>
<li class="<?php echo $key; ?>"><?php echo $key; ?> : <?php echo $count ?></li>
<?php
}
}
?>
</ul>
</div>
</div>
<!-- # adm_device -->
2. 툴팁의 타이틀 부분이 내용부분에 출력이 되게하려면 어떻게 수정하면 되는지요?
<script>
$(function(){
$("#doughnutChart_device").drawDoughnutChart([
{ title:"PC", value:<?php echo $count ?>, color:"#03a9f5" },
{ title:"모바일", value:<?php echo $count ?>, color:"#616c77" },
]);
});
</script>
위의 title:"모바일" -> <li class="<?php echo $key; ?>">모바일 : <?php echo $count ?></li>
이러한 형식으로 출력을 하려고 합니다. 또한 li clss부분에 pc, mobile의 css를 출력해야 되는데 아무리 해봐도 되지 않아서 $key 값으로 대체하여 색상을 구현한것입니다. 혹시 이부분도 알려주실수 있을까요?
3. 마지막으로 현재날짜 기준으로 이전 3일간 또는 7일간의 집계를 출력하려고 하는데 이리저리 찾아보고 했는데 원하는 해답을 찾지 못하고 있습니다.
초보자이다 보니 어려운 부분이 많네요..
고수님들의 소중한 의견과 도움 부탁드리겠습니다.
!-->!-->답변 2
$sql = " select * from {$g5['visit_table']}
where vi_date between '$fr_date' and '$to_date' ";
결과에
PC, 모바일 둘 다 나오는지 확인해 보세요.
$count 변수가
PC, 모바일 어느 쪽인지
불분명하네요
원하는 방식의 형식은 아니지만 책과 여러 팁들을 찾아보고 일정 부분은 해결을 했습니다.
아래의 형식으로 수정을 하니까 잘 적용되었습니다.
<script>
$(function(){
$("#doughnutChart_device").drawDoughnutChart([
<?php
$i = 0;
$k = 0;
$save_count = -1;
$tot_count = 0;
if (count($arr)) {
arsort($arr);
foreach ($arr as $key=>$value) {
$count = $arr[$key];
if ($save_count != $count) {
$i++;
$no = $i;
$save_count = $count;
} else {
$no = '';
}
if (!$key) {
$key = '기타';
}
$rate = ($count / $sum_count * 100);
$s_rate = number_format($rate, 1);
?>
{ title:"<?php echo $key; ?>", value:<?php echo $count ?>, color:"#03a9f5" },
<?php
}
}
?>
]);
});
</script>
!-->