차트(그래프) 관련 문의~
본문
관리자 메인페이지에 기기별 접속자 집계를 차트(그래프)로 표현하려고 합니다.
고수님들의 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, 모바일 어느 쪽인지
불분명하네요
안녕하세요~ 엑스엠엘님
우선 답변주셔서 감사합니다.
adm/visit_device.php 의 코드를 바탕으로 적용한 것입니다.
visit_device.php 원본 소스대로 하면 출력은 정상 출력됩니다.
말씀하신대로 결과값은 pc, 모바일 값은 둘다 출력이됩니다
그리고$count 변수는 pc,모바일에 적용되는것 이며, 즉 pc로 접속시에는 pc로만 집계가 되야하는데
모바일쪽으로 동시출력이 되는것 같습니다. 실제로는 모바일로 접속이 안될때 pc만 출력이 되야하는데 말이죠.
상단의 스크립트가 문제인것 같은데. 어떻게 수정을 해야 하면 될까요?
혹시 <?php 안에 스크립트 코드를 넣어야 하는건가요? 그렇다면 어떻게 코드를 넣으면 되는지요?
원하는 방식의 형식은 아니지만 책과 여러 팁들을 찾아보고 일정 부분은 해결을 했습니다.
아래의 형식으로 수정을 하니까 잘 적용되었습니다.
<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>
