<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");
  });
});