const chartData = {
column: {
chart: {
caption: "App Publishing Trend",
subcaption: "2012-2016",
xaxisname: "Years",
yaxisname: "Total number of apps in store",
formatnumberscale: "1",
plottooltext:
"<b>$dataValue</b> apps were available on <b>$seriesName</b> in $label",
theme: "froala"
},
categories: [
{
category: [
{
label: "2012"
},
{
label: "2013"
},
{
label: "2014"
},
{
label: "2015"
},
{
label: "2016"
}
]
}
],
dataset: [
{
seriesname: "iOS App Store",
data: [
{
value: "125000"
},
{
value: "300000"
},
{
value: "480000"
},
{
value: "800000"
},
{
value: "1100000"
}
]
},
{
seriesname: "Google Play Store",
data: [
{
value: "70000"
},
{
value: "150000"
},
{
value: "350000"
},
{
value: "600000"
},
{
value: "1400000"
}
]
},
{
seriesname: "Amazon AppStore",
data: [
{
value: "10000"
},
{
value: "100000"
},
{
value: "300000"
},
{
value: "600000"
},
{
value: "900000"
}
]
}
]
},
area: {
chart: {
caption: "Twitter Mentions",
yaxisname: "Number of mentions",
numbersuffix: "M",
subcaption: "(iPhone Vs Samsung)",
yaxismaxvalue: "2",
plottooltext:
"$seriesName was mentioned <b>$dataValue</b> times on Twitter in $label",
theme: "froala"
},
categories: [
{
category: [
{
label: "2007"
},
{
label: "2008"
},
{
label: "2009"
},
{
label: "2010"
},
{
label: "2011"
},
{
label: "2012"
},
{
label: "2013"
},
{
label: "2014"
},
{
label: "2015"
}
]
}
],
dataset: [
{
seriesname: "iPhone",
data: [
{
value: "1.90"
},
{
value: "1.94"
},
{
value: "1.69"
},
{
value: "1.66"
},
{
value: "1.43"
},
{
value: "1.97"
},
{
value: "1.78"
},
{
value: "1.58"
},
{
value: "1.55"
}
]
},
{
seriesname: "Samsung",
data: [
{
value: "0.68"
},
{
value: "0.74"
},
{
value: "0.25"
},
{
value: "0.64"
},
{
value: "0.22"
},
{
value: "0.74"
},
{
value: "0.58"
},
{
value: "0.15"
},
{
value: "0.26"
}
]
}
]
},
bubble: {
chart: {
theme: "froala",
caption: "Sales & Profit Analysis",
subcaption: "For Last Quarter",
xaxisminvalue: "0",
xaxismaxvalue: "100",
yaxisminvalue: "0",
yaxismaxvalue: "30000",
xaxisname: "Average Price",
yaxisname: "Units Sold",
plottooltext: "$name : Profit Contribution: $zvalue%",
drawquadrant: "1",
quadrantlabeltl: "Low Price / High Sales",
quadrantlabeltr: "High Price / High Sales",
quadrantlabelbl: "Low Price / Low Sales",
quadrantlabelbr: "High Price / Low Sales",
quadrantxval: "54",
quadrantyval: "12000",
quadrantlinealpha: "50",
quadrantlinethickness: "2"
},
categories: [
{
category: [
{
label: "0",
x: "0"
},
{
label: "$20",
x: "20",
showverticalline: "1"
},
{
label: "$40",
x: "40",
showverticalline: "1"
},
{
label: "$60",
x: "60",
showverticalline: "1"
},
{
label: "$80",
x: "80",
showverticalline: "1"
},
{
label: "$100",
x: "100",
showverticalline: "1"
}
]
}
],
dataset: [
{
data: [
{
x: "80",
y: "15000",
z: "24",
name: "Nike"
},
{
x: "60",
y: "18500",
z: "26",
name: "Adidas"
},
{
x: "50",
y: "19450",
z: "19",
name: "Puma"
},
{
x: "65",
y: "10500",
z: "8",
name: "Fila"
},
{
x: "43",
y: "8750",
z: "5",
name: "Lotto"
},
{
x: "32",
y: "22000",
z: "10",
name: "Reebok"
},
{
x: "44",
y: "13000",
z: "9",
name: "Woodland"
}
]
}
],
trendlines: [
{
line: [
{
startvalue: "20000",
endvalue: "30000",
istrendzone: "1",
color: "#aaaaaa",
alpha: "14"
},
{
startvalue: "10000",
endvalue: "20000",
istrendzone: "1",
color: "#aaaaaa",
alpha: "7"
}
]
}
]
},
doughnut: {
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: "froala"
},
data: [
{
label: "Ice Cream Sandwich",
value: "1000"
},
{
label: "Jelly Bean",
value: "5300"
},
{
label: "Kitkat",
value: "10500"
},
{
label: "Lollipop",
value: "18900"
},
{
label: "Marshmallow",
value: "17904"
}
]
},
sankey: {
chart: {
caption: "Bilateral Trade Volume",
subcaption:
"A Horizontal Sankey with options to configure the flow representation",
theme: "froala",
orientation: "horizontal",
nodelabelposition: "start"
},
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
}
]
},
combination: {
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: "froala"
},
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>",
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",
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"
}
]
}
]
},
chord: {
chart: {
caption: "Different countries Gross Export",
subcaption: "in 2017",
nodelabelposition: "outside",
showlegend: 0,
theme: "froala",
mode: "post",
linkcolorbydominance: "1"
},
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
}
]
},
timeseries: {
data:
"https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/column-line-combination-data.json",
schema:
"https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/column-line-combination-schema.json",
ds: {
chart: {
theme: "froala"
},
caption: {
text: "Web visits & downloads"
},
subcaption: {
text: "since 2015"
},
yaxis: [
{
plot: [
{
value: "Downloads",
type: "column"
},
{
value: "Web Visits",
type: "line"
}
]
}
]
}
}
};
function fetchCheckStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new Error(response.statusText);
error.response = response;
throw error;
}
function loadData(url) {
const option = {
method: "GET",
headers: new Headers(),
mode: "cors",
cache: "default"
};
return fetch(url, option)
.then(fetchCheckStatus)
.then(function (resp) {
const contentType = resp.headers.get("Content-Type");
if (contentType && contentType.indexOf("application/json") !== -1) {
return resp.json();
}
return resp.text();
})
.then(function (data) {
return data;
})
.catch(function () {
console.log("Something went wrong! Please check data/schema files");
});
}
FroalaCharts.ready(function () {
var myChart = new FroalaCharts({
type: "column",
id: "demo-chart",
renderAt: "chart-container",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource: chartData.column
}).render();
});
function updateChart(ev) {
let btns = document.getElementsByTagName("button");
for (i = 0; i < btns.length; i++) {
btns[i].classList.remove("active");
}
if (ev.name === "timeseries") {
Promise.all([
loadData(chartData.timeseries.data),
loadData(chartData.timeseries.schema)
]).then(function (res) {
const data = res[0];
const schema = res[1];
FroalaCharts.items["demo-chart"].chartType("timeseries");
let dataStore = new FroalaCharts.DataStore();
let dataSource = chartData.timeseries.ds;
dataSource.data = dataStore.createDataTable(data, schema);
FroalaCharts.items["demo-chart"].setJSONData(dataSource);
});
} else {
FroalaCharts.items["demo-chart"].chartType(ev.name);
FroalaCharts.items["demo-chart"].setJSONData(chartData[ev.name]);
}
ev.classList.add("active");
}
!
