PieDiff Graph

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

<?php
echo 'Hello, world!';

		    <div style="display:flex;gap:20px;flex-wrap:wrap;">
		        <div>
		        <div id="pie_1_before" style="width:450px;height:300px;"></div>
		        <div class="skt-char-bottom-title" style="color:#000000">Old Data</div>
		        </div>
		        <div>        
		        <div id="pie_1_after" style="width:450px;height:300px;"></div>
		        <div class="skt-char-bottom-title" style="color:#000000">New Data</div>
		        </div>
		    </div>
		    <div style="display:flex;gap:20px;flex-wrap:wrap;">
		    <div>
		    <div id="pie_1_diff" style="width:450px;height:300px;margin-top:20px;"></div>
		    <div class="skt-char-bottom-title" style="color:#000000">Overview</div>
		    </div></div>
		    <script>

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

		    google.charts.setOnLoadCallback(function(){

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

		        var options = {
		            pieSliceText: "none"
		        };

		        var chartBefore = new google.visualization.PieChart(
		            document.getElementById("pie_1_before")
		        );

		        var chartAfter = new google.visualization.PieChart(
		            document.getElementById("pie_1_after")
		        );

		        var chartDiff = new google.visualization.PieChart(
		            document.getElementById("pie_1_diff")
		        );

		        chartBefore.draw(oldData, options);
		        chartAfter.draw(newData, options);

		        var diffData = chartDiff.computeDiff(oldData, newData);
		        chartDiff.draw(diffData, options);

		    });

		    </script>

[skillwrapper type="skt_piediff" title_old="Old Data" title_new="New Data" combine_title="Overview" title_color="#000000"]

[skill title="Business" old="256070" new="358293"]

[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]

Old Data

New Data

Overview