<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="trigger04">▼ブラウザ別の訪問数のグラフを表示する（クリックで表示）▼</a>

<div class="clearfix">

	<div class="group">
		<div class="graph" id="canvas04_wrap">
			
		</div>
		<div class="text" id="canvas04_desc">
      <figure id="canvas04_img_wrap"></figure>
			<p>国内のブラウザはまだまだIEが主流ですが、WebNAUTユーザーの方々にはChromeが一番人気のようです。2位にiOSアプリでの閲覧を主に示すSafari(in-app)が入っていることにも注目です。</p>
		</div>
	</div>

</div>

body {
  text-align: center;
  width: 540px;
  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;
      margin-bottom: 10px;
  }

  #canvas04_wrap {
    display: inline-block;
    clear: both;
  }
  #canvas04_img_wrap {
    position: relative;
    margin-left: -20px;
  }
  #canvas04_desc {
    display: inline-block;
    text-align: left;
  }
}

$(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 insertObj04 = $("<canvas>").attr({
      "id" : "canvas04",
      "width" : 400,
      "height" : 330
    });
    $("#canvas04_wrap").append(insertObj04);
    
    var insertObj05 = $("<img>").attr({
      "src" : "http://webnaut.jp/develop/img/img_develop_140203_02_b.png",
      "alt" : "ブラウザ別の訪問数　サンプル"
    });
    $("#canvas04_img_wrap").append(insertObj05);
});

/*

trigger

*/

$("#trigger04").on("click",
    function(){
        var _SET = {
            id : "canvas04",
            type : "Doughnut",
            vals : [
                {
                    value: 36,
                    color: colors["01b"]
                },
                {
                    value: 18,
                    color: colors["02a"]
                },
                {
                    value: 17,
                    color: colors["02b"]
                },
                {
                    value: 13,
                    color: colors["03a"]
                },
                {
                    value: 9,
                    color: colors["03b"]
                },
                {
                    value: 8,
                    color: colors["04a"]
                }/*,
                {
                    value: 2,
                    color: colors["04a"]
                }*/

            ],
            options : {
                animationSteps : 100,
                onAnimationComplete : function(){
                        $("#"+_SET.id+"_desc").animate({
                            "opacity" : 1
                        },600,"linear");
                }
            }
        }

        start(_SET);
    }
);

});