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

Web 프로그램/js, jQuery 2016. 12. 6. 12:39

728x90

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

바로 앞 게시물(http://link2me.tistory.com/1132)과 비교해서 달라진 부분이 어떤 것인지만 비교해보면 된다.

색깔을 표시한 부분을 주의깊게 살펴보면 답은 의외로 간단하다.

<?php
//require_once 'connect.php'; // db접속 성공
//require_once 'phpclass/boardClass.php'; // 게시판 클래스
$line1 ="4,6,2,5"; // DB와 연동한 결과로 문자열을 생성했다고 가정한다.
?>
<!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.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="./plugin/jqplot/jquery.jqplot.css" />
<script type="text/javascript">
$(document).ready(function(){
    var line1 = [<?php echo $line1;?>];
    var line2 = [10, 8, 22, 15, 10];
    var ticks = ['닛산', '포르쉐', 'KIA', '현대', '벤츠'];

    $('#chart1').jqplot([line1,line2], {
        title:'막대그래프 예제',
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer, // 막대 그래프
            rendererOptions: { barWidth: 25 }, // bar의 너비 수동으로 설정
            pointLabels: { show: true, formatString: '%d' } // 레이블 값
        },
        axes:{
            xaxis:{
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks // X축 값
            }
        }
    });
});
</script>

</head>
<body>
<div id="chart1" style="height:300px;width:600px; "></div>
</body>
</html>

다음 기회에 월을 선택하면 일별 막대그래프를 자동으로 그려주는 통계에 대한 PHP코드를 작성해볼 생각이다.

로직은 년월에 대한 값을 DB에서 자동으로 선택해서 selectbox에 표시하고 선택한 년월 정보로 통계그래프가 표시되도록 하면 된다.

- DB에서 년월에 대한 값을 중복없이 뽑아낸다.

- 년월을 선택하면 마지막 일자의 값을 자동으로 추출해서 문자열을 생성한다.

- jQuery change 로 해당 값이 변동되면 그래프를 그리도록 한다.

저작자표시 비영리

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

[jQuery] 실시간 업데이트(real time page update) (0)	2016.12.17
[jQuery] jqplot 를 이용한 막대 그래프 통계 (MySQL DB 실제 연동) (0)	2016.12.07
[jQuery] jqplot 를 이용한 막대 그래프 통계 (4)	2016.12.06
[jQuery] MP3 Player (0)	2016.12.04
[jQuery] PHP 와 자바스크립트(jQuery) 값 전달 이해 (0)	2016.11.29

Link2Me