const dataSource = {
chart: {
caption: "Different Countries by Gross Export",
subCaption: "In 2017",
theme: "fusion",
nodelabelposition: "outside",
showLegend: 0,
legendPosition: "right",
nodeThickness: 15
},
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",
to: "UAE",
value: 19900000000
},
{
from: "China",
to: "India",
value: 68100000000
},
{
from: "China",
to: "Canada",
value: 51900000000
},
{
from: "China",
to: "USA",
value: 480000000000
},
{
from: "China",
to: "UK",
value: 56800000000
},
{
from: "China",
to: "UAE",
value: 45800000000
},
{
from: "UK",
to: "Canada",
value: 62400000000
},
{
from: "UK",
to: "USA",
value: 5780000000
},
{
from: "UK",
to: "India",
value: 518000000
},
{
from: "UK",
to: "China",
value: 21200000000
},
{
from: "UK",
to: "UAE",
value: 9270000000
},
{
from: "UAE",
to: "India",
value: 20500000000
},
{
from: "UAE",
to: "Canada",
value: 299000000
},
{
from: "UAE",
to: "USA",
value: 7470000000
},
{
from: "UAE",
to: "China",
value: 1160000000
},
{
from: "UAE",
to: "UK",
value: 3550000000
}
]
};
FusionCharts.ready(function() {
const demoChart = new FusionCharts({
type: "chord",
renderAt: "chart-container",
id: "chord-demo-chart",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource
}).render();
});
const handler = {
switchTheme: function(val) {
let fusionElem = document.getElementById("fusion-theme-switcher");
let gammelElem = document.getElementById("gammel-theme-switcher");
let candyElem = document.getElementById("candy-theme-switcher");
let umberElem = document.getElementById("umber-theme-switcher");
fusionElem.classList.remove("btn-selected");
gammelElem.classList.remove("btn-selected");
candyElem.classList.remove("btn-selected");
umberElem.classList.remove("btn-selected");
if (val === "fusion") {
fusionElem.classList.add("btn-selected");
} else if (val === "gammel") {
gammelElem.classList.add("btn-selected");
} else if (val === "candy") {
candyElem.classList.add("btn-selected");
} else if (val === "umber") {
umberElem.classList.add("btn-selected");
}
FusionCharts.items["chord-demo-chart"].setChartAttribute("theme", val);
},
legendVisibility: function(val) {
let hideLegendElem = document.getElementById("hide-legend-btn");
let showLegendElem = document.getElementById("show-legend-btn");
hideLegendElem.classList.remove("btn-selected");
showLegendElem.classList.remove("btn-selected");
if(val === 0) {
hideLegendElem.classList.add("btn-selected");
} else if(val === 1) {
showLegendElem.classList.add("btn-selected");
}
FusionCharts.items["chord-demo-chart"].setChartAttribute("showLegend", val);
},
legendPosition: function(val) {
let rightLegendElem = document.getElementById("right-legend-btn");
let bottomLegendElem = document.getElementById("bottom-legend-btn");
rightLegendElem.classList.remove("btn-selected");
bottomLegendElem.classList.remove("btn-selected");
if(val === "right") {
rightLegendElem.classList.add("btn-selected");
} else if(val === "bottom") {
bottomLegendElem.classList.add("btn-selected");
}
FusionCharts.items["chord-demo-chart"].setChartAttribute("legendPosition", val);
},
nodeLabelPosition: function(val) {
let outsideLabelElem = document.getElementById("outside-lblposition-btn");
let tangentialLabelElem = document.getElementById("tangential-lblposition-btn");
let insideLabelElem = document.getElementById("inside-lblposition-btn");
outsideLabelElem.classList.remove("btn-selected");
tangentialLabelElem.classList.remove("btn-selected");
insideLabelElem.classList.remove("btn-selected");
if(val === "outside") {
outsideLabelElem.classList.add("btn-selected");
} else if(val === "tangential") {
tangentialLabelElem.classList.add("btn-selected");
} else if(val === "inside") {
insideLabelElem.classList.add("btn-selected");
}
FusionCharts.items["chord-demo-chart"].setChartAttribute("nodeLabelPosition", val);
},
changeMode: function(val) {
let preElem = document.getElementById("pre-mode-btn");
let postElem = document.getElementById("post-mode-btn");
preElem.classList.remove("btn-selected");
postElem.classList.remove("btn-selected");
if(val === "pre") {
preElem.classList.add("btn-selected");
} else if(val === "post") {
postElem.classList.add("btn-selected");
}
FusionCharts.items["chord-demo-chart"].setChartAttribute("mode", val);
},
linkColorMode: function(val) {
let dominantElem = document.getElementById("dominant-colormode-btn");
let subservientElem = document.getElementById("subservient-colormode-btn");
dominantElem.classList.remove("btn-selected");
subservientElem.classList.remove("subservientElem");
if(val === 1) {
dominantElem.classList.add("btn-selected");
} else if(val === 0) {
subservientElem.classList.add("subservientElem");
}
FusionCharts.items["chord-demo-chart"].setChartAttribute("linkColorByDominance", val);
}
};