Highcharts Demo

author(s): Torstein Hønsi

by Bjolja

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgit.com/laff/technical-indicators/master/technical-indicators.src.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<table id="datatable">
  <thead>
    <tr>
      <th></th>
      <th>Sun of the sky</th>
      <th>Sky of the sun</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>2015</th>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <th>2016</th>
      <td>2</td>
      <td>0</td>
    </tr>
    <tr>
      <th>2017</th>
      <td>5</td>
      <td>11</td>
    </tr>
    <tr>
      <th>2018</th>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <th>2019</th>
      <td>2</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

JavaScript

var categories = [];
var table = document.getElementById('datatable');
var categoriesHeaders = table.querySelectorAll("tbody tr th");
for (var i = 0; i < categoriesHeaders.length; i++) {
  categories.push(categoriesHeaders[i].innerHTML);
}

var seriesHeaders = [];
var seriesColumns = table.querySelectorAll("thead tr th");
for (var i = 1; i < seriesColumns.length; i++) {
  seriesHeaders.push(seriesColumns[i].innerHTML);
}


console.log(categories);

var series = [{
  name: seriesHeaders[0],
  data: [3, 2, 5, 1, 2]
}, {
  name: seriesHeaders[1],
  data: [4, 0, 11, 1, 4]
}];

var chart_linear = Highcharts.chart('container', {
  series: series,
  chart: {
    type: 'column'
  },
  title: {
    text: 'Near accidents per year'
  },
  xAxis: {
    categories: categories,
     title: {
      text: 'Year'
    }
  },
  yAxis: {
    allowDecimals: false,
    title: {
      text: 'Reports'
    }
  }
});