laravel5.5で、簡単な解析画面(24時間別ユーザ登録数)を、chart.jsで作ってみた。

admin

6年前

アクセス解析といえばGoogle Analyticsだけど、多機能過ぎて普通の人に使ってもらうには難しい。
それに、ユーザのログインや新規登録などの分析もしたいので、chart.jsで実装してみた。

app/http/Controller/Admin/HomeController.php

public function chart()
{
    $scale = [];
    $value = [];
    $max_value = 0;
    for($i=0; $i<=23; $i++){

        // eloquentだと、カラム名以外のhour(created_at) as create_timeみたいなgroupbyが使えないので、SQL文で実装
        $sql = sprintf(" 
            select 
                hour(created_at) as create_time,
                count(*) as user_count
            from 
                users
            where
                hour(created_at) = %d
            group by 
                hour(created_at)", $i);
        $user_count = \DB::select(\DB::raw($sql));

        $scale[]  = $i;
        if(empty($user_count)){
            $value[]  = 0;
        }else{
            foreach($user_count as $num){
                $value[]= $num->user_count;
                if($max_value < $num->user_count){
                    $max_value = $num->user_count;
                }
            }
        }
    }
    $scale = json_encode($scale);
    $value = json_encode($value);

    return view('admin.chart.index', compact('scale','value', 'max_value'));
}

public function chart()

{

$scale = [];

$value = [];

$max_value = 0;

for($i=0; $i<=23; $i++){

// eloquentだと、カラム名以外のhour(created_at) as create_timeみたいなgroupbyが使えないので、SQL文で実装

$sql = sprintf("

select

hour(created_at) as create_time,

count(*) as user_count

from

users

where

hour(created_at) = %d

group by

hour(created_at)", $i);

$user_count = \DB::select(\DB::raw($sql));

$scale[] = $i;

if(empty($user_count)){

$value[] = 0;

}else{

foreach($user_count as $num){

$value[]= $num->user_count;

if($max_value < $num->user_count){

$max_value = $num->user_count;

}

$scale = json_encode($scale);

$value = json_encode($value);

return view('admin.chart.index', compact('scale','value', 'max_value'));

}

chart.jsは、composerでインストするやり方もあるけど、CDNリンクでも行けた。
resources/views/admin/chart/index.blade.php

{{-- ヘッダー＆全体の配置が定義されている --}}
@extends('layouts.app_admin')

{{-- 各ページの表示 --}}
@section('content')

    <div class="container">
        <div class="table-responsive">
            {{-- フラッシュメッセージの表示 --}}
            @if (Session::has('flash_message'))
                <div class="alert alert-success"><h1>{{ Session::get('flash_message') }}</h1></div>
            @endif

            {{-- グラフ表示領域 --}}
            <canvas id="myLineChart"></canvas>

            <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
            <script>
                // https://qiita.com/koseki_yamaki/items/5b79eee74a9ea6742a13
                window.onload = function() {
                    var scale = {{$scale}};
                    var value = {{$value}};

                    var ctx = document.getElementById("myLineChart");
                    var myLineChart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: scale,
                            datasets: [
                                {
                                    label: '登録数',
                                    data: value,
                                    borderColor: "rgba(255,0,0,1)",
                                    backgroundColor: "rgba(255,0,0,0)"
                                },
                            ],
                        },
                        options: {
                            title: {
                                display: true,
                                text: '時間別ユーザー登録数'
                            },
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        suggestedMax: {{$max_value}},
                                        suggestedMin: 0,
                                        stepSize: 10,
                                        callback: function (value, index, values) {
                                            return value + '人'
                                        }
                                    }
                                }]
                            },
                        }
                    });
                }


            </script>

        </div>
    </div>
@endsection

@extends('layouts.app_admin')

@section('content')

@if (Session::has('flash_message'))

<div class="alert alert-success"><h1>{{ Session::get('flash_message') }}</h1></div>

@endif

// https://qiita.com/koseki_yamaki/items/5b79eee74a9ea6742a13

window.onload = function() {

var scale = {{$scale}};

var value = {{$value}};

var ctx = document.getElementById("myLineChart");

var myLineChart = new Chart(ctx, {

type: 'line',

data: {

labels: scale,

datasets: [

{

label: '登録数',

data: value,

borderColor: "rgba(255,0,0,1)",

backgroundColor: "rgba(255,0,0,0)"

options: {

title: {

display: true,

text: '時間別ユーザー登録数'

scales: {

yAxes: [{

ticks: {

suggestedMax: {{$max_value}},

suggestedMin: 0,

stepSize: 10,

callback: function (value, index, values) {

return value + '人'

}

}]

}

});

}

</script>

</div>

@endsection

月別・曜日別・属性別なんかも、あると良いね。

関連記事