PHP 배열로 넘겨주는 함수에 따라서 처리를 다르게 해야 동작된다는 걸 확인하고 코드를 다시 적어둔다.
http://link2me.tistory.com/1134 게시글에서 가져오는 함수에서 넘겨주는 값이
문자열로 넘겨줄 경우와 배열로 넘겨줄 경우 각각 상황에 맞게 구현해야 한다.
<?php
require_once 'connect.php'; // db접속 성공
require_once 'statsClass.php'; // 통계 클래스
$b = new statsClass();
$R = $b->extract_YM();
date_default_timezone_set('Asia/Seoul');
if(isset($_GET['ym'])){
$ym = $_GET['ym'];
} else {
$ym = date("Ym");
}
$ticks = json_encode($b->maxdate_YM($ym));
$line1 = json_encode($b->dailyCnt_value($ym));
$line2 = json_encode($b->userCnt_value($ym));
?>
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex,nofollow"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA Compatible" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!-- http://www.jqplot.com 제공 자바스크립트 include -->
<script type="text/javascript" src="../js/jqplot/jquery.jqplot.js"></script>
<script type="text/javascript" src="../js/jqplot/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="../js/jqplot/plugins/jqplot.pointLabels.js"></script>
<script type="text/javascript" src="../js/plugins/jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="../js/jqplot/jquery.jqplot.css" />
<script type="text/javascript">
$(document).ready(function(){
var plot1;
var obj1 = <?php echo $line1; ?>;
var line1 = $.map(obj1, function(el) { return el });
var obj2 = <?php echo $line2; ?>;
var line2 = $.map(obj2, function(el) { return el });
var ticks = JSON.parse('<?php echo $ticks; ?>');
renderChart(line1,line2,ticks);
$('#selectmonth').on('change',function(){
if(this.value !== ""){
var optVal=$(this).find(":selected").val();
//var pageURL = "<?php echo $_SERVER['PHP_SELF'];?>?ym=" + optVal;
//$(location).attr('href', pageURL);
var year = optVal.substr(0,4); // 년
var month = optVal.substr(4,2); // 월
$.post('stats_db.php',{optVal:optVal},function(msg){
//alert(msg); // 배열 형태로 넘어오는지 확인 목적
var jsonObj = $.parseJSON(msg); // JSON 문자열을 JavaScript object 로 반환
//alert(typeof jsonObj.ticks);
//alert(jsonObj.data1); // string 인지 object 인지 확인 목적
var data1 = $.map(jsonObj.data1, function(el) { return el });
var data2 = $.map(jsonObj.data2, function(el) { return el });
//alert(jsonObj.ticks);
var xAxis = jsonObj.ticks;
updatePlot(data1,data2,xAxis);
});
}
});
});
function renderChart(line1,line2,xAxis){
plot1 = $.jqplot('chartDiv', [line1,line2], CreateBarChartOptions(xAxis));
}
function updatePlot(line1,line2,xAxis){
plot1.destroy();
plot1 = $.jqplot('chartDiv', [line1,line2], CreateBarChartOptions(xAxis));
}
function CreateBarChartOptions(xAxis) {
var optionsObj = {
title: '일자별 접속 통계',
seriesDefaults:{
renderer:$.jqplot.BarRenderer, // 막대 그래프
rendererOptions: { barWidth: 10 }, // bar의 너비 수동으로 설정
pointLabels: { show: true } // 레이블 값
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: xAxis,
tickOptions: {
formatString: '%d' // 정수형으로 표시
}
//label:'일자'
},
yaxis:{
//renderer:$.jqplot.DateAxisRenderer,
min:0,
//max:80
}
},
highlighter: { show: false }
};
return optionsObj;
}
</script>
</head>
<body>
<div id="chartDiv" style="height:400px;width:1500px; "></div>
<div style="height:300px;width:1490px;margin-top:10px;text-align:right;">
<select name="month" id="selectmonth">
<option value="">년월 선택</option>
<?php
while ($row = mysql_fetch_array($R)){
echo "<option value='".$row[0]."' ";
if($row[0] === $ym) echo "selected='selected'";
echo ">".$row[0]."</option>\n";
}
?>
</select>
</div>
</body>
</html>
=== stats_db.php ===
<?php
if(isset($_POST['optVal'])){
require_once 'connect.php'; // db접속 성공
require_once 'statsClass.php'; // 통계 클래스
$b = new statsClass;
$ym = $_POST['optVal'];
$data1 = $b->dailyCnt_value($ym); // 배열로 받은 결과
$data2 = $b->userCnt_value($ym); // 배열로 받은 결과
$ticks = $b->maxdate_YM($ym); // 배열로 받은 결과
$R = array('data1'=>$data1,'data2'=>$data2, 'ticks'=>$ticks);
echo json_encode($R);
}
?>
'Web 프로그램 > js, jQuery' 카테고리의 다른 글
| [jQuery] dynamic input box 추가 using jQuery (0) | 2017.01.07 |
|---|---|
| [Javascript] window open 및 div popup 처리 방법 (0) | 2017.01.04 |
| [jQuery] Converting JSON Object into Javascript array (0) | 2016.12.31 |
| [jQuery] How to enable or disable my Internet browser's Autocomplete (1) | 2016.12.31 |
| [jQuery] 자기자신 파일 갱신 처리할 때 (0) | 2016.12.31 |
Link2Me