Skip to content

Instantly share code, notes, and snippets.

@rxng

rxng/index.html

Created April 11, 2024 02:39
Show Gist options
  • Save rxng/0677a38be4cc73650c187a0ffb8d2c07 to your computer and use it in GitHub Desktop.
Save rxng/0677a38be4cc73650c187a0ffb8d2c07 to your computer and use it in GitHub Desktop.
Download ZIP
Wheel of Life
Raw
index.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<main class="container">
<div class="sliderHolder">
<div class="wheelCat">Citizenship</div>
<div class="sliderAll">
<div class="sliderCitizenship">
<input type=range value=1 min=0 max=8 step=1 id="Citizenship">
</div>
</div>
<br>
<div class="wheelCat">People</div>
<div class="sliderAll">
<div class="sliderPeople">
<input type=range value=1 min=0 max=8 step=1 id="People">
</div>
</div>
<br>
<div class="wheelCat">Growth</div>
<div class="sliderAll">
<div class="sliderGrowth">
<input type=range value=1 min=0 max=8 step=1 id="Growth">
</div>
</div>
<br>
<div class="wheelCat">Management</div>
<div class="sliderAll">
<div class="sliderManagement">
<input type=range value=1 min=0 max=8 step=1 id="Management">
</div>
</div>
<br>
<div class="wheelCat">Relationships</div>
<div class="sliderAll">
<div class="sliderCitizenship">
<input type=range value=1 min=0 max=8 step=1 id="Citizenship">
</div>
</div>
<br>
<div class="wheelCat">Health</div>
<div class="sliderAll">
<div class="sliderHealth">
<input type=range value=1 min=0 max=8 step=1 id="Health">
</div>
</div>
<br>
<div class="wheelCat">Wealth</div>
<div class="sliderAll">
<div class="sliderWealth">
<input type=range value=1 min=0 max=8 step=1 id="Wealth">
</div>
</div>
<br>
<div class="wheelCat">Joy</div>
<div class="sliderAll">
<div class="sliderJoy">
<input type=range value=1 min=0 max=8 step=1 id="Joy">
</div>
</div>
<br>
</div>
<div style="float:left;width:80%;">
<canvas id="polarChart"></canvas>
</div>
</main>
</html>
Raw
script.js
var valueBubble = '<output class="rangeslider__value-bubble" />';
function updateValueBubble(pos, value, context) {
pos = pos || context.position;
value = value || context.value;
var $valueBubble = $('.rangeslider__value-bubble', context.$range);
var tempPosition = pos + context.grabPos;
var position = (tempPosition <= context.handleDimension) ? context.handleDimension : (tempPosition >= context.maxHandlePos) ? context.maxHandlePos : tempPosition;
if ($valueBubble.length) {
$valueBubble[0].style.left = Math.ceil(position) + 'px';
$valueBubble[0].innerHTML = value;
}
}
$('input[type="range"]').rangeslider({
polyfill: false,
onInit: function() {
this.$range.append($(valueBubble));
updateValueBubble(null, null, this);
},
onSlide: function(pos, value) {
updateValueBubble(pos, value, this);
updateChart(0,value);
}
});
function updateChart (location,value){
myChart.data.datasets[0].data[location]=value;
myChart.update();
}
var ctx = document.getElementById("polarChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: [
"Citizenship",
"People",
"Growth",
"Management",
"Relationships",
"Health",
"Wealth",
"Joy"
],
datasets: [{
backgroundColor: [
"#00A3CE",
"#22CBED",
"#EB67A2",
"#FDA9ED",
"#EC5B22",
"#F78F21",
"#148F1E",
"#1EC428"
],
data: [4, 6, 6, 2, 4, 2, 2, 7],
}],
},
options: {
elements: {
arc: {
borderColor: "rgba(255,255,255,1)",
borderWidth:2
}
},
scale: {
ticks: {
beginAtZero:true,
max: 8,
min: 0,
stepSize: 1,
fontFamily: "'Lato', sans-serif",
fontSize:18,
fontColor: "#000",
display:false
},
gridLines: {
lineWidth:1,
color:"#999"
},
},
layout: {
padding: {
left: 100,
right: 200,
top: 10,
bottom: 10
}
},
legend: {
display: true,
position: "right",
labels: {
fontFamily: "'Lato', sans-serif",
fontSize:18,
fontColor: "#000"
}
}
}
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.min.js"></script>
Raw
style.scss
@import "compass/css3";
body {
padding: 50px 0;
}
.sliderHolder{
width:20%;
//height:400px;
float:left;
//border:1px solid;
//display:none;
}
.wheelCat {
width:100px;
float:left;
//border:1px solid;
padding-top:55px;
text-align:right;
padding-right:10px;
font-family:"Lato", san-serif;
font-size:13px;
}
.sliderAll{
height:100px;
width:50%;
padding-top:55px;
//border:1px solid;
float:left;
}
.sliderCitizenship .rangeslider__fill{
background-color:#00A3CE;
}
.sliderPeople .rangeslider__fill{
background-color:#22CBED;
}
.sliderGrowth .rangeslider__fill{
background-color:#EB67A2;
}
.sliderManagement .rangeslider__fill{
background-color:#FDA9ED;
}
.sliderRelationships .rangeslider__fill{
background-color:#EC5B22;
}
.sliderHealth .rangeslider__fill{
background-color:#F78F21;
}
.sliderWealth .rangeslider__fill{
background-color:#148F1E;
}
.sliderJoy .rangeslider__fill{
background-color:#1EC428;
}
.rangeslider__value-bubble{
display:none;
}
*,
*:before,
*:after {
@include box-sizing(border-box);
}
.rangeslider__value-bubble {
border: 1px solid #ccc;
display: block;
padding: 5px;
position: absolute;
bottom: 100%;
margin-bottom: 25px;
width: 100px;
margin-left: -50px;
text-align: center;
@include border-radius(5px);
font-family:"Lato", san-serif;
font-size:13px;
&:before,
&:after {
border-width: 11px;
border-style: solid;
border-color: transparent;
content: "";
display: block;
margin: auto;
width: 10px;
position: absolute;
left: 0;
right: 0;
}
&:before {
border-top-color: #ccc;
border-bottom-width: 0;
bottom: -11px;
}
&:after {
border-top-color: #fff;
border-bottom-width: 0;
bottom: -10px;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment