Interactive Wheel of Life

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 600px;
}

.areas {
  text-align: center;
  margin-bottom: 15px;
  min-height: 95px;
}

.areas .value {
  display: inline-block;
  font-size: 1.3em;
  padding: 5px 10px;
  border: 1px solid #ddd;
  cursor: pointer;
}

.areas .value:hover {
  background: #ecc;
}
</style>

<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.RadarChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.data = [ {
  "category": "Health",
  "value": 0,
  "color": chart.colors.next()
}, {
  "category": "Career",
  "value": 0,
  "color": chart.colors.next()
}, {
  "category": "Love",
  "value": 0,
  "color": chart.colors.next()
}, {
  "category": "Spirituality",
  "value": 0,
  "color": chart.colors.next()
}, {
  "category": "Family",
  "value": 0,
  "color": chart.colors.next()
}, {
  "category": "Money",
  "value": 0,
  "color": chart.colors.next()
}, {
  "category": "Fun",
  "value": 0,
  "color": chart.colors.next()
}, {
  "category": "Friends",
  "value": 0,
  "color": chart.colors.next()
} ];

chart.padding(20, 20, 20, 20);

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.labels.template.location = 0.5;
categoryAxis.renderer.tooltipLocation = 0.5;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.labels.template.disabled = true;
valueAxis.min = 0;
valueAxis.max = 10;
valueAxis.renderer.minGridDistance = 10;

var series = chart.series.push(new am4charts.RadarColumnSeries());
series.columns.template.tooltipText = "{categoryX}: {valueY.value}";
series.columns.template.width = am4core.percent(100);
series.columns.template.strokeWidth = 0;
series.columns.template.column.propertyFields.fill = "color";
series.dataFields.categoryX = "category";
series.dataFields.valueY = "value";

/**
 * Sets value for particular index
 */
function setValue(index, value) {
  
  // Set value
  chart.data[index].value = value;
  chart.invalidateRawData();
  
  // Reveal next question
  var areas = document.getElementsByClassName("area");
  for(var i = 0; i < areas.length; i++) {
    areas[i].style.display = (index + 1) === i ? "block" : "none";
  }
  
}

}); // end am4core.ready()
</script>

