Domestic passenger transport by mode of transport, Norway

by b_g_v

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Chart showing stacked percentage columns, where each column totals 100%,
        and each element value is visualized by giving it a size relative to the
        other elements.
    </p>
</figure>

CSS

#container {
  height: 400px;
}

.highcharts-figure,
.highcharts-data-table table {
  min-width: 310px;
  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;
}

.highcharts-description {
  margin: 0.3rem 10px;
}

JavaScript

const dataSource = 1;
var url = 'http://127.0.0.1/aadmin/users/hce/projects/ukr_refugee_01-fact-checking_02a/data/processors/accounts-1_post_dates_accounts_freqs.json';


(async () => {
  var dataJson = null;
  if(dataSource == 0){
	  const user = 'hce', passwd = 'events12345';
		const headers = new Headers({
      'Authorization': `Basic ${btoa(user + ':' + passwd)}`,
      'Origin':'https://jsfiddle.net'
    });
    var options = {headers: headers, credentials: "include"};
    dataJson = await fetch(url, options).then(response => response.json());
  }else if(dataSource == 1){
    dataJson = await fetch(url).then(response => response.json());
  }else{
    var dataTag = document.getElementById('data').innerHTML;
    dataJson = JSON.parse(dataTag);
  }
  drawChart(dataJson);
})();


function drawChart(dataJson){
  var categories = [], series = [];
  for (var key in dataJson) {
      //var item = {"from": value[0], "to": value[1], "value": 2};
      //if (index <100)
      //  dataJson2.push(item);
      //value = dictionary[key];
      categories.push(key);
  }

  Highcharts.chart('container', {
      chart: {
          type: 'column'
      },
      title: {
          text: 'Accounts data'
      },
      subtitle: {
          text: 'Source: '
      },
      xAxis: {
          categories: ['2019', '2020', '2021']
      },
      yAxis: {
          min: 0,
          title: {
              text: 'Percent'
          }
      },
      tooltip: {
          pointFormat: '<span style="color:{series.color}">{series.name}</span>' +
              ': <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
          shared: true
      },
      plotOptions: {
          column: {
              stacking: 'percent',
              dataLabels: {
                  enabled: true,
                  format: '{point.percentage:.0f}%'
              }
          }
      },
      series: [{
          name: 'Road',
          data: [434, 290, 307]
      }, {
          name: 'Rail',
          data:...