구글차트 그래프 mysql DB 연동에 대해 문의드립니다.
본문
<?php
$con = mysqli_connect('localhost', 'x', 'x');
mysqli_select_db($con, 'x');
$s = "select user_id, pay_tt from lms_pay where pay_tt >0 group by user_id";
$result = mysqli_query($con, $s);
$data_array = array();
while($row = mysqli_fetch_assoc($result)){
$data_array[] = ($row);
}
$chart= json_encode($data_array);
echo $chart;
?>
<script type="text/javascript">
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chart_array= '<?php echo $chart; ?>';
var header = ['user_id','pay_tt'];
var row = "";
var rows = new Array();
jQuery.each(chart_array, function( i, d ) {
// row = [parseInt(d.user_id),parseInt(d.pay_tt)];
row = [parseInt(d.user_id),Number(d.pay_tt)];
// row = [d.user_id,Number(d.pay_tt)];
rows.push(row);
});
var jsonData = [header].concat(rows);
var data = google.visualization.arrayToDataTable(jsonData);
var options = {
'title': '성적추이 현황',
// 'seriesType': 'bars',
'width': 800,
'height': 600
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>성적변화 그래프</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart_div" style="width: 650px; height: 500px;"></div>
</body>
</body>
</html>
참조로 기재된 내용에서 DB 접속정보는 보안상 임의로 지정하였습니다.
json 데이터는 정상적으로 쿼리가 동작을 하여 아래와 같이 데이터가 배열되고 있습니다.
[{"user_id":"a1111a","pay_tt":"3000000"},{"user_id":"aa1234","pay_tt":"500000"},
.................]
자바스크립트에서 row 구분시에 row = [parseInt(d.user_id),parseInt(d.pay_tt)]; 이 부분 때문인것 같은데
그래프 테이블은 나타나게 되지만 아래의 캡쳐화면과 같이 데이터들이 표현되지 않고 있습니다.
그누보드5에서 구글차트를 mysql 연동하여 json array로 처리하여 보신 분들의 조언을 구하고자
이렇게 문의드립니다.
답변 1
json_encode 된거기 때문에 문자열이어선 안될거같고요
chart_array= '<?php echo $chart; ?>';
chart_array= <?php echo $chart; ?>;
대신 데이터가 없을땐
chart_array = [];
이런형식이 되어야해서
php에서 해주시고
script를
#chart_div 아래로요
<div id="chart_div" style="width: 650px; height: 500px;"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chart_array= [{"user_id":0,"pay_tt":10},{"user_id":1,"pay_tt":10},{"user_id":2,"pay_tt":10},{"user_id":3,"pay_tt":5},{"user_id":4,"pay_tt":10},{"user_id":5,"pay_tt":6},{"user_id":6,"pay_tt":5},{"user_id":7,"pay_tt":6},{"user_id":8,"pay_tt":9},{"user_id":9,"pay_tt":10}];
var header = ['user_id','pay_tt'];
var row = "";
var rows = new Array();
jQuery.each(chart_array, function( i, d ) {
// row = [parseInt(d.user_id),parseInt(d.pay_tt)];
row = [parseInt(d.user_id),Number(d.pay_tt)];
// row = [d.user_id,Number(d.pay_tt)];
rows.push(row);
});
var jsonData = [header].concat(rows);
var data = google.visualization.arrayToDataTable(jsonData);
var options = {
'title': '성적추이 현황',
// 'seriesType': 'bars',
'width': 800,
'height': 600
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
답변 감사합니다.
알려주신 대로 수정해 보겠습니다.
답변을 작성하시기 전에 로그인 해주세요.
