Power duration curve

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/highcharts-more.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 ];

data =...

CSS

body {
  background-color: #1B4152;
}


#chart1 {
	margin: 0 auto;
  background-color: #1B4152;
}

JavaScript

console.log(data.length)

points = [[240, 300]];

var convert_seconds_to_minutes = function(seconds){
	if (seconds >= 60){
		return seconds / 60 + ' min'
  }
  return seconds + ' s'
}

var crp_chart = function (datas, points, title, chart_container) {
  
  var options = {
    chart: {
      renderTo: chart_container,
      turboThreshold: 10000,
      backgroundColor: null,
      zoomType: 'xy',
      style: {
        fontFamily: 'Fira Sans'
      }
    },
        tooltip: {
        crosshairs: true
    },
    title: {
      text: title,
      style: {
        fontSize: '24px',
        color: 'white'
      }
    },
    credits: {
        enabled: true,
        text: 'aerotune.com',
        href: false,
    },
    xAxis: {
      type: 'logarithmic',
      min: 5,
      tickPositions: [1, 5, 10, 30, 60, 120, 240, 600, 1200, 3600].map(Math.log10),
      labels: {
        formatter: function () {
          return convert_seconds_to_minutes(this.value)
        },
        style: {
          fontSize: '16px',
          color: 'white'
        }

      }
    },
    yAxis: {
      title: {
        enabled: false,
      },
      labels: {
         formatter: function () {
          return this.value + ' W'
        },
        enabled: true,
        style: {
          fontSize: '16px',
          color: 'white'
        }
      },
      gridLineColor: '#6f828c'
    },
    legend: {
      enabled: false
    },
    series: [{
      name: 'Rolling power',
      type: 'line',
      color: 'rgba(100,194,200,1)',
      data: data,
      tooltip: {
        shared: true,
        split: false,
        headerFormat: 'Time = {point.x} s<br>',
        pointFormat: 'Power = {point.y} W'
      }
    },
    {
      name: 'Testing points',
      type: 'scatter',
      color: 'rgba(235,93,64,1)',
      data: points,
      tooltip: {
        shared: true,
        headerFormat: 'Time = {point.x} s<br>',
        pointFormat: '{point.y} W'
      }
    }]
  };

  var chart = new...