ramp power

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>
datas = {
	"xAxis": {
  	"name": "Time",
    "tickInterval": 120,
  },
  "data": {
    
  },
  "units": {
    "cadence": "1/min",
    "heart rate": "1/min",
    "power": "W",
    "power minute rolling": "W",
    "power of step": "W"
  }
}
</script>

CSS

body {
  background-color: #1B4152;
}


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

JavaScript

var colors = [
  '#EB5D40',
  '#FAF19B',
  '#df8257',
  '#45B384',
  '#B2CDCD',
  '#BBD043'
];

var line_charts2 = function (datas, chart_container) {
  var series = [];
  var plotBands = [];
  var j = 0;

  for (var i in datas.data) {
    series.push({
      name: i,
      type: 'line',
      color: colors[j],
      data: datas.data[i],
      marker: {
        enabled: false
      },

   })
    j += 1;
  }

  var options = {
    chart: {
      renderTo: chart_container,
      turboThreshold: 10000,
      backgroundColor: null,
      zoomType: 'xy',
      style: {
        fontFamily: 'Fira Sans'
      }
    },
    tooltip: {
      formatter: function () {
        return this.points.reduce(function (s, point) {
          return s + '<br/>' + point.series.name + ': ' +
            point.y + ' ' + datas.units[point.series.name];
        }, '<b>' + datas.xAxis.name + ": " + this.x + '</b>');
      },
      crosshairs: true,
      shared: true,
    },
    credits: {
      enabled: true,
      text: 'aerotune.com',
      href: false,
    },
    xAxis: {
    	tickInterval: datas.xAxis.tickIntervall,
      plotBands: plotBands,
      labels: {
        formatter: function () {
          return this.value
        },
        style: {
          fontSize: '16px',
          color: 'white'
        }

      }
    },
    yAxis: {
      title: {
        enabled: false,
      },
      labels: {
        formatter: function () {
          return this.value
        },
        enabled: true,
        style: {
          fontSize: '16px',
          color: 'white'
        }
      },
      gridLineColor: '#6f828c'
    },
    legend: {
      enabled: true,
      backgroundColor: 'rgba(255,255,255,0.1)',
      layout: 'vertical',
      align: 'left',
      verticalAlign: 'top',
      floating: true,
      itemDistance: 40,
      x: 70,
      y: 10,
      itemStyle: {
        fontSize: '12px',
        color: 'white',
      }
    },
    series: series
  };

  var chart = new...