Powerbonus

S. Schluricke

by Tenobaal

HTML

<head>
  <link href='https://fonts.googleapis.com/css?family=Fira Sans' rel='stylesheet'>
</head>
<body>

  <div id="chart1" style="height: 400px; margin-top: 1em"></div>

	<script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/annotations.js"></script>
</body>

<script>
xArr = [ 0.2, 0.21, 0.22, 0.23, 0.24, 0.25, 0.26, 0.27, 0.28, 0.29, 0.30 ];

yArrTime = [ "04:36:29", "04:40:36", "04:44:36", "04:48:28", "04:52:14", "04:55:54", "04:59:29", "05:02:58", "05:06:22", "05:09:41", "05:12:56"];

yArrRelative = [ 1.009, 1.007, 1.005, 1.004, 1.002, 1, 0.998, 0.996, 0.994, 0.993, 0.991 ];

</script>

CSS

#chart1 {
	max-width: 800px;
	margin: 0 auto;
  background-color: #1B4152;
}

JavaScript

var yTime = "1:00:00";
var yTimeDiff = "0:02:00";

var timeToSeconds = function(timeStr){
	var timeArr = timeStr.split(':').reverse();
  var seconds = 0;
	for (var i = 0; i < timeArr.length; i++) {
    seconds += timeArr[i] * Math.pow(60,i);
	}
  return seconds; 
}

var stackedBar = function (yTime, yTimeDiff, chart_container) {
		
    var yTimeRelative = 1;
    var yBonusRelative = timeToSeconds(yTimeDiff) / timeToSeconds(yTime);
    
    var ymin = 0.5;
    var ymax = 1 + yBonusRelative;
    
    console.log(yBonusRelative);
    
    var pointTime = {
    	name: yTime,
      x: 1,
      y: 1
    };
    
		var pointBonus = {
    	name: yTimeDiff,
      x: 1,
      y: yBonusRelative
    };
    var options = {
        chart: {
            renderTo: chart_container,
            type: 'column',
            backgroundColor: null,
            style: {
                fontFamily: 'Fira Sans'
            }
        },
        title: {
        	text: ""
        },
        xAxis: {
						visibel: false
        },
        yAxis: {
            min: ymin,
            max: ymax,
            title: {
                enabled: false
            },
            labels: {
                enabled: false,
            },
            gridLineColor: '#6f828c'
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                pointPadding: 0,
                borderWidth: 0,
                groupPadding: 0.1,
                shadow: false,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}',
                    style: {
                        fontSize: '16px',
                        color: 'white',
                        textOutline: '0px',
                        fontWeight: 'normal'
                    }
                }
            }
        },
        series: [{
            name: 'Bonus',
            color: 'rgba(69,179,132,1)',
  ...