Area Graph

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

<?php
echo 'Hello, world!';

		    <div class="skt-areachart-wrap" style="position:relative;width:100%;max-width:1000px;margin:0 auto;">
		        <div id="areachart_1" style="width:100%;"></div>
		    </div>

		    <script>
			    (function(){
			        window.sktAreaCharts = window.sktAreaCharts || [];
			        google.charts.load("current", {
			            packages:["corechart"]
			        });
			        google.charts.setOnLoadCallback(function(){
			            var el = document.getElementById("areachart_1");
			            if(!el){
			                return;
			            }
			            var data = google.visualization.arrayToDataTable(
			                [["Year","Sales","Expenses"],["2013",1000,400],["2014",1170,460],["2015",660,1120],["2016",1030,540]]
			            );
			            var chart = new google.visualization.AreaChart(el);
			            function draw(){
			                var w = el.clientWidth || 600;
			                var h = Math.max(300, Math.min(500, w * 0.6));
			                chart.draw(data, {
							    title: "Company Performance",
							    titleTextStyle: { color: "#ffc012" },
							    hAxis: {
							        title: "Year",
							        titleTextStyle: { color: "#ffc012" }
							    },
							    vAxis: { minValue: 0 },
							    height: h,
							    legend: { position: "bottom" },
							    chartArea: { width: "85%", height: "70%" }
							});
			            }
			            draw();
			            window.sktAreaCharts.push(draw);
			            if(!window.sktAreaResizeBound){
			                window.sktAreaResizeBound = true;
			                var timer;
			                window.addEventListener("resize", function(){
			                    clearTimeout(timer);
			                    timer = setTimeout(function(){
			                        window.sktAreaCharts.forEach(function(fn){
			                            fn();
			                        });

			                    }, 200);

			                });

			            }
			        });
			    })();
			</script>

[skillwrapper type="skt_areachart" chart_title="Company Performance" haxis_title="Year" color_label="#ffc012"]

[skill year="2013" sales="1000" expenses="400"]

[skill year="2014" sales="1170" expenses="460"]

[skill year="2015" sales="660" expenses="1120"]

[skill year="2016" sales="1030" expenses="540"]

[/skillwrapper]