구글차트 그래프 mysql DB 연동에 대해 문의드립니다.
Copy
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chart_array= '';
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);
}
성적변화 그래프
참조로 기재된 내용에서 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개
4년 전
json_encode 된거기 때문에 문자열이어선 안될거같고요
chart_array= '<?php echo $chart; ?>';
chart_array= <?php echo $chart; ?>;
대신 데이터가 없을땐
chart_array = [];
이런형식이 되어야해서
php에서 해주시고
script를
#chart_div 아래로요
Copy
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);
}
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
4년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
알려주신 대로 수정해 보겠습니다.