<div class="container-fluid">
<div class="card shadow mt-2 mb-2 mr-2 ml-2">
<div class="card-body">
<div id="chart-container"></div>
<div class="controller">
<div id="control-wrapper-rel" class="mt-1">
<div id="option-label">Choose legend position:</div>
<select id="option-controller">
<!-- bottom -->
<option value="bottom,start" selected>
Default - Bottom Start
</option>
<option value="bottom,middle">Bottom Middle</option>
<option value="bottom,end">Bottom End</option>
<!-- right -->
<option value="right,start">Right Start</option>
<option value="right,middle">Right Middle</option>
<option value="right,end">Right End</option>
<!-- top -->
<option value="top,start">Top Start</option>
<option value="top,middle">Top Middle</option>
<option value="top,end">Top End</option>
<!-- left -->
<option value="left,start">Left Start</option>
<option value="left,middle">Left Middle</option>
<option value="left,end">Left End</option>
</select>
</div>
</div>
</div>
</div>
</div>
.shadow {
text-align: center !important;
border: 1px solid rgba(0, 0, 0, 0.05) !important;
box-shadow: 0 6px 14px 0 rgba(33, 35, 68, 0.09) !important;
}
#chart-container {
width: 100%;
height: 450px;
}
.control-wrapper {
text-align: center !important;
}
#control-wrapper-abs {
display: none;
}
#option-label {
font-weight: 600;
color: black;
display: inline;
}
#option-controller {
width: 250px;
margin-top: 5px;
box-sizing: border-box;
box-shadow: 0 2px 4px 0 rgba(62, 57, 107, 0.05);
background-image: none;
overflow: hidden;
position: relative;
background-clip: padding-box;
background-color: #ffffff;
border: 1px solid #dadae4;
border-radius: 0.5rem;
color: #434456;
font-size: 15px;
line-height: 1.5;
padding: 1rem 1.5rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfiDBILGzbCYdPeAAAAcElEQVQ4y+3TOQ6AIBBA0e9BwO1WXt0loAfRAgs0KDCVJvypXzOZgdJPqhhQQrtBzcIumJUeZPykEu5RAJ3B7ZXmcEsX2p5mltIU/kJjPEIdnx5om3I5KsATaYibdHrnmdTnAur4iKGRUMel71r6VgcdldK8SuppHgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0xMi0xOFQxMDoyNzo1NCswMTowMAXwHqgAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMTItMThUMTA6Mjc6NTQrMDE6MDB0raYUAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==)
95%/12px no-repeat #fff;
padding-right: 20px;
text-transform: none;
}
#option-controller:focus {
outline: none;
}
#radioDiv1 {
display: inline;
padding: 10px;
}
#control-parent-msg {
display: inline;
padding: 10px;
}
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");
});
}
Promise.all([
loadData(
"https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/column-line-combination-data.json"
),
loadData(
"https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/column-line-combination-schema.json"
)
]).then(function (res) {
var data = res[0];
var schema = res[1];
var dataStore = new FusionCharts.DataStore();
var position = "bottom";
var alignment = "start";
var dataSource = {
chart: {
theme: "fusion"
},
caption: {
text: "Web visits & downloads"
},
subcaption: {
text: "since 2015"
},
legend: {
enabled: "1",
position: position,
alignment: alignment
},
yaxis: [
{
plot: [
{
value: "Downloads",
type: "column"
},
{
value: "Web Visits",
type: "line"
}
]
}
]
};
dataSource.data = dataStore.createDataTable(data, schema);
new FusionCharts({
type: "timeseries",
id: "demo-chart",
renderAt: "chart-container",
width: "100%",
height: "100%",
dataSource: dataSource
}).render();
document
.getElementById("option-controller")
.addEventListener("change", function () {
const legendConfig = this.value.split(",");
dataSource.legend.position = legendConfig[0];
dataSource.legend.alignment = legendConfig[1];
FusionCharts.items["demo-chart"].setJSONData(dataSource);
});
});