ColumnDiff Graph

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

<?php
echo 'Hello, world!';

		        <style>
		            .skt-cd-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}
		            .skt-cd-card{position:relative;z-index:1;backdrop-filter:blur(4px);}
		            .skt-cd-chart{width:100%;}
		            @keyframes sktCdAurora{ to{ transform:rotate(360deg); } }
		            @media (max-width:600px){ .skt-cd-bg{padding:12px;border-radius:12px;} }
		            @media (prefers-reduced-motion:reduce){ .skt-cd-bg::before{animation:none;} }
		        </style>
		    <div class="skt-cd-bg">
		        <div class="skt-cd-grid">
		            <div class="skt-cd-card"><div id="coldiff_1_before" class="skt-cd-chart"></div></div>
		            <div class="skt-cd-card"><div id="coldiff_1_after" class="skt-cd-chart"></div></div>
		        </div>
		        <div class="skt-cd-card" style="margin-top:16px;"><div id="coldiff_1_diff" class="skt-cd-chart"></div></div>
		    </div>

		    <script>
		    (function(){
		        window.sktCdCharts = window.sktCdCharts || [];

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

		            var oldData = google.visualization.arrayToDataTable([["Major","Degrees"],["Business",2560],["Education",108034],["Social Sciences & History",127101],["Health",81863],["Psychology",74194]]);
		            var newData = google.visualization.arrayToDataTable([["Major","Degrees"],["Business",3500],["Education",101265],["Social Sciences & History",172780],["Health",129634],["Psychology",97216]]);

		            var elB = document.getElementById("coldiff_1_before");
		            var elA = document.getElementById("coldiff_1_after");
		            var elD = document.getElementById("coldiff_1_diff");
		            var elBar = null;

		            var cB = new google.visualization.ColumnChart(elB);
		            var cA = new google.visualization.ColumnChart(elA);
		            var cD = new google.visualization.ColumnChart(elD);
		            var cBar = elBar ? new google.visualization.BarChart(elBar) : null;

		            var diffData = cD.computeDiff(oldData, newData);
		            var COLORS = ["#0000ff","#ff5722"];
		            var first = true;

		            function opts(el, title){
		                var w = el.clientWidth || el.offsetWidth || 400;
		                var h = Math.round(Math.max(240, Math.min(340, w * 0.62)));
		                var small = w < 380;
		                var o = {
		                    height: h,
		                    title: title,
		                    colors: COLORS,
		                    backgroundColor: { fill: "transparent" },
		                    titleTextStyle: { color: "#ffffff", fontSize: small ? 13 : 16 },
		                    legend: { position: "top", textStyle: { color: "#000000", fontSize: small ? 10 : 12 } },
		                    hAxis: { textStyle: { color: "#000000", fontSize: small ? 9 : 11 }, slantedText: true, slantedTextAngle: 30 },
		                    vAxis: { textStyle: { color: "#000000", fontSize: small ? 9 : 11 }, gridlines: { color: "rgba(255,255,255,0.15)" } },
		                    chartArea: { width: "80%", height: "62%", backgroundColor: "transparent" }
		                };
		                if(first){ o.animation = { startup: true, duration: 900, easing: "out" }; }
		                return o;
		            }

		            function drawAll(){
		                cB.draw(oldData,  opts(elB, "Before"));
		                cA.draw(newData,  opts(elA, "After"));
		                cD.draw(diffData, opts(elD, "Difference"));
		                if(cBar){ cBar.draw(diffData, opts(elBar, "Difference" + " (Bar)")); }
		                first = false;
		            }

		            drawAll();
		            window.sktCdCharts.push(drawAll);

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

[skillwrapper type="skt_columndiff" column_color="#0000ff|#ff5722" value_label="Degrees" show_bar_diff="no" text_color='#000000']

[skill title="Business" old="2560" new="3500"]

[skill title="Education" old="108034" new="101265"]

[skill title="Social Sciences & History" old="127101" new="172780"]

[skill title="Health" old="81863" new="129634"]

[skill title="Psychology" old="74194" new="97216"]

[/skillwrapper]