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 = {
  "columns": [
    "Leistung",
    "Gleitende Minuten Leistung",
    "Stufenleistung",
    "Trittfrequenz"
  ],
  "data": [
    [
      64,
      88,
      61,
      64
    ],
    [
      62,
      87,
      61,
      63
    ],
    [
      66,
      86,
      61,
      65
    ],
    [
      65,
      85,
      61,
      63
    ],
    [
      62,
      85,
      61,
      62
    ],
    [
      64,
      84,
      61,
      64
    ],
    [
      68,
      84,
      61,
      64
    ],
    [
      66,
      83,
      61,
      63
    ],
    [
      62,
      83,
      61,
      64
    ],
    [
      63,
      82,
      61,
      63
    ],
    [
      68,
      82,
      61,
      65
    ],
    [
      67,
      82,
      61,
      63
    ],
    [
      66,
      81,
      61,
      63
    ],
    [
      66,
      81,
      61,
      61
    ],
    [
      61,
      80,
      61,
      63
    ],
    [
      63,
      79,
      61,
      63
    ],
    [
      65,
      79,
      61,
      63
    ],
    [
      63,
      79,
      61,
      62
    ],
    [
      63,
      78,
      61,
      62
    ],
    [
      66,
      78,
      61,
      63
    ],
    [
      65,
      77,
      61,
      64
    ],
    [
      61,
      77,
      61,
      62
    ],
    [
      63,
      76,
      61,
      60
    ],
    [
      64,
      75,
      61,
      63
    ],
    [
      64,
      75,
      61,
      62
    ],
    [
      66,
      74,
      61,
      63
    ],
    [
      64,
      74,
      61,
      64
    ],
    [
      63,
      74,
      61,
      61
    ],
    [
      65,
      74,
      61,
      64
    ],
    [
      66,
     ...

CSS

body {
  background-color: #1B4152;
}


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

JavaScript

points = [];

var line_charts = function (datas, points, title, chart_container) {
  var series = [];
  var len = datas.length;
  var colors = ['rgba(235,93,64,1)', '#A3D3CE', '#63C4C6'];
  j = 0;
  
  arr = new Array(datas.columns.length)
	for (var j = 0; j < datas.columns.length; j++){
    for (var i = 0; i < datas.data.length; i++) {
      var point = [datas.index[i], datas.data[i][j]];
      arr[j].push(point);
    }
  }
  console.log(arr)
  
  var res = arr;
  for (var i in res){
    series.push({
      name: datas.columns[j],
      type: 'line',
      color: colors[j],
      data: res[i],
      marker: {
      	enabled: false
			},
			tooltip: {
        shared: true,
        headerFormat: 'Time = {point.x}<br>',
        pointFormat: '{series.name} = {point.y} ' + datas.units[j] +  '<br>',
      }
    })
    j+=1;
	}
  console.log(series)
	
    
  var options = {
    chart: {
      renderTo: chart_container,
      turboThreshold: 10000,
      backgroundColor: null,
      zoomType: 'xy',
      style: {
        fontFamily: 'Fira Sans'
      }
    },
    tooltip: {
        crosshairs: true,
        shared: true,
    },
    title: {
      text: title,
      style: {
        fontSize: '24px',
        color: 'white'
      }
    },
    credits: {
        enabled: true,
        text: 'aerotune.com',
        href: false,
    },
    xAxis: {
      labels: {
        style: {
          fontSize: '16px',
          color: 'white'
        }

      }
    },
    yAxis: {
      title: {
        enabled: false,
      },
      labels: {
        enabled: true,
        style: {
          fontSize: '16px',
          color: 'white'
        }
      },
      gridLineColor: '#6f828c'
    },
    legend: {
      enabled: false
    },
    series: series
  };

  var chart = new Highcharts.Chart(options);
};

line_charts(datas, points, 'Energy Consumption', 'chart1');