3D Graph

Copy and paste the following shortcode into your post or page.

<?php
echo 'Hello, world!';

		    <div class="skt-pie3d-wrap" style="position:relative;width:100%;max-width:900px;margin:0 auto;">
		        <div id="pie3d_1" style="width:100%;"></div>
		    </div>
		    <script>
		    (function(){
		        window.sktPie3dCharts = window.sktPie3dCharts || [];

		        google.charts.load("current", {packages:["corechart"]});
		        google.charts.setOnLoadCallback(function(){

		            var el = document.getElementById("pie3d_1");
		            if(!el){ return; }

		            var data   = google.visualization.arrayToDataTable([["Label","Value"],["Work",8],["Eat",2],["Commute",4],["Watch TV",2],["Sleep",8]]);
		            var chart  = new google.visualization.PieChart(el);
		            var SLICES = [{"color":"#FF6D01"},{"color":"#EA4335"},{"color":"#FBBC05"},{"color":"#4285F4"},{"color":"#34A853"}];

		            function draw(){
		                var w = el.clientWidth || el.offsetWidth || 600;
		                var h = Math.round(Math.max(300, Math.min(500, w * 0.6)));
		                var small = w < 480;

		                chart.draw(data, {
		                    title: "My Daily Activities",
		                    is3D: true,
		                    height: h,
		                    backgroundColor: { fill: "transparent" },
		                    titleTextStyle: { color: "#333333", fontSize: small ? 15 : 18 },
		                    legend: { textStyle: { color: "#333333", fontSize: small ? 11 : 13 } },
		                    chartArea: { width: "90%", height: "80%" },
		                    slices: SLICES
		                });
		            }

		            draw();
		            window.sktPie3dCharts.push(draw);

		            if(!window.sktPie3dResizeBound){
		                window.sktPie3dResizeBound = true;
		                var t;
		                window.addEventListener("resize", function(){
		                    clearTimeout(t);
		                    t = setTimeout(function(){ window.sktPie3dCharts.forEach(function(fn){ fn(); }); }, 200);
		                });
		            }
		        });
		    })();
		    </script>

[skillwrapper type="skt_pie3d" chart_title="My Daily Activities" text_color="#333333"]

[skill title="Work" value="8" backgroundcolr="#FF6D01"]

[skill title="Eat" value="2" backgroundcolr="#EA4335"]

[skill title="Commute" value="4" backgroundcolr="#FBBC05"]

[skill title="Watch TV" value="2" backgroundcolr="#4285F4"]

[skill title="Sleep" value="8" backgroundcolr="#34A853"]

[/skillwrapper]