Accounts relations Directed Chord

by b_g_v

HTML

<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/flow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

<div id="chartdiv"></div>

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

CSS

#chartdiv {
  width: 100%;
  height: 900px;
}

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){
  var dataJson2 = [];
  dataJson.forEach(function(value,index){
      var item = {"from": value[0], "to": value[1], "value": 2};
      if (index <100)
      dataJson2.push(item);
  });

  am5.ready(function() {

  // Create root element
  // https://www.amcharts.com/docs/v5/getting-started/#Root_element
  var root = am5.Root.new("chartdiv");


  // Set themes
  // https://www.amcharts.com/docs/v5/concepts/themes/
  root.setThemes([
    am5themes_Animated.new(root)
  ]);


  // Create series
  // https://www.amcharts.com/docs/v5/charts/flow-charts/
  var series = root.container.children.push(am5flow.ChordDirected.new(root, {
    startAngle: 80,
    padAngle: 1,
    linkHeadRadius: undefined,
    sourceIdField: "from",
    targetIdField: "to",
    valueField: "value"
  }));

  series.nodes.labels.template.setAll({
    textType: "radial",
    centerX: 0,
    fontSize: 8
  });

  series.links.template.set("fillStyle", "source");


  // Set data
  // https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
  series.data.setAll(dataJson2);


  // Make stuff animate on load
  series.appear(1000, 100);

  }); // end am5.ready()
}