Trainingstime

by Tenobaal

HTML

<head>
  <link href='https://fonts.googleapis.com/css?family=Fira Sans' rel='stylesheet'>
</head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<div id="container" style="width: 400px; height: 400px; margin: 0 auto">
</div>

<script>
times = [
  {
    "exhaustion_max": 0.052,
    "exhaustion_min": 0.032,
    "idx": 1,https://jsfiddle.net/user/fiddles/all/
    "name": "GA",
    "power": 194,
    "time_at": 34860,
    "time_at_per_day": 34860,
    "time_base": 56140,
    "time_ga": 56140
  },
  {
    "exhaustion_max": 0.052,
    "exhaustion_min": 0.032,
    "idx": 4,
    "name": "SS",
    "power": 272,
    "time_at": 7896,
    "time_at_per_day": 7896,
    "time_base": 56140,
    "time_ga": 48240
  },
  {
    "exhaustion_max": 0.052,
    "exhaustion_min": 0.032,
    "idx": 5,
    "name": "EB",
    "power": 290,
    "time_at": 4951,
    "time_at_per_day": 4951,
    "time_base": 56140,
    "time_ga": 51190
  },
  {
    "exhaustion_max": 0.052,
    "exhaustion_min": 0.032,
    "idx": 6,
    "name": "VO2_max_90",
    "power": 311,
    "time_at": 4208,
    "time_at_per_day": 1403,
    "time_base": 56140,
    "time_ga": 45740
  },
  {
    "exhaustion_max": 0.052,
    "exhaustion_min": 0.032,
    "idx": 7,
    "name": "VO2_max",
    "power": 346,
    "time_at": 1171,
    "time_at_per_day": 418.4,
    "time_base": 56140,
    "time_ga": 53240
  }
]
</script>

CSS

body {
	background-color: #1B4152;
}

.container {
  background-color: #1B4152;
}

JavaScript

var time = times[0];

var data_gauge = function (data, chart_container) {
  var colors = ['#A3D3CE', '#EB5D40', '#1B4152'];


  var options = {
    chart: {
      renderTo: chart_container,
      type: 'solidgauge',
      backgroundColor: '#1B4152',
      style: {
        fontFamily: 'Fira Sans'
      }
    },
    title: null,
    //---------------PANE-----------------//
    pane: [{
      startAngle: -140,
      endAngle: 140,
      background: [{ // Track for Move
        outerRadius: '112%',
        innerRadius: '88%',
        backgroundColor: Highcharts.Color(colors[0]).setOpacity(0.3).get(),
        borderWidth: 0,
        shape: 'arc'
      }, { // Track for Exercise
        outerRadius: '87%',
        innerRadius: '63%',
        backgroundColor: Highcharts.Color(colors[1]).setOpacity(0.3).get(),
        borderWidth: 0,
        shape: 'arc'
      }, { // Track for Stand
        outerRadius: '62%',
        innerRadius: '38%',
        backgroundColor: Highcharts.Color(colors[2]).setOpacity(0.3).get(),
        borderWidth: 0,
        shape: 'arc'
      }]
    }, {
      startAngle: -140,
      endAngle: 140,
      size: '95%',
      background: []
    }],

    yAxis: [{
      min: 0,
      max: 25,
      lineWidth: 0,
      tickLength: 20,
      tickWidth: 2,
      tickColor: 'white',
      tickPosition: 'outside',
      minorTickLength: 0,
      tickPositions: [0, 2.9, 6, 10],
      zIndex: 4,
      labels: {
        distance: 30,
        enabled: true,
        x: 0,
        y: 0,
        format: '{value} %',
        style: {
          fontSize: 16
        }
      }
    }],

    plotOptions: {
      solidgauge: {
        borderWidth: '34px',
        dataLabels: {
          enabled: false
        },
        linecap: 'round',
        stickyTracking: false
      }
    },
    series: [{
      name: 'Your Score',
      borderColor: colors[0],
      data: [{
        color: colors[0],
        radius: '100%',
        innerRadius: '100%',
        y: 20
      }],
     ...