Chord Data Plot Events
by FusionCharts
HTML
<script src="https://cdn.fusioncharts.com/fusioncharts/develop/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div style="width: 600px; margin: auto;">
<div style="width: 600px; height: 400px; display: block;" id="chart-container12"></div>
<label id="fc12-event-label" class="text-center"></label>
</div>
CSS
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
html {
font-family: 'Source Sans Pro', sans-serif;
}
JavaScript
var labelElem = document.getElementById("fc12-event-label");
var fc12chart = new FusionCharts({
type: "chord",
renderAt: "chart-container12",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource: {
chart: {
caption: "Different countries Gross Export",
subcaption: "in 2017",
nodelabelposition: "outside",
showlegend: 0,
theme: "fusion",
mode: "post",
linkcolorbydominance: "1",
animation: "0",
},
nodes: [{
label: "India",
},
{
label: "Canada",
},
{
label: "USA",
},
{
label: "China",
},
{
label: "UK",
},
{
label: "UAE",
},
],
links: [{
from: "India",
to: "Canada",
value: 3040000000,
},
{
from: "India",
to: "USA",
value: 46500000000,
},
{
from: "India",
to: "China",
value: 12700000000,
},
{
from: "India",
to: "UK",
value: 8860000000,
},
{
from: "India",
to: "UAE",
value: 27500000000,
},
{
from: "Canada",
to: "India",
value: 24490000000,
},
{
from: "Canada",
to: "USA",
value: 310000000000,
},
{
from: "Canada",
to: "China",
value: 18300000000,
},
{
from: "Canada",
to: "UK",
value: 9320000000,
},
{
from: "Canada",
to: "UAE",
value: 1830000000,
},
{
from: "USA",
to: "India",
value: 24100000000,
},
{
from: "USA",
to: "Canada",
value: 277000000000,
},
{
from: "USA",
to: "China",
value: 132000000000,
},
{
from: "USA",
to: "UK",
value: 53600000000,
},
{
from: "USA",
...