<div class="container-fluid">
<div class="card shadow mt-3 mb-3 mr-2 ml-2">
<div class="card-body">
<div id="chart-container"></div>
<div class="row mt-2 mb-2">
<div id="control-parent" class="col">
<p id="control-parent-msg" class="mr-1"><b>Caption's position: </b></p>
<label id="option-label" class="pr-1"><input type="radio" name="position" value="left" id="radio1" checked>
Left</label>
<label id="option-label" class="pr-1"><input type="radio" name="position" value="center" id="radio2">
Center</label>
<label id="option-label" class="pr-1"><input type="radio" name="position" value="right" id="radio3">
Right</label>
</div>
<div id="control-parent1" class="col">
<p id="control-parent-msg" class="mr-1"><b>Sub-Caption's position: </b></p>
<label id="option-label" class="pr-1"><input type="radio" name="position1" value="left" id="radio11" checked>
Left</label>
<label id="option-label" class="pr-1"><input type="radio" name="position1" value="center" id="radio12">
Center</label>
<label id="option-label" class="pr-1"><input type="radio" name="position1" value="right" id="radio13">
Right</label>
</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;
}
*:focus {
outline: none;
}
#chart-container {
width: 100%;
height: 450px;
}
#control-parent,
#control-parent1 {
color: black;
display: flex;
justify-content: center;
}
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(resp => {
const contentType = resp.headers.get("Content-Type");
if (contentType && contentType.indexOf("application/json") !== -1) {
return resp.json();
}
return resp.text();
})
.then(data => data)
.catch(() => {
console.log("Something went wrong! Please check data/schema files");
});
}
Promise.all([
loadData(
"https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/data.json"
),
loadData(
"https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/schema.json"
)
]).then(res => {
var data = res[0];
var schema = res[1];
var dataStore = new FusionCharts.DataStore(data, schema);
var invalid_data = {};
var valid_data = {
caption: {
text: "Sales Analysis for a Store in U.S"
},
subcaption: {
text: "Grocery store sales analysis (2016-2019)"
},
yAxis: [
{
plot: {
value: "Grocery Sales Value",
type: "column"
},
format: {
prefix: "$"
},
title: "Sale Value"
}
],
data: dataStore.getDataTable()
};
var myChart = new FusionCharts({
type: "timeseries",
id: "captionPosition",
renderAt: "chart-container",
width: "100%",
height: 450,
id: "chart1",
dataFormat: "json",
dataSource: valid_data
}).render();
document.getElementById("radio2").addEventListener("click", function() {
valid_data.caption.position = "center";
myChart.setChartData(valid_data, "json");
});
document.getElementById("radio3").addEventListener("click", function() {
valid_data.caption.position = "right";
myChart.setChartData(valid_data, "json");
});
document.getElementById("radio1").addEventListener("click", function() {
valid_data.caption.position = "left";
myChart.setChartData(valid_data, "json");
});
document.getElementById("radio12").addEventListener("click", function() {
valid_data.subcaption.position = "center";
myChart.setChartData(valid_data, "json");
});
document.getElementById("radio13").addEventListener("click", function() {
valid_data.subcaption.position = "right";
myChart.setChartData(valid_data, "json");
});
document.getElementById("radio11").addEventListener("click", function() {
valid_data.subcaption.position = "left";
myChart.setChartData(valid_data, "json");
});
});