const dataSource = {
chart: {
caption: "Summer Olympics Medal Tally",
subcaption: "By Countries",
yaxisname: "Count of Medals",
numvisibleplot: "16",
labeldisplay: "auto",
theme: "fusion"
},
categories: [
{
category: [
{
label: "USA"
},
{
label: "GB"
},
{
label: "China"
},
{
label: "Russia"
},
{
label: "Germany"
},
{
label: "France"
},
{
label: "Japan"
},
{
label: "Australia"
},
{
label: "Italy"
},
{
label: "Canada"
},
{
label: "South Korea"
},
{
label: "Netherlands"
},
{
label: "Brazil"
},
{
label: "NZ"
},
{
label: "Spain"
},
{
label: "Hungary"
},
{
label: "Kenya"
},
{
label: "Jamaica"
},
{
label: "Cuba"
},
{
label: "Croatia"
}
]
}
],
dataset: [
{
seriesname: "2017",
data: [
{
value: "121"
},
{
value: "70"
},
{
value: "67"
},
{
value: "55"
},
{
value: "42"
},
{
value: "42"
},
{
value: "41"
},
{
value: "29"
},
{
value: "28"
},
{
value: "22"
},
{
value: "21"
},
{
value: "19"
},
{
value: "19"
},
{
value: "18"
},
{
value: "17"
},
{
value: "15"
},
{
value: "13"
},
{
value: "11"
},
{
value: "11"
},
{
value: "10"
}
]
},
{
seriesname: "2016",
data: [
{
value: "123"
},
{
value: "71"
},
{
value: "59"
},
{
value: "52"
},
{
value: "34"
},
{
value: "32"
},
{
value: "29"
},
{
value: "32"
},
{
value: "25"
},
{
value: "21"
},
{
value: "24"
},
{
value: "17"
},
{
value: "20"
},
{
value: "14"
},
{
value: "13"
},
{
value: "16"
},
{
value: "14"
},
{
value: "12"
},
{
value: "11"
},
{
value: "9"
}
]
}
]
};
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "scrollcolumn2d",
renderAt: "chart-container",
width: "100%",
height: "400",
dataFormat: "json",
dataSource
}).render();
document.getElementById("topScroll").addEventListener("click", function() {
document
.getElementById("topScroll")
.classList.remove("btn-outline-primary");
document
.getElementById("bottomScroll")
.classList.remove("btn-primary-grad");
document
.getElementById("bottomScroll")
.classList.add("btn-outline-primary");
document.getElementById("topScroll").classList.add("btn-primary-grad");
myChart.setChartAttribute("scrollPosition", "top");
});
document.getElementById("bottomScroll").addEventListener("click", function() {
document.getElementById("topScroll").classList.remove("btn-primary-grad");
document
.getElementById("bottomScroll")
.classList.remove("btn-outline-primary");
document.getElementById("topScroll").classList.add("btn-outline-primary");
document.getElementById("bottomScroll").classList.add("btn-primary-grad");
myChart.setChartAttribute("scrollPosition", "bottom");
});
});