const stackedbar2dData = {
chart: {
caption: "Split of visitors by Channels & Gender",
placevaluesinside: "1",
showvalues: "0",
plottooltext: "<b>$dataValue</b> $seriesName visitors",
theme: "accessibility",
usePattern: "1",
showPlotBorder: 1
},
categories: [
{
category: [
{
label: "Organic"
},
{
label: "Offline Stores"
},
{
label: "Email Campaigns"
},
{
label: "Social Events"
},
{
label: "Paid Channels"
}
]
}
],
dataset: [
{
seriesname: "Male",
data: [
{
value: "17000"
},
{
value: "19500"
},
{
value: "12500"
},
{
value: "14500"
},
{
value: "17500"
}
]
},
{
seriesname: "Female",
patternType: "circle",
data: [
{
value: "25400"
},
{
value: "29800"
},
{
value: "21800"
},
{
value: "19500"
},
{
value: "21200"
}
]
}
]
};
const column2dData = {
chart: {
caption: "Countries With Most Oil Reserves [2017-18]",
subcaption: "In MMbbl = One Million barrels",
xaxisname: "Country",
yaxisname: "Reserves (MMbbl)",
numbersuffix: "K",
theme: "accessibility",
usePattern: "1",
showPlotBorder: 1
},
data: [
{
label: "Venezuela",
value: "290",
patternAngle: 30
},
{
label: "Saudi",
value: "260",
patternType: "square",
patternAngle: 45,
patternDensity: 5
},
{
label: "Canada",
value: "180",
patternType: "circle",
patternSize: "5px",
patternAngle: 45
},
{
label: "Iran",
value: "140",
patternAngle: 0
},
{
label: "Russia",
value: "115",
patternType: "square"
}
]
};
const mscombidy2dData = {
chart: {
caption: "Revenue, Profits & Number of employees",
drawcrossline: "1",
yaxisname: "Revenue / Profit (in $)",
syaxisname: "Number of employees",
showvalues: "0",
showanchors: "0",
numberprefix: "$",
plothighlighteffect: "fadeout",
theme: "accessibility",
usePattern: "1",
showPlotBorder: "1"
},
categories: [
{
category: [
{
label: "Mar-2012"
},
{
label: "Jun-2012"
},
{
label: "Sept-2012"
},
{
label: "Dec-2012"
},
{
label: "Mar-2013"
},
{
label: "Jun-2013"
},
{
label: "Sept-2013"
},
{
label: "Dec-2013"
},
{
label: "Mar-2014"
},
{
label: "Jun-2014"
},
{
label: "Sept-2014"
},
{
label: "Dec-2014"
},
{
label: "Mar-2015"
},
{
label: "Jun-2015"
},
{
label: "Sept-2015"
},
{
label: "Dec-2015"
},
{
label: "Mar-2016"
},
{
label: "Jun-2016"
},
{
label: "Sept-2016"
},
{
label: "Dec-2016"
},
{
label: "Mar-2017"
},
{
label: "Jun-2017"
}
]
}
],
dataset: [
{
seriesname: "Revenue",
plottooltext: "Revenue in $label : <b>$dataValue</b>",
patternType: "line",
data: [
{
value: "36000"
},
{
value: "22000"
},
{
value: "24000"
},
{
value: "42000"
},
{
value: "35000"
},
{
value: "21000"
},
{
value: "26000"
},
{
value: "28000"
},
{
value: "47000"
},
{
value: "38000"
},
{
value: "29000"
},
{
value: "23000"
},
{
value: "24000"
},
{
value: "42000"
},
{
value: "35000"
},
{
value: "21000"
},
{
value: "26000"
},
{
value: "28000"
},
{
value: "47000"
},
{
value: "38000"
},
{
value: "29000"
},
{
value: "23000"
}
]
},
{
seriesname: "Profit",
plottooltext: "Profit in $label : <b>$dataValue</b>",
renderas: "area",
showvalues: "0",
patternType: "circle",
patternAngle: 0,
patternDensity: 6,
patternSize: 4,
color: "#29c3be",
patternAlpha: 100,
patternBgColor: "#d6f9f8",
patternBgAlpha: 100,
data: [
{
value: "4000"
},
{
value: "5000"
},
{
value: "3000"
},
{
value: "4000"
},
{
value: "1000"
},
{
value: "7000"
},
{
value: "1000"
},
{
value: "4000"
},
{
value: "1000"
},
{
value: "6000"
},
{
value: "2000"
},
{
value: "7000"
},
{
value: "6000"
},
{
value: "8000"
},
{
value: "10000"
},
{
value: "7000"
},
{
value: "8000"
},
{
value: "4000"
},
{
value: "9000"
},
{
value: "6000"
},
{
value: "6000"
},
{
value: "7000"
}
]
},
{
seriesname: "Number of Employees",
parentyaxis: "S",
renderas: "line",
showvalues: "0",
plottooltext: "$value employees",
data: [
{
value: "31"
},
{
value: "25"
},
{
value: "35"
},
{
value: "29"
},
{
value: "25"
},
{
value: "23"
},
{
value: "26"
},
{
value: "25"
},
{
value: "25"
},
{
value: "35"
},
{
value: "20"
},
{
value: "30"
},
{
value: "46"
},
{
value: "34"
},
{
value: "26"
},
{
value: "33"
},
{
value: "46"
},
{
value: "25"
},
{
value: "35"
},
{
value: "28"
},
{
value: "20"
},
{
value: "43"
}
]
}
]
};
const funnelData = {
chart: {
caption: "Website visits",
subcaption: "Purchase - Conversion analysis for last year",
decimals: "1",
showvalues: "1",
plottooltext: "$label: <b>$dataValue</b>",
plotfillalpha: "70",
theme: "accessibility",
streamlineddata: "0",
usePattern: "1",
showPlotBorder: "1"
},
data: [
{
label: "Website Visits",
value: "17362",
patternType: "line",
patternAngle: 305,
patternDensity: 12,
patternSize: 2,
color: "#5d62b5",
patternAlpha: 80
},
{
label: "Downloads",
value: "8039",
patternType: "square",
patternAngle: 0,
patternDensity: 12,
patternSize: 4,
color: "#29c3be",
patternAlpha: 80
},
{
label: "Checked Pricing",
value: "5509",
patternType: "line",
patternAngle: 55,
patternDensity: 6,
patternSize: 2,
color: "#f2726f",
patternAlpha: 80
},
{
label: "Asked for Quotation",
value: "3962",
patternType: "square",
patternAngle: 0,
patternDensity: 6,
patternSize: 4,
color: "#ffc533",
patternAlpha: 80
},
{
label: "Purchased",
value: "2397",
patternType: "line",
patternAngle: 0,
patternDensity: 6,
patternSize: 4,
color: "#62b58f",
patternAlpha: 30
}
]
};
const doughnut2dData = {
chart: {
caption: "Android Distribution for our app",
subcaption: "For all users in 2017",
showpercentvalues: "1",
defaultcenterlabel: "Android Distribution",
aligncaptionwithcanvas: "0",
captionpadding: "0",
decimals: "1",
plottooltext:
"<b>$percentValue</b> of our Android users are on <b>$label</b>",
centerlabel: "# Users: $value",
theme: "accessibility",
usePattern: "1",
showPlotBorder: "1"
},
data: [
{
label: "Ice Cream Sandwich",
value: "1000",
patternType: "line",
patternAngle: 40,
patternDensity: 6,
patternSize: 2,
color: "#5d62b5",
patternAlpha: 70,
patternBgColor: "#3c3f7a",
patternBgAlpha: 100
},
{
label: "Jelly Bean",
value: "5300",
patternType: "square",
patternAngle: 0,
patternDensity: 6,
patternSize: 4,
color: "#1b8582",
patternAlpha: 50,
patternBgColor: "#29c3be",
patternBgAlpha: 100
},
{
label: "Kitkat",
value: "10500",
patternType: "line",
patternAngle: 90,
patternDensity: 6,
patternSize: 2,
color: "#b55452",
patternAlpha: 50,
patternBgColor: "#f2726f",
patternBgAlpha: 100
},
{
label: "Lollipop",
value: "18900",
patternType: "circle",
patternAngle: 0,
patternDensity: 6,
patternSize: 4,
color: "#c79a28",
patternAlpha: 50,
patternBgColor: "#ffc533",
patternBgAlpha: 100
},
{
label: "Marshmallow",
value: "17904",
patternType: "line",
patternAngle: 40,
patternDensity: 6,
patternSize: 4,
color: "#509474",
patternAlpha: 70,
patternBgColor: "#62b58f",
patternBgAlpha: 100
}
]
};
FusionCharts.ready(function () {
var myChart = new FusionCharts({
type: "stackedbar2d",
id: "demo-chart",
renderAt: "chart-container",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource: stackedbar2dData
}).render();
});
var chartWrapperElem = document.getElementById("chart-wrapper");
function updateChart(ev) {
let btns = document.getElementsByTagName("button");
for (i = 0; i < btns.length; i++) {
btns[i].classList.remove("active");
}
ev.classList.add("active");
let chartData = eval(`${ev.name}Data`);
FusionCharts.items["demo-chart"].chartType(ev.name);
FusionCharts.items["demo-chart"].setChartData(chartData);
}
