Trendline Graph

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

<?php
echo 'Hello, world!';

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

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

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

		            var data  = google.visualization.arrayToDataTable([["Month","Revenue"],[1,120],[2,150],[3,180],[4,220],[5,260]]);
		            var chart = new google.visualization.ScatterChart(el);

		            function draw(){
		                var w = el.clientWidth || el.offsetWidth || 600;
		                var h = Math.round(Math.max(320, Math.min(520, w * 0.55)));
		                var small = w < 520;

		                var trend = {
		                    type: "exponential",
		                    visibleInLegend: true
		                };
		                
		                

		                var o = {
		                    title: "Sales Trend",
		                    height: h,
		                    legend: { position: "top", textStyle: { color: "#333333" } },
		                    crosshair: { trigger: "both", orientation: "both" },
		                    pointSize: small ? 5 : 7,
		                    backgroundColor: { fill: "transparent" },
		                    titleTextStyle: { color: "#333333", fontSize: small ? 14 : 18 },
		                    hAxis: { title: "Month", textStyle: { color: "#333333" }, titleTextStyle: { color: "#333333" } },
		                    vAxis: { title: "Revenue", textStyle: { color: "#333333" }, titleTextStyle: { color: "#333333" } },
		                    trendlines: { 0: trend }
		                };
		                o.colors = [ "#9e8b90" ];

		                chart.draw(data, o);
		            }

		            draw();
		            window.sktTrendCharts.push(draw);

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

[skillwrapper type="skt_trendline" chart_title="Sales Trend" x_label="Month" y_label="Revenue" text_color="#333333" point_color="#9e8b90"]

[skill x="1" y="120"]

[skill x="2" y="150"]

[skill x="3" y="180"]

[skill x="4" y="220"]

[skill x="5" y="260"]

[/skillwrapper]