Accounts relations Arc

by b_g_v

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/arc-diagram.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

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

<script type="application/json" id="data">
</script>

CSS

#container {
    height: 1000px;
    max-width: 1400px;
    margin: 0 auto;
}

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_accounts_chart_hichchart_network.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){
  dataJson.forEach(function(value,index){
        value.push(1)
  });

  Highcharts.chart('container', {
      title: {
          text: 'Accounts relations'
      },
      accessibility: {
          description: 'Arc diagram chart',
          point: {
              valueDescriptionFormat: 'Connection from {point.from} to ' +
                  '{point.to}.'
          }
      },
      series: [{
          keys: ['from', 'to', 'weight'],
          type: 'arcdiagram',
          name: 'Train connections',
          linkWeight: 1.5,
          centeredLinks: true,
          dataLabels: {
              rotation: 90,
              y: 30,
              verticalAlign: 'top',
              color: 'black',
              padding: 0
          },
          offset: '65%',
          data: dataJson
      }]

  });

}