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>
<!-- http://www.jqplot.com 제공 자바스크립트 include -->
<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 (1) | 2016.12.04 |
| [jQuery] PHP 와 자바스크립트(jQuery) 값 전달 이해 (0) | 2016.11.29 |
Link2Me
