Practice/wheeparam/views/themes/admin/statics/keyword.php

<?=$this->site->add_js("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js")?>
<?=$this->site->add_js("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js")?>
<div class="page-header">
    <h1 class="page-title">키워드별 접속 통계</h1>
</div>

<div class="box">
    <div class="box-header">
        <h4 class="box-title">검색 필터</h4>
    </div>
    <?=form_open(NULL, array('method'=>'get','class'=>'form-flex','autocomplete'=>'off'))?>
    <div data-ax-tbl class="ax-search-tbl">
        <div data-ax-tr>
            <div data-ax-td>
                <div data-ax-td-label>일자 검색</div>
                <div data-ax-td-wrap>
                    <input class="form-control form-control-sm" name="startdate" data-toggle="datepicker" value="<?=$startdate?>">
                </div>
                <div data-ax-td-wrap>
                    <input class="form-control form-control-sm" name="enddate" data-toggle="datepicker" value="<?=$enddate?>">
                </div>
            </div>
            <div data-ax-td>
                <div data-ax-td-wrap>
                    <button class="btn btn-sm btn-default"><i class="far fa-search"></i> 필터적용</button>
                </div>
            </div>
        </div>
    </div>
    <?=form_close()?>
</div>
<div class="H10"></div>
<div class="row">

    <div class="col-sm-6">
        <div class="box">
            <div class="box-header">
                <h4 class="box-title">키워드별 접속 통계</h4>
            </div>
            <canvas id="chart-browser" width="200" height="200"></canvas>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="box">
            <div class="box-header">
                <h4 class="box-title">키워드</h4>
            </div>
            <div data-ax5grid>
                <table>
                    <thead>
                    <tr>
                        <th>키워드</th>
                        <th>접속수</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php foreach($statics['list'] as $row):?>
                        <tr>
                            <td class="text-center"><?=$row['sta_keyword']?></td>
                            <td class="text-right"><?=number_format($row['count'])?> (<?=$statics['total']>0? round($row['count']/$statics['total']*100,2):0?>%)</td>
                        </tr>
                    <?php endforeach;?>
                    <?php if(count($statics['list']) == 0):?>
                        <tr>
                            <td class="empty" colspan="2">키워드로 접속한 기록이 없습니다.</td>
                        </tr>
                    <?php endif;?>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td class="text-center">TOTAL</td>
                        <td class="text-right"><?=number_format($statics['total'])?></td>
                    </tr>
                    </tfoot>
                </table>
            </div>

        </div>
    </div>
</div>


<script>
    $(function(){
        var $chart = $("#chart-browser");
        var chart_data = <?=$statics['counts']?>;
        var chart = new Chart($chart, {
            type: 'pie',
            data: {
                labels: <?=$statics['sta_keyword']?>,
                datasets: [{
                    label : '# %',
                    data: chart_data,
                    backgroundColor : randomColorGenerator(chart_data.length)
                }]
            },
            options : {
                animation : {
                    animateScale:true
                },
                legend: {
                    labels : {
                        fontColor : '#282828'
                    }
                }
            }
        });
    });

    var randomColorGenerator = function (count) {
        var ret = [];
        for(i=0; i<count;i++)
        {
            ret.push( '#' + (Math.random().toString(16) + '0000000').slice(2, 8) );
        }
        return ret;
    };

</script>