<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

<a href="javascript:void(0);" class="trigger" id="trigger02">▼時間別の訪問数のグラフを表示する(クリックで表示)▼</a>

<div class="clearfix">

	<div class="group">
		<div class="graph" id="canvas02_wrap">
			
		</div>
		<div class="text" id="canvas02_desc">
			<p>※縦軸:<strong>午前4時の訪問数を100とした場合の割合</strong>  横軸:<strong>時間</strong></p>
			<p>訪問数の多い時間帯1〜4位が全て9〜12時の午前中の時間帯に集中しています。</p>
		</div>
	</div>

</div>
body {
  text-align: center;
  width: 530px;
  margin: 20px auto;
  padding: 0 10px;
  a.trigger {
      display: inline-block;
      color: #fff !important;
      background-color: rgba(32,186,238,1);
      border-radius: 8px;
      padding: 5px 20px;
      text-align: center;
  }

  #canvas02_wrap {
    display: inline-block;
    clear: both;
  }
  
  #canvas02_desc {
    display: inline-block;
    text-align: left;
  }
}
View Compiled
$(function(){

/*save objects*/
var canvas = {
    "canvas02" : null
}
var colors = {
    "01a" : "rgba(10,25,215,1)",
    "01b" : "rgba(32,186,238,1)",
    "02a" : "rgba(245,70,53,1)",
    "02b" : "rgba(255,241,0,1)",
    "02c" : "rgba(215,10,25,0.2)",
    "03a" : "rgba(32,186,238,0.5)",
    "03b" : "rgba(245,70,53,0.5)",
    "04a" : "rgba(215,215,215,1)",
    "05a" : "rgba(245,70,53,0.8)",
    "05b" : "rgba(255,241,0,0.5)",
}


/*
@CANVAS
drawing graphs
augument : canvas要素のidの連番、グラフの種類、chart.jsに渡す引数のオブジェクトを格納した配列
戻り値:なし
*/
function CANVAS(_SET){
    var vals = null;
    var descId = "";
    var options = null;

    fire = (function(_SET){
        if(_SET.id){
            descId = _SET.id;
        }
        if(_SET.vals){
            vals = _SET.vals;
        }
        if(_SET.options){
            options = _SET.options;
        }
        var canvas = document.getElementById(_SET.id).getContext("2d");
        if(_SET.type){
            switch(_SET.type){
                case "Doughnut":
                    var draw = new Chart(canvas).Doughnut(vals,options);
                    break;
                case "Bar":
                    var draw = new Chart(canvas).Bar(vals,options);
                    break;
                case "Line":
                    var draw = new Chart(canvas).Line(vals,options);
                    break;
                case "Radar":
                    var draw = new Chart(canvas).Radar(vals,options);
                    break;
                case "PolarArea":
                    var draw = new Chart(canvas).PolarArea(vals,options);
                    break;
                case "Pie":
                    var draw = new Chart(canvas).Pie(vals,options);
                    break;
                default : return false;
                    break;
            }
        }
    })(_SET);
    
};



function start(_SET){
    canvas["canvas"+_SET.id] = new CANVAS(_SET);
}


/*

on window.load

*/
$(function(){
    
    $("div.text").css("opacity","0");

    var insertObj02 = $("<canvas>").attr({
      "id" : "canvas02",
      "width" : 400,
      "height" : 330
    });
    $("#canvas02_wrap").append(insertObj02);
    
});

/*

trigger

*/

$("#trigger02").on("click",
    function(){
        var _SET = {
            id : "canvas02",
            type : "Line",
            vals : {
                labels : ["0","","","3","","","6","","","9","","","12","","","15","","","18","","","21","",""],
                datasets : [
                    {
                        fillColor : colors["01b"],
                        strokeColor : colors["04a"],
                        pointColor : colors["04a"],
                        pointStrokeColor : colors["05a"],
                        data : [557,382,220,147,100,102,183,317,737,1098,1080,963,914,823,842,802,824,814,723,642,645,663,701,674]
                    }
                ]
            },
            options : {
                pointDot : false,
                animationSteps : 70,
                onAnimationComplete : function(){
                        $("#"+_SET.id+"_desc").animate({
                            "opacity" : 1
                        },600,"linear");
                }
            }
        }

        start(_SET);
    }
);

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.