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