const dataSource = {
chart: {
caption: "Bilateral Trade Volume, 2013",
theme: "fusion",
showLegend: 0,
legendPosition: "bottom"
},
nodes: [
{
label: "Netherlands"
},
{
label: "Canada"
},
{
label: "Belgium"
},
{
label: "Italy"
},
{
label: "Mexico"
},
{
label: "Russia"
},
{
label: "Spain"
},
{
label: "South Korea"
},
{
label: "Germany"
},
{
label: "China"
},
{
label: "European Union"
},
{
label: "Japan"
},
{
label: "United Kingdom"
},
{
label: "United States"
},
{
label: "France"
},
{
label: "Hong Kong"
},
{
label: "Switzerland"
},
{
label: "Austria"
},
{
label: "Sweden"
}
],
links: [
{
from: "Netherlands",
to: "European Union",
value: 798744
},
{
from: "Germany",
to: "European Union",
value: 1468990
},
{
from: "European Union",
to: "France",
value: 745931
},
{
from: "European Union",
to: "United States",
value: 660541
},
{
from: "Canada",
to: "United States",
value: 594546
},
{
from: "Belgium",
to: "European Union",
value: 628796
},
{
from: "China",
to: "Hong Kong",
value: 400571
},
{
from: "China",
to: "United States",
value: 526454
},
{
from: "European Union",
to: "United Kingdom",
value: 520318
},
{
from: "China",
to: "European Union",
value: 560536
},
{
from: "Italy",
to: "European Union",
value: 539556
},
{
from: "Mexico",
to: "United States",
value: 492715
},
{
from: "Russia",
to: "European Union",
value: 385778
},
{
from: "Spain",
to: "European Union",
value: 365191
},
{
from: "China",
to: "Japan",
value: 312062
},
{
from: "European Union",
to: "Switzerland",
value: 328609
},
{
from: "South Korea",
to: "China",
value: 229073
},
{
from: "European Union",
to: "Austria",
value: 244913
},
{
from: "Japan",
to: "United States",
value: 206091
},
{
from: "European Union",
to: "Sweden",
value: 204849
},
{
from: "Germany",
to: "United States",
value: 184287
}
]
};
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "sankey",
renderAt: "chart-container",
id: "sankey-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["sankey-demo-chart"].setChartAttribute("theme", val);
},
switchOrientation: function(val) {
let horizontalElem = document.getElementById(
"horizontal-orientation-switcher"
);
let verticalElem = document.getElementById("vertical-orientation-switcher");
horizontalElem.classList.remove("btn-selected");
verticalElem.classList.remove("btn-selected");
if (val === "horizontal") {
horizontalElem.classList.add("btn-selected");
} else if (val === "vertical") {
verticalElem.classList.add("btn-selected");
}
FusionCharts.items["sankey-demo-chart"].setChartAttribute(
"orientation",
val
);
},
legendVisibility: function(val) {
let showElem = document.getElementById("show-legend-btn");
let hideElem = document.getElementById("hide-legend-btn");
showElem.classList.remove("btn-selected");
hideElem.classList.remove("btn-selected");
if (val === 0) {
hideElem.classList.add("btn-selected");
} else if (val === 1) {
showElem.classList.add("btn-selected");
}
FusionCharts.items["sankey-demo-chart"].setChartAttribute(
"showLegend",
val
);
},
legendPosition: function(val) {
let rightElem = document.getElementById("right-legend-btn");
let bottomElem = document.getElementById("bottom-legend-btn");
rightElem.classList.remove("btn-selected");
bottomElem.classList.remove("btn-selected");
if (val === "right") {
rightElem.classList.add("btn-selected");
} else if (val === "bottom") {
bottomElem.classList.add("btn-selected");
}
FusionCharts.items["sankey-demo-chart"].setChartAttribute(
"legendPosition",
val
);
},
nodeLabelPosition: function(val) {
let startPosElem = document.getElementById("start-nodelbl-btn");
let insidePosElem = document.getElementById("inside-nodelbl-btn");
let endPosElem = document.getElementById("end-nodelbl-btn");
startPosElem.classList.remove("btn-selected");
insidePosElem.classList.remove("btn-selected");
endPosElem.classList.remove("btn-selected");
if(val === "start") {
startPosElem.classList.add("btn-selected");
} else if(val === "inside") {
insidePosElem.classList.add("btn-selected");
} else if(val === "end") {
endPosElem.classList.add("btn-selected");
}
FusionCharts.items["sankey-demo-chart"].setChartAttribute(
"nodeLabelPosition",
val
);
},
linkColorMode: function(val) {
let sourceColorElem = document.getElementById("source-color-btn");
let targetColorElem = document.getElementById("target-color-btn");
let blendColorElem = document.getElementById("blend-color-btn");
let customColorElem = document.getElementById("custom-color-btn");
sourceColorElem.classList.remove("btn-selected");
targetColorElem.classList.remove("btn-selected");
blendColorElem.classList.remove("btn-selected");
customColorElem.classList.remove("btn-selected");
if(val === "source") {
sourceColorElem.classList.add("btn-selected");
} else if(val === "target") {
targetColorElem.classList.add("btn-selected");
} else if (val === "blend") {
blendColorElem.classList.add("btn-selected");
} else if (val === "#CCCCCC") {
customColorElem.classList.add("btn-selected");
}
FusionCharts.items["sankey-demo-chart"].setChartAttribute(
"linkColor",
val
);
}
};