[jQuery] jqplot 를 이용한 막대 그래프 통계 (MySQL DB 실제 연동)

Web 프로그램/js, jQuery 2016. 12. 7. 22:48

728x90

MySQL DB와의 연동하여 통계 그래프를 작성하는 샘플이다.

100% PHP 코드함수까지 오픈하지 않는다. 하지만 핵심적으로 알아야 할 내용은 모두 작성했다.

var line1 = [<?php echo $data;?>]; PHP 문자열을 이렇게 대입해주면 자바스크립트에서 배열 변수로 인식하기 때문에 ajax response 메시지 값도 [jsonObj.data] 로 해주면 되는줄 알고 alert 창으로 확인하면서 시간낭비를 많이 했다. alert 창 메시지를 육안으로 확인하면 PHP 변수를 배열화한 것과 다를바가 없었다. typeof 를 찍어보고 나서 문제가 뭔지 찾아내고 바로 해결했다. 기초가 약해서 발생한 문제였다.

<?php
require_once 'connect.php'; // db접속 성공
require_once 'phpclass/statsClass.php'; // 통계 클래스
$b = new statsClass;
$R = $b->extract_YM(); // DB에서 년월 추출

$ym = date("Ym"); // 현재 년월

$ticks = $b->maxday_YM($ym); // X축 좌표 값
$data = $b->dailyCnt_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" control="IE=edge,chrome=1" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script type="text/javascript" src="./plugin/jqplot/jquery.jqplot.js"></script>
<script type="text/javascript" src="./plugin/jqplot/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="./plugin/jqplot/plugins/jqplot.pointLabels.js"></script>
<script type="text/javascript" src="./plugin/jqplot/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script type="text/javascript" src="./plugin/jqplot/plugins/jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="./plugin/jqplot/jquery.jqplot.css" />
<script type="text/javascript">
$(document).ready(function(){
    var plot1;
    var line1 = [<?php echo $data;?>];
    //var line2 = [10, 8, 22, 15, 10]; // 막대그래프를 2개 그리고자 할 경우
    var xAxis = [<?php echo $ticks;?>];

    renderChart(line1,xAxis);

    $('#selectmonth').on('change',function(){
        if(this.value !== ""){
            var optVal=$(this).find(":selected").val();
            //var year = optVal.substr(0,4); // 년
            //var month = optVal.substr(4,2); // 월
            $.post('ajaxdb.php',{optVal:optVal},function(msg){
                //alert(msg); // 배열 형태로 넘어오는지 확인 목적
                var jsonObj = $.parseJSON(msg); // JSON 문자열을 JavaScript object 로 반환
                //alert(typeof jsonObj.data); // string
                data = jsonObj.data.split(','); // 문자열을 배열로 변환
                xAxis = jsonObj.ticks.split(',');
                //alert(typeof data);
                updatePlot(data,xAxis);
            });
        }
    });

});

function renderChart(data,xAxis){
    plot1 = $.jqplot('chartDiv', [data], CreateBarChartOptions(xAxis));
}

function updatePlot(data,xAxis){
    plot1.destroy();
    plot1 = $.jqplot('chartDiv', [data], CreateBarChartOptions(xAxis));
}

function CreateBarChartOptions(xAxis) {
    var optionsObj = {
        title: '일자별 접속 통계',
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer, // 막대 그래프
            rendererOptions: { barWidth: 15 }, // bar의 너비 수동으로 설정
            pointLabels: { show: true } // 레이블 값
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: xAxis,
                tickOptions: {
                    formatString: '%d' // 정수형으로 표시
                }
                //label:'일자'
            }
        },
        highlighter: { show: false }
    };
    return optionsObj;
}

</script>

</head>
<body>
<div id="chartDiv" style="height:300px;width:900px;"></div>
<div style="height:300px;width:890px;margin-top:10px;text-align:right;">
<select name="month" id="selectmonth">
<option value="">년월 선택</option>
<?php
    while ($row = mysqli_fetch_array($R)){
        echo "<option value='".$row[0]."' ";
        echo ">".$row[0]."</option>\n";
    }
?>
</select>
</div>
</body>
</html>

==== ajaxdb.php ====

<?php
if(isset($_POST['optVal'])){
    require_once 'connect.php'; // db접속 성공
    require_once 'phpclass/statsClass.php'; // 통계 클래스
    $b = new statsClass;
    $ym = $_POST['optVal'];
    $data = $b->dailyCnt_value($ym); // 문자열로 받음
    $ticks = $b->maxday_YM($ym); // 문자열로 받음
    $R = array('data'=>$data, 'ticks'=>$ticks); // X축 좌표값과 일별 통계 값을 DB에서 추출하여 배열화 처리
    echo json_encode($R);
}
?>

alert(typeof jsonObj.data); 으로 type 을 확인해서 object 인지 string 인지 확인하여 상황에 맞게 변환해서 사용하는케 키포인트다.

json_encode 를 사용하면 배열로 결과를 반환하는 걸 자유자재로 할 수 있다.

어떻게 하는지는 바로 위의 코드를 보면 알 수 있으므로 이걸 본 방문객은 쉽게 해결이 가능하리라 본다.

구글 검색과 jqplot 검색을 하면 그래프 그려주는 js 파일 구조에 대해 파악이 될 것이다.

728x90

저작자표시 비영리

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

[jQuery] form문에서 submit 시 window.open 으로 action 처리 하기 (0)	2016.12.18
[jQuery] 실시간 업데이트(real time page update) (0)	2016.12.17
[jQuery] jqplot 를 이용한 막대 그래프 통계 (MySQL DB 연동개념) (0)	2016.12.06
[jQuery] jqplot 를 이용한 막대 그래프 통계 (4)	2016.12.06
[jQuery] MP3 Player (0)	2016.12.04

Link2Me