SIR
목록으로

구글차트 그래프 mysql DB 연동에 대해 문의드립니다.

JuncTionSetGrUm
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전 조회 8,550
답변 1
목록

Copy 
<?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)]; 이 부분 때문인것 같은데

그래프 테이블은 나타나게 되지만 아래의 캡쳐화면과 같이 데이터들이 표현되지 않고 있습니다.

990507233_1613727161.3093.png

그누보드5에서 구글차트를 mysql 연동하여 json array로 처리하여 보신 분들의 조언을 구하고자

이렇게 문의드립니다.

 

 

 

#그누보드5 #php #mysql #google #차트

답변 1개

json_encode 된거기 때문에 문자열이어선 안될거같고요

chart_array= '<?php echo $chart; ?>';

chart_array= <?php echo $chart; ?>;

대신 데이터가 없을땐 

chart_array = [];

이런형식이 되어야해서

php에서 해주시고

script를

#chart_div 아래로요

 

Copy 
<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>
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

답변 감사합니다.
알려주신 대로 수정해 보겠습니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고