php sql데이터 가져오기 도와주세요 채택완료

</p>

<p><?php 

include_once('../common.php'); </p>

<p>$g5['title'] = "테스트 차트"; </p>

<p>include_once('../_head.php'); 

?>

<?php

    $conn = mysqli_connect('localhost','root','12345','myproject'); 

    

    mysqli_query($conn,'set names utf8'); //한글 깨짐 방지 코드 </p>

<p>    $sql = "SELECT TIMES,WEIGHTS FROM DATA WHERE DATES= '2019-04-01' ORDER BY TIMES DESC";

    $result = mysqli_query($conn,$sql);</p>

<p>?></p>

<p><!-- 추가할 내용 부분 /Start--></p>

<p><div> 

    <p>차트 샘플입니다.</p> 

</div></p>

<p>    <!-- jQuery -->

    <script src="<a href="https://code.jquery.com/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery.min.js"></script></a>

    <!-- google charts -->

       <script type="text/javascript" src="<a href="https://www.gstatic.com/charts/loader.js"></script>" target="_blank" rel="noopener noreferrer">https://www.gstatic.com/charts/loader.js"></script></a></p>

<p>    <h4>사이트 방문자 성별 현황 그래프</h4>

 

    <div id="Line_Controls_Chart">

      <!-- 라인 차트 생성할 영역 -->

          <div id="lineChartArea" style="padding:0px 20px 0px 0px;"></div>

      <!-- 컨트롤바를 생성할 영역 -->

          <div id="controlsArea" style="padding:0px 20px 0px 0px;"></div>

        </div>

 

 

  <script>

 

  var chartDrowFun = {

 

    chartDrow : function(){

        var chartData = '';

 

        //날짜형식 변경하고 싶으시면 이 부분 수정하세요.

        var chartDateformat     = 'yyyy년MM월dd일';

        //라인차트의 라인 수

        var chartLineCount    = 10;

        //컨트롤러 바 차트의 라인 수

        var controlLineCount    = 10;

 

 

        function drawDashboard() {

 

          var data = new google.visualization.DataTable();

          //그래프에 표시할 컬럼 추가

          data.addColumn('datetime' , '시간');

          data.addColumn('number'   , '무게');

          

 

          //그래프에 표시할 데이터

          var dataRow = [];

 

        //  for(var i = 0; i <= 29; i++){ //랜덤 데이터 생성

        //    var total   = Math.floor(Math.random() * 300) + 1;

        //    var man     = Math.floor(Math.random() * total) + 1;

        //    var woman   = total - man;

        //    //여기 db에서 가져오 데이터 이형식에 맞게 넣으면됩니다.

        //    //지금은 램덤으로 뿌리고요

        //    //기존있던 차트는 유료라서 실행도 안해봤고

        //    //이건 구글껀데 무료라고하네요.

        //    

        //    dataRow = [new Date('2017', '09', i , '10'), man, woman , total];

            while($query_data = mysqli_fetch_array($result))

            {

                    $times = $query_data["TIMES"];

                    $weights = $query_data["WEIGHTS"];

                    datarow = [$times,$weights];

                    data.addRow(dataRow);

                

            }

            

          }

 

 

            var chart = new google.visualization.ChartWrapper({

              chartType   : 'LineChart',

              containerId : 'lineChartArea', //라인 차트 생성할 영역

              options     : {

                              isStacked   : 'percent',

                              focusTarget : 'category',

                              height          : 500,

                              width              : '100%',

                              legend          : { position: "top", textStyle: {fontSize: 13}},

                              pointSize        : 5,

                              tooltip          : {textStyle : {fontSize:12}, showColorCode : true,trigger: 'both'},

                              hAxis              : {format: chartDateformat, gridlines:{count:chartLineCount,units: {

                                                                  years : {format: ['yyyy년']},

                                                                  months: {format: ['MM월']},

                                                                  days  : {format: ['dd일']},

                                                                  hours : {format: ['HH시']}}

                                                                },textStyle: {fontSize:12}},

                vAxis              : {minValue: 100,viewWindow:{min:0},gridlines:{count:-1},textStyle:{fontSize:12}},

                animation        : {startup: true,duration: 1000,easing: 'in' },

                annotations    : {pattern: chartDateformat,

                                textStyle: {

                                fontSize: 15,

                                bold: true,

                                italic: true,

                                color: '#871b47',

                                auraColor: '#d799ae',

                                opacity: 0.8,

                                pattern: chartDateformat

                              }

                            }

              }

            });

 

            var control = new google.visualization.ControlWrapper({

              controlType: 'ChartRangeFilter',

              containerId: 'controlsArea',  //control bar를 생성할 영역

              options: {

                  ui:{

                        chartType: 'LineChart',

                        chartOptions: {

                        chartArea: {'width': '60%','height' : 80},

                          hAxis: {'baselineColor': 'none', format: chartDateformat, textStyle: {fontSize:12},

                            gridlines:{count:controlLineCount,units: {

                                  years : {format: ['yyyy년']},

                                  months: {format: ['MM월']},

                                  days  : {format: ['dd일']},

                                  hours : {format: ['HH시']}}

                            }}

                        }

                  },

                    filterColumnIndex: 0

                }

            });

 

            var date_formatter = new google.visualization.DateFormat({ pattern: chartDateformat});

            date_formatter.format(data, 0);

 

            var dashboard = new google.visualization.Dashboard(document.getElementById('Line_Controls_Chart'));

            window.addEventListener('resize', function() { dashboard.draw(data); }, false); //화면 크기에 따라 그래프 크기 변경

            dashboard.bind([control], [chart]);

            dashboard.draw(data);

 

        }

          google.charts.setOnLoadCallback(drawDashboard);

 

      }

    }

 

$(document).ready(function(){

  google.charts.load('current', {'packages':['line','controls']});

  chartDrowFun.chartDrow(); //chartDrow() 실행

});

  </script>

 

 

<?php 

include_once('../_tail.php'); 

?>