[코딩의 목적]
1. 달력에서 날짜를 선택해서, 조회구간을 입력한다.
2. 입력된 조회구간에 해당하는 미세먼지 측정data를 배열에 저장한다
3. 배열에 저장된 data를 json data로 변환한다
4. 변환된 data를 $jsonTable에 지정한다.
5. $jsonTable 의 data를 구글chart로 보내서 그래프를 그린다
[코딩 소스/저장위치]
1. 달력에서 날짜를 선택해서, 조회구간을 입력한다.
- 저장위치 : word press "Page" (myscript)
- 작업내용 1
. 달력에서 날짜를 선택하고, 선택한 날짜를 php "data-to-graph(php shot code)" 로 보낸다
- 코딩 소스
----------------------------------------------------------------------------------------------------------------------------------------------
<form action="" method="post"><input id="datepicker3" name="datepicker3" type="text" /> ~ <input id="datepicker4" name="datepicker4" type="text" />
<input type="submit" value="조회하기" /></form>
[xyz-ips snippet="data-to-grahp"]
----------------------------------------------------------------------------------------------------------------------------------------------
2.선택된 날짜구간의 data(측정data)를 배열에 저장하고 , data를 json data 형태로 변환한다.
3.변환된 data를 $jsonTable에 지정한다.
- 코딩소스 (shot code 내용 : [xyz-ips snippet="data-to-grahp"] )
----------------------------------------------------------------------------------------------------------------------------------------------
$id=$_POST['datepicker3'];
$id2=$_POST['datepicker4'];
$conn=mysqli_connect("localhost","aaaaa",aaaaaa,"aaaaaaa", "22222");
$sql="
select * from (
SELECT dt_create, pm010, pm025, pm100
FROM `finedust`
order by dt_create desc
limit 100000
)t_a
order by t_a.dt_create";
$result = mysqli_query($conn,$sql) ;
/* DB(DUST)의 TABLE(finedust)에 접속하여 측정결과를 읽어 배열에 저장함 */
$rows=array();
$flag=true;
$table=array();
$table['cols']=array(
// array('lable'=>'id' , 'type'=>'number'),
array('lable'=>'dt_create','type'=>'string'),
array('pm010'=>'pm010','type'=>'number'),
array('pm025'=>'pm025','type'=>'number'),
array('pm0100'=>'pm100','type'=>'number')
);
$rows=array();
$date0 = new DateTime($id);
$date2 = new DateTime($id2);
while($r=mysqli_fetch_assoc($result)){
$date1 = new DateTime($r['dt_create']);
if ($date1>$date0 && $date1<$date2) {
$temp=array();
//$temp[]=array('v'=>(int) $r['id']);
$temp[]=array('v'=>(string) $r['dt_create']);
$temp[]=array('v'=>(int) $r['pm010']);
$temp[]=array('v'=>(int) $r['pm025']);
$temp[]=array('v'=>(int) $r['pm100']);
$rows[]=array('c'=>$temp);
echo($r['dt_create']."__[PM1.0: ".$r['pm010']."]__[PM2.5: ".$r['pm025']."]__[PM10: ".$r['pm100']."]<br>");
}
}
$table['rows']=$rows;
/* 배열에 저장된 data를 그래프용 코드(json)로 변환 */
$jsonTable=json_encode($table);
------------------------------------------------------------------------------------------------------------------------------------------
datepicker.js 코드 ==> 저장위치 (p-content/themes/twentysixteen/js/datepicker.js )
jQuery( document ).ready(function( $ ) {
jQuery( "#datepicker1,#datepicker2" ).datepicker({
dateFormat: 'yy-mm-dd'
});
});
jQuery( document ).ready(function( $ ) {
jQuery( "#datepicker3,#datepicker4" ).datepicker({
dateFormat: 'yy-mm-dd',
prevText: '이전 달',
nextText: '다음 달',
monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
dayNames: ['일','월','화','수','목','금','토'],
dayNamesShort: ['일','월','화','수','목','금','토'],
dayNamesMin: ['일','월','화','수','목','금','토'],
showMonthAfterYear: true,
changeMonth: true,
changeYear: true,
yearSuffix: '년'
});
});
------------------------------------------------------------------------------------------------------------------------------------------
4 $jsonTable 의 data를 구글chart로 보내서 그래프를 그린다
- 자바스크립트 호출 ( word press page 에 저장)
echo("<script>location.replace('/wp-content/themes/twentysixteen/js/googlechart.js');</script>");
drawChart(jsonTable);
- 호출된 스크립트 안의 함수(drawchart 함수)
googlechart.js 화일 ==> 저장위치( cafe24 서버) www/wp-content/themes/twentysixteen/js/googlechart.js
------------------------------------------------------------------------------------------------------------------------------------------
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js "></script>
<script type="text/javascript">
google.charts.load('43', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(jsonTable) {
var data = new google.visualization.DataTable(< jsonTable);
var options = {
title: 'Dust measuring',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
----------------------------------------------------------------------------------------------
3. 질문사항
-------------------------------------------------------------------------------------------------------------
1. 상기 3번항에서 만든 $jsonTable을 4번항의 차트에 전달을 해서, 그래를 그려야 합니다
- 예전에 워드프레스가 아닌, index.php에 모든 코드를 넣고 작성했을땐,때는 별 문제없이 잘 작동을 했는데,
word press에서는 자바스크립트, php code , page code등이 서로 분리가 되어있어서, 서로간에 data를 주고받는 과정이
원활치가 않습니다.
2. 현재상태
- 상기 코드로 실행하면, 자바 스크립트가 실행이 되지 않고, 코드를 화면에 뿌려주기만 하는 상태입니다.
3. 어떤 방법으로 $jsonTable 데이터를 googlechart.js 안의 함수로 전달, 함수실행을 하는것이 좋은지 문의드립니다.
