Energy Consumption

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 = {
  "ffshgr": {
    "0": 8.5,
    "10": 11.9,
    "20": 15.2,
    "30": 18.5,
    "40": 21.7,
    "50": 24.9,
    "60": 28.1,
    "70": 31.2,
    "80": 34.2,
    "90": 37.1,
    "100": 39.9,
    "110": 42.7,
    "120": 45.3,
    "130": 47.8,
    "140": 50.1,
    "150": 52.2,
    "160": 54.1,
    "170": 55.7,
    "180": 57,
    "190": 57.8,
    "200": 58.1,
    "210": 57.7,
    "220": 56.5,
    "230": 54.2,
    "240": 50.4,
    "250": 44.6,
    "260": 36,
    "270": 23.3,
    "280": 4.7,
    "290": 3,
    "300": 3.1,
    "310": 3.2,
    "320": 3.3,
    "330": 3.4,
    "340": 3.5,
    "350": 3.6,
    "360": 3.6,
    "370": 3.6,
    "380": 3.6,
    "390": 3.6,
    "400": 3.6,
    "410": 3.6,
    "420": 3.6,
    "430": 3.6,
    "440": 3.6,
    "450": 3.6,
    "460": 3.6,
    "470": 3.6,
    "480": 3.6,
    "490": 3.6
  },
  "khhgr": {
    "0": 0.5,
    "10": 0.9,
    "20": 1.4,
    "30": 2,
    "40": 2.7,
    "50": 3.5,
    "60": 4.5,
    "70": 5.7,
    "80": 7,
    "90": 8.5,
    "100": 10.2,
    "110": 12.2,
    "120": 14.5,
    "130": 17.2,
    "140": 20.3,
    "150": 23.9,
    "160": 28,
    "170": 32.9,
    "180": 38.7,
    "190": 45.5,
    "200": 53.7,
    "210": 63.5,
    "220": 75.5,
    "230": 90.4,
    "240": 108.9,
    "250": 132.5,
    "260": 163.1,
    "270": 203.8,
    "280": 259.6,
    "290": 272.7,
    "300": 281.4,
    "310": 290.1,
    "320": 298.7,
    "330": 307.4,
    "340": 316.1,
    "350": 324.7,
    "360": 324.7,
    "370": 324.7,
    "380": 324.7,
    "390": 324.7,
    "400": 324.7,
    "410": 324.7,
    "420": 324.7,
    "430": 324.7,
    "440": 324.7,
    "450": 324.7,
    "460": 324.7,
    "470": 324.7,
   ...

CSS

body {
  background-color: #1B4152;
}


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

JavaScript

points = [];

const toNumericPairs = input => {
    const entries = Object.entries(input);
    return entries.map(entry => Object.assign(entry, { 0: +entry[0] }));
}


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;
  for (var i in datas){
  	console.log(i);
  	series.push({
      name: i,
      type: 'line',
      color: colors[j],
      data: toNumericPairs(datas[i]),
      marker: {
      	enabled: false
			},
      tooltip: {
        shared: true,
        headerFormat: 'Power = {point.x} W<br>',
        pointFormat: i + ' = {point.y} g<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: {
         formatter: function () {
          return this.value + ' g'
        },
        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');