HANYANG_MES/show_dir/www/kadm2/visit2/visit_chart_day.php

<?php
if( !$cate_area ) return;

include_once "{$_SERVER['DOCUMENT_ROOT']}/common.inc.php";
include_once _ADM_INC_PATH_ ."/auth_check.php";

$vsobj = new Visit();

$today   = $_REQUEST['sdate'] ?: date("Y-m-d");
$prevday = date("Y-m-d",strtotime($today." -1 days"));
$nextday = date("Y-m-d",strtotime($today." +1 days"));

$logdata['today']   = $vsobj->getVisitData("hour", "LOG", $cate_area, $today, $today);
$logdata['prevday'] = $vsobj->getVisitData("hour", "LOG", $cate_area, $prevday, $prevday);
$logdata['nextday'] = $vsobj->getVisitData("hour", "LOG", $cate_area, $nextday, $nextday);

$sessdata['today']   = $vsobj->getVisitData("hour", "SESS", $cate_area, $today, $today);
$sessdata['prevday'] = $vsobj->getVisitData("hour", "SESS", $cate_area, $prevday, $prevday);
$sessdata['nextday'] = $vsobj->getVisitData("hour", "SESS", $cate_area, $nextday, $nextday);

include _ADM_INC_PATH_ ."/header.html";
?>

        <form method="get" name="sform" id="sform" class="sform form-inline" action="<?=$_SERVER['PHP_SELF']?>">
          <label> <span> 날짜 :</span>
            <input type="date" max="9999-12-31" name="sdate" id="sdate" class="dpicker form-control form-control-sm" value="<?=$_REQUEST['sdate']?>">
          </label>
        </form>

        <div id="cmd_bar" class="mb-2">
          <div class="h4"><i class="bi bi-files-alt"></i> <?=$cate_title?> 방문 통계</div>
          <div class="text-right">
            <?php include __DIR__."/visit_chart.ini.php";?>
          </div>
        </div>

        <div class="container-fluid mt-3 cont_hfix">
          <div class="row">
            <div class="col">
              <h5 class="d-flex justify-content-between">
                <span><i class="bi bi-subtract"></i> <?=$cate_title?> 페이지뷰 통계</span>
              </h5>
              <div id="day_chart_pageview" style="width:99%; height:330px;"></div>
            </div>
          </div>
          <div class="row mt-3">
            <div class="col">
              <h5 class="d-flex justify-content-between">
                <span><i class="bi bi-subtract"></i> <?=$cate_title?> 접속자 통계</span>
              </h5>
              <div id="day_chart_sess" style="width:99%; height:330px;"></div>
            </div>
          </div>
        </div>
<?php

include _ADM_INC_PATH_ ."/footer.html";
?>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.36.0/dist/apexcharts.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/@google-web-components/google-chart@5.0.2/google-chart.min.js"></script>-->
<script>
const today = "<?=$today?>";
const chart_log_data = <?=json_encode($logdata)?>;
const chart_sess_data = <?=json_encode($sessdata)?>;

let divnum = 3;
if( today >= luxon.DateTime.now().toFormat("yyyy-MM-dd") ){
  divnum = 2;
}

let gcdata = {
  log: [['시간','지정일','이전일','다음일','평균']],
  sess: [['시간','지정일','이전일','다음일','평균']],
};

Array.from(new Array(24)).forEach( (v, i) => {
  let st = ('0'+i).slice(-2);
  let et = ('0'+(i+1)).slice(-2);
  gcdata.log.push([
    { v:Number(st), f:st+'시 ~ ' + et+'시'},
    chart_log_data.today.data['h'+st]||0,
    chart_log_data.prevday.data['h'+st]||0,
    chart_log_data.nextday.data['h'+st]||0,
    Math.round((Number(chart_log_data.today.data['h'+st])+Number(chart_log_data.prevday.data['h'+st])+Number(chart_log_data.nextday.data['h'+st]))*10/divnum)/10
  ]);
  gcdata.sess.push([
    { v:Number(st), f:st+'시 ~ ' + et+'시'},
    chart_sess_data.today.data['h'+st]||0,
    chart_sess_data.prevday.data['h'+st]||0,
    chart_sess_data.nextday.data['h'+st]||0,
    Math.round((Number(chart_sess_data.today.data['h'+st])+Number(chart_sess_data.prevday.data['h'+st])+Number(chart_sess_data.nextday.data['h'+st]))*10/divnum)/10
  ]);
});

let options_log = {
  chartArea: {
    top: 50,
    left:50,
    right:10,
    bottom: 100,
  },
  title: '<?=$today?> 시간별 페이지뷰',
  titleTextStyle: {
    align: 'center',
  },
  seriesType: 'bars',
  bar: { groupWidth: '75%' },
  colors: ['#D2695C','#52AFAE','#ABDCF7','#ffd045'],

  legend: {
    position: 'bottom',
    textStyle: {
      fontSize: 12,
    }
  }, //개별
  //titlePosition: 'in',//타이틀
  //axisTitlesPosition: 'in',//가로축

  tooltip: {
    textStyle: {
      fontSize: 12,
      color: 'darkgreen',
    },
  },
  vAxis: {
    //textPosition: 'in'
    textStyle: {
      fontSize: 12,
    },
    // viewWindow:{
    //   min:0
    // },
  },

  hAxis: {
    textStyle: {
     fontSize: 12,
    },
    maxTextLines:1,
    maxAlternation: 1,
    slantedTextAngle: 30,
    ticks: Array.from(new Array(24)).map( (v, i) => ({v:i, f:('0'+i).slice(-2)+'시 ~ ' + ('0'+(i+1)).slice(-2)+'시'}) ),
    //title: '시간대',
    //textPosition: 'in',
    format: 'decimal',
    viewWindowMode: 'maximized',
    gridlines: {
      color: '#ccc',
      interval:1,
      units: {
        hours: {format:'Date(5)'}
      },
      minSpacing: 10
  }},
  series: {
    3: {type: 'line', a_curveType: 'function',},
  }
};

let options_sess = {...options_log, title:'<?=$today?> 시간별 접속자수', };

function chartLogDraw() {
  let data = google.visualization.arrayToDataTable(gcdata.log);
  let options = options_log;
  let chart = new google.visualization.ComboChart(document.getElementById('day_chart_pageview'));
  google.visualization.events.addListener(chart, 'select', () => {
    let selection = chart.getSelection();
    console.log(selection);
  });
  chart.draw(data, options);
};

function chartSessDraw() {
  let data = google.visualization.arrayToDataTable(gcdata.sess);
  let options = options_sess;
  let chart = new google.visualization.ComboChart(document.getElementById('day_chart_sess'));
  google.visualization.events.addListener(chart, 'select', () => {
    let selection = chart.getSelection();
    console.log(selection);
  });
  chart.draw(data, options);
};

function chartDraw(){
  chartLogDraw();
  chartSessDraw();
}

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(chartDraw);


window.onresize = chartDraw;

document.getElementById("sdate").addEventListener("change", (e)=>{
  location.href = '?cate_area=<?=$cate_area?>&mode=<?=$_REQUEST['mode']?>&sdate='+e.target.value;
});
</script>