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

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/weekly-binning-on-time-axis_data.json"
  ),
  loadData(
    "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/weekly-binning-on-time-axis_schema.json"
  )
]).then((res) => {
  const data = res[0];
  const schema = res[1];

  const dataStore = new FusionCharts.DataStore(data, schema);

  new FusionCharts({
    type: "timeseries",
    renderAt: "chart-container",
    width: "100%",
    height: "100%",
    dataSource: {
      chart: {
        startOfWeek: 0,
        theme: "fusion"
      },
      caption: {
        text: "Weekly Online Sales of a SuperStore in the US"
      },
      xAxis: {
        plot: "Time",
        binning: {
          year: [],
          month: [],
          day: [],
          week: [2],
          hour: [],
          minute: [],
          second: []
        }
      },
      yAxis: [
        {
          plot: {
            value: "Sales",
            aggregation: "Average"
          }
        }
      ],
      data: dataStore.getDataTable()
    }
  }).render();
});