Basic line

author(s): Torstein Hønsi

by Black Label

HTML

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

<div id="container"></div>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 360px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

var options = {
  chart: {
    renderTo: 'container',
    defaultSeriesType: 'column'
  },
  title: {
    text: 'Wind Turbine Hourly Production'
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: 'kWh'
    }
  },
  series: []
};

/*
 Load the data from the CSV file. This is the contents of the file:

    Apples,Pears,Oranges,Bananas,Plums
    John,8,4,6,5
    Jane,3,4,2,3
    Joe,86,76,79,77
    Janet,3,16,13,15

 */
const data = `Year,Month,Day,Hour,Time,kWh,Savings,Total kWh
2013,02,06,11,11:00,0,0,308135
2013,02,06,11,11:59,15,1.875,308150
2013,02,06,12,12:59,27,3.375,308177
2013,02,06,13,13:59,34,4.25,308211
2013,02,06,14,14:59,32,4,308243`;

// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
  var items = line.split(',');
  if (lineNo !== 0) {
    var x = +new Date(items[1] + '/' + items[2] + '/' + items[0] + ' ' + items[4]),
      kwh = parseFloat(items[5]),
      savings = parseFloat(items[6]);
    if (!isNaN(kwh) && !isNaN(savings)) {
      options.series[0].data.push([x, kwh]);
      options.series[1].data.push([x, savings])
    }
  }

  // the rest of the lines contain data with their name in the first position
  else {
    options.series.push({
      name: items[5],
      data: []
    });

    options.series.push({
      name: items[6],
      data: []
    });

  }

});

Highcharts.chart('container', options)