<!-- HTML -->
<div class="areas">
  <div class="area">
    <h3>Health</h3>
    <div class="values">
      <div class="value" onclick="setValue(0, 1);">1</div>
      <div class="value" onclick="setValue(0, 2);">2</div>
      <div class="value" onclick="setValue(0, 3);">3</div>
      <div class="value" onclick="setValue(0, 4);">4</div>
      <div class="value" onclick="setValue(0, 5);">5</div>
      <div class="value" onclick="setValue(0, 6);">6</div>
      <div class="value" onclick="setValue(0, 7);">7</div>
      <div class="value" onclick="setValue(0, 8);">8</div>
      <div class="value" onclick="setValue(0, 9);">9</div>
      <div class="value" onclick="setValue(0, 10);">10</div>
    </div>
  </div>
  <div class="area" style="display: none;">
    <h3>Career</h3>
    <div class="values">
      <div class="value" onclick="setValue(1, 1);">1</div>
      <div class="value" onclick="setValue(1, 2);">2</div>
      <div class="value" onclick="setValue(1, 3);">3</div>
      <div class="value" onclick="setValue(1, 4);">4</div>
      <div class="value" onclick="setValue(1, 5);">5</div>
      <div class="value" onclick="setValue(1, 6);">6</div>
      <div class="value" onclick="setValue(1, 7);">7</div>
      <div class="value" onclick="setValue(1, 8);">8</div>
      <div class="value" onclick="setValue(1, 9);">9</div>
      <div class="value" onclick="setValue(1, 10);">10</div>
    </div>
  </div>
  <div class="area" style="display: none;">
    <h3>Love</h3>
    <div class="values">
      <div class="value" onclick="setValue(2, 1);">1</div>
      <div class="value" onclick="setValue(2, 2);">2</div>
      <div class="value" onclick="setValue(2, 3);">3</div>
      <div class="value" onclick="setValue(2, 4);">4</div>
      <div class="value" onclick="setValue(2, 5);">5</div>
      <div class="value" onclick="setValue(2, 6);">6</div>
      <div class="value" onclick="setValue(2, 7);">7</div>
      <div class="value" onclick="setValue(2, 8);">8</div>
      <div class="value" onclick="setValue(2, 9);">9</div>
      <div class="value" onclick="setValue(2, 10);">10</div>
    </div>
  </div>
  <div class="area" style="display: none;">
    <h3>Spirituality</h3>
    <div class="values">
      <div class="value" onclick="setValue(3, 1);">1</div>
      <div class="value" onclick="setValue(3, 2);">2</div>
      <div class="value" onclick="setValue(3, 3);">3</div>
      <div class="value" onclick="setValue(3, 4);">4</div>
      <div class="value" onclick="setValue(3, 5);">5</div>
      <div class="value" onclick="setValue(3, 6);">6</div>
      <div class="value" onclick="setValue(3, 7);">7</div>
      <div class="value" onclick="setValue(3, 8);">8</div>
      <div class="value" onclick="setValue(3, 9);">9</div>
      <div class="value" onclick="setValue(3, 10);">10</div>
    </div>
  </div>
  <div class="area" style="display: none;">
    <h3>Family</h3>
    <div class="values">
      <div class="value" onclick="setValue(4, 1);">1</div>
      <div class="value" onclick="setValue(4, 2);">2</div>
      <div class="value" onclick="setValue(4, 3);">3</div>
      <div class="value" onclick="setValue(4, 4);">4</div>
      <div class="value" onclick="setValue(4, 5);">5</div>
      <div class="value" onclick="setValue(4, 6);">6</div>
      <div class="value" onclick="setValue(4, 7);">7</div>
      <div class="value" onclick="setValue(4, 8);">8</div>
      <div class="value" onclick="setValue(4, 9);">9</div>
      <div class="value" onclick="setValue(4, 10);">10</div>
    </div>
  </div>
  <div class="area" style="display: none;">
    <h3>Money</h3>
    <div class="values">
      <div class="value" onclick="setValue(5, 1);">1</div>
      <div class="value" onclick="setValue(5, 2);">2</div>
      <div class="value" onclick="setValue(5, 3);">3</div>
      <div class="value" onclick="setValue(5, 4);">4</div>
      <div class="value" onclick="setValue(5, 5);">5</div>
      <div class="value" onclick="setValue(5, 6);">6</div>
      <div class="value" onclick="setValue(5, 7);">7</div>
      <div class="value" onclick="setValue(5, 8);">8</div>
      <div class="value" onclick="setValue(5, 9);">9</div>
      <div class="value" onclick="setValue(5, 10);">10</div>
    </div>
  </div>
  <div class="area" style="display: none;">
    <h3>Fun</h3>
    <div class="values">
      <div class="value" onclick="setValue(6, 1);">1</div>
      <div class="value" onclick="setValue(6, 2);">2</div>
      <div class="value" onclick="setValue(6, 3);">3</div>
      <div class="value" onclick="setValue(6, 4);">4</div>
      <div class="value" onclick="setValue(6, 5);">5</div>
      <div class="value" onclick="setValue(6, 6);">6</div>
      <div class="value" onclick="setValue(6, 7);">7</div>
      <div class="value" onclick="setValue(6, 8);">8</div>
      <div class="value" onclick="setValue(6, 9);">9</div>
      <div class="value" onclick="setValue(6, 10);">10</div>
    </div>
  </div>
  <div class="area" style="display: none;">
    <h3>Friends</h3>
    <div class="values">
      <div class="value" onclick="setValue(7, 1);">1</div>
      <div class="value" onclick="setValue(7, 2);">2</div>
      <div class="value" onclick="setValue(7, 3);">3</div>
      <div class="value" onclick="setValue(7, 4);">4</div>
      <div class="value" onclick="setValue(7, 5);">5</div>
      <div class="value" onclick="setValue(7, 6);">6</div>
      <div class="value" onclick="setValue(7, 7);">7</div>
      <div class="value" onclick="setValue(7, 8);">8</div>
      <div class="value" onclick="setValue(7, 9);">9</div>
      <div class="value" onclick="setValue(7, 10);">10</div>
    </div>
  </div>
  
  <div class="area" style="display: none;">
    <h3>All done!</h3>
  </div>
</div>
<div id="chartdiv"></div>

/* Imports */
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

/* Chart code */
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

let chart = am4core.create("chartdiv", am4charts.RadarChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.data = [ {
  "category": "Health",
  "value": 0,
  "color": chart.colors.next()
}, {
  "category": "Career",
  "value": 0,
  "color": chart.colors.next()
}, {
  "category": "Love",
  "value": 0,
  "color": chart.colors.next()
}, {
  "category": "Spirituality",
  "value": 0,
  "color": chart.colors.next()
}, {
  "category": "Family",
  "value": 0,
  "color": chart.colors.next()
}, {
  "category": "Money",
  "value": 0,
  "color": chart.colors.next()
}, {
  "category": "Fun",
  "value": 0,
  "color": chart.colors.next()
}, {
  "category": "Friends",
  "value": 0,
  "color": chart.colors.next()
} ];

chart.padding(20, 20, 20, 20);

let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.labels.template.location = 0.5;
categoryAxis.renderer.tooltipLocation = 0.5;

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.labels.template.disabled = true;
valueAxis.min = 0;
valueAxis.max = 10;
valueAxis.renderer.minGridDistance = 10;

let series = chart.series.push(new am4charts.RadarColumnSeries());
series.columns.template.tooltipText = "{categoryX}: {valueY.value}";
series.columns.template.width = am4core.percent(100);
series.columns.template.strokeWidth = 0;
series.columns.template.column.propertyFields.fill = "color";
series.dataFields.categoryX = "category";
series.dataFields.valueY = "value";

/**
 * Sets value for particular index
 */
function setValue(index, value) {
  
  // Set value
  chart.data[index].value = value;
  chart.invalidateRawData();
  
  // Reveal next question
  let areas = document.getElementsByClassName("area");
  for(var i = 0; i < areas.length; i++) {
    areas[i].style.display = (index + 1) === i ? "block" : "none";
  }
  
}