Trainingstime

S. Schluricke

by Tenobaal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<head>
  <link href='https://fonts.googleapis.com/css?family=Fira Sans' rel='stylesheet'>
</head>
<body>

  <div class="col-xl-3 col-lg-3 col-md-6">
    <h1 class="chart-container">Trainings time</h1>
    <div id="highchart1" class="highcharts-container"></div>
  </div>

	<script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/highcharts-more.js"></script>
</body>

<script>
data = {'sc': ['RE', 'BA', 'FM', 'GA2', 'SS', 'ML', 'TP', 'V90', 'V100'],
 'trainings_zone': ['Recovery',
  'Base',
  'FATmax',
  'Tempo',
  'Sweet_Spot',
  'Maximum_lactate_steady_state',
  'Threshold',
  'VO2max90',
  'VO2max'],
 'power_min': [0.0, 110.0, 120.0, 125.0, 200.0, 210.0, 215.0, 370.0, 405.0],
 'power_max': [110.0, 120.0, 125.0, 200.0, 210.0, 220.0, 225.0, 390.0, 440.0],
 'time_sum': [948.0, 38.0, 37.0, 1684.0, 922.0, 1077.0, 1071.0, 31.0, 123.0],
 'energy_sum': [11.0, 0.0, 0.0, 515.0, 175.0, 249.0, 252.0, 0.0, 6.0],
 'heart_rate_mean': [137.0,
  142.0,
  137.0,
  132.0,
  132.0,
  132.0,
  132.0,
  153.0,
  169.0],
 'cadence_mean': [51.0, 82.0, 88.0, 91.0, 90.0, 90.0, 89.0, 86.0, 93.0],
 'power_mean': [33.0, 115.0, 123.0, 182.0, 205.0, 215.0, 220.0, 381.0, 421.0],
 'torque_mean': [5.0, 14.0, 14.0, 19.0, 22.0, 23.0, 24.0, 43.0, 43.0]}

</script>

SCSS

body {
  background-color: #1B4152;
}

h1 {
  color: white;
  text-align:center
}

JavaScript

var convert_hours = function (hours) {
	if (hours == 0){
  	return ""
  }
  var minutes = Math.round((hours - Math.floor(hours)) * 60)
  if (minutes < 10) {
    minutes = "0" + minutes;
  }
  return Math.floor(hours) + ":" + minutes + " h"
}

const colors = ["#EB5D40", "#FAF19B", "#BBD043", "#45B384", "#64C2C8", "#B2CDCD", "#000000", "#64C4C8", "#D4F6F8", "#97E0E4", "#3CA2A7"];



var draw_bar_grouped = function (data, chart_container) {
  var options = {
    chart: {
      renderTo: chart_container,
      type: 'column',
      backgroundColor: null,
      style: {
        fontFamily: 'Fira Sans'
      }
    },
    title: null,
    xAxis: {
      categories: data.sc,
      labels: {
        enabled: true,
        style: {
          fontSize: '16px',
          color: 'white'
        }
      },
    },
    legend: {
    	enabled: false,
    },
    tooltip: {
        shared: true
    },
    yAxis: {
      allowDecimals: false,
      min: 0,
      gridLineColor: '#6f828c',
      lineColor: '#6f828c',
      title: null,
      labels: {
        formatter: function () {
          return this.value + ' h'
        },
        enabled: false,
        style: {
          fontSize: '16px',
          color: 'white'
        }
      },
      stackLabels: {
        enabled: true,
/*         formatter: function () {
          return convert_hours(this.total);
        }, */
        style: {
          fontSize: '16px',
          color: 'white',
          textOutline: '0px',
          fontWeight: 'normal'
        }
      }
    },
    plotOptions: {
      column: {
        stacking: 'normal'
      },
    },
    series: [
    /* {
      name: 'Time',
      data: data.time_sum,
      stack: 'time',
      color: colors[0],
    },  */
    {
      name: 'Energy',
      data: data.energy_sum,
      stack: 'energy',
      color: colors[1],
    }, {
      name: 'Heart rate',
      data: data.heart_rate_mean,
      stack: 'heart_rate',
      color: colors[2],
    }, {
      name: 'Cadence',
    ...