You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

93 lines
3.0 KiB

7 years ago
  1. <?=$this->site->add_js("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js")?>
  2. <?=$this->site->add_js("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js")?>
  3. <div class="page-header">
  4. <h1 class="page-title">OS별 접속 통계</h1>
  5. </div>
  6. <?=form_open(NULL, array('method'=>'get','class'=>'form-flex','autocomplete'=>'off'))?>
  7. <div class="form-group">
  8. <label class="control-label">일자 검색</label>
  9. <div class="controls">
  10. <input class="form-control form-control-inline" name="startdate" data-toggle="datepicker" value="<?=$startdate?>">
  11. <input class="form-control form-control-inline" name="enddate" data-toggle="datepicker" value="<?=$enddate?>">
  12. <button class="btn btn-default"><i class="far fa-search"></i> 필터적용</button>
  13. </div>
  14. </div>
  15. <?=form_close()?>
  16. <div class="H10"></div>
  17. <div class="row">
  18. <div class="col-sm-6">
  19. <div style="max-width:400px;margin:auto">
  20. <h4 class="text-center">OS별 접속 통계</h4>
  21. <canvas id="chart-os" width="200" height="200"></canvas>
  22. </div>
  23. </div>
  24. <div class="col-sm-6">
  25. <div data-ax5grid>
  26. <table>
  27. <thead>
  28. <tr>
  29. <th>OS</th>
  30. <th>접속수</th>
  31. </tr>
  32. </thead>
  33. <tbody>
  34. <?php foreach($statics['list'] as $row):?>
  35. <tr>
  36. <td class="text-center"><?=$row['sta_platform']?></td>
  37. <td class="text-right"><?=number_format($row['count'])?> (<?=$statics['total']>0? round($row['count']/$statics['total']*100,2):0?>%)</td>
  38. </tr>
  39. <?php endforeach;?>
  40. </tbody>
  41. <tfoot>
  42. <tr>
  43. <td class="text-center">TOTAL</td>
  44. <td class="text-right"><?=number_format($statics['total'])?></td>
  45. </tr>
  46. </tfoot>
  47. </table>
  48. </div>
  49. </div>
  50. </div>
  51. <script>
  52. $(function(){
  53. var $chart = $("#chart-os");
  54. var chart_data = <?=$statics['counts']?>;
  55. var chart = new Chart($chart, {
  56. type: 'pie',
  57. data: {
  58. labels: <?=$statics['sta_platform']?>,
  59. datasets: [{
  60. label : '# %',
  61. data: chart_data,
  62. backgroundColor : randomColorGenerator(chart_data.length)
  63. }]
  64. },
  65. options : {
  66. animation : {
  67. animateScale:true
  68. },
  69. legend: {
  70. labels : {
  71. fontColor : '#fff'
  72. }
  73. }
  74. }
  75. });
  76. });
  77. var randomColorGenerator = function (count) {
  78. var ret = [];
  79. for(i=0; i<count;i++)
  80. {
  81. ret.push( '#' + (Math.random().toString(16) + '0000000').slice(2, 8) );
  82. }
  83. return ret;
  84. };
  85. </script>