Aerometer

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>


</script>

SCSS

body {
  background-color: #1B4152;
}

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

JavaScript

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: ['GA Week', 'SS Week', 'CP Week', 'VO2 90% Week', 'VO2 Week']
    },

    yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: 'Training time in h'
        }
    },

    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },

    series: [{
        name: 'GA-max',
        data: [3, 3, 3, 3, 3],
        stack: 'male'
    }, {
        name: 'GA-min',
        data: [12, 12, 12, 12, 12],
        stack: 'male'
    }, {
        name: 'Jane',
        data: [0, 1, 1, 1, 1],
        stack: 'female'
    }, {
        name: 'Janet',
        data: [0, 2, 2, 2, 2],
        stack: 'female'
    }]
  }
  var chart = new Highcharts.Chart(options);
};

draw_bar_grouped(12, 'highchart1');