Radar Graph

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

<?php
echo 'Hello, world!';

<div style="position:relative;width:100%;height:500px;"><canvas id="radar_1"></canvas></div>

			<script>

			document.addEventListener(
			"DOMContentLoaded",

			function(){

			new Chart(

			document.getElementById("radar_1"),

			{

			type:"radar",

			data:{

			labels: ["Eating","Drinking","Sleeping","Designing","Coding","Cycling","Running"],
			datasets:[
			{

			label:"Olympics 2024",
			data: [65,59,90,81,56,55,40],
			fill:true,
			backgroundColor: "rgba(255, 126, 0, 0.2)",
			borderColor: "rgb(255, 126, 0)",
			pointBackgroundColor: "rgb(255, 126, 0)"
			},

			{

			label:"Olympics 2026",
			data: [28,48,40,19,96,27,100],
			fill:true,
			backgroundColor: "rgba(0, 255, 0, 0.2)",
			borderColor: "rgb(0, 255, 0)",
			pointBackgroundColor: "rgb(0, 255, 0)"
			}
			]

			},

			options:{
				responsive: true,
    			maintainAspectRatio: false
			}

			}

			);

			}

			);

			</script>

[skillwrapper type="skt_radargraph" heading_one="Olympics 2024" heading_two="Olympics 2026" backgroundcolor_one="#ff7e00" bordercolor_one="#ff7e00" point_one_backgroundcolor="#ff7e00" backgroundcolor_two="#00ff00" bordercolor_two="#00ff00" point_two_backgroundcolor="#00ff00"]

[skill title="Eating" value1="65" value2="28"]

[skill title="Drinking" value1="59" value2="48"]

[skill title="Sleeping" value1="90" value2="40"]

[skill title="Designing" value1="81" value2="19"]

[skill title="Coding" value1="56" value2="96"]

[skill title="Cycling" value1="55" value2="27"]

[skill title="Running" value1="40" value2="100"]

[/skillwrapper]