<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;
  } else {
    var error = new Error(response.statusText);
    error.response = response;
    throw error;
  }
}

function loadData(url) {
  var option = {
    method: "GET",
    headers: new Headers(),
    mode: "cors",
    cache: "default"
  };

  return fetch(url, option)
    .then(fetchCheckStatus)
    .then(function (resp) {
      var contentType = resp.headers.get("Content-Type");
      if (contentType && contentType.indexOf("application/json") !== -1) {
        return resp.json();
      } else {
        return resp.text();
      }
    })
    .then(function (data) {
      return data;
    })
    .catch(function (err) {
      console.log("Something went wrong! Please check data/schema files");
    });
}

Promise.all([
  loadData(
    "https://static.fusioncharts.com/qa/FTDemo/4-standard-chart-types/step-line/step-line_data.json"
  ),
  loadData(
    "https://static.fusioncharts.com/qa/FTDemo/4-standard-chart-types/step-line/step-line_schema.json"
  )
]).then((res) => {
  var data = [];

  res[0].forEach((entry, index) => {
    let showEntry1 = index < 2000 || index > 4000;

    let newEntry = [...entry];

    if (showEntry1) {
      newEntry.push("type1");
    } else {
      newEntry.push("type2");
      newEntry[1] = newEntry[1] * -1;
    }
    data.push(newEntry);
  });

  console.log(data);

  var schema = [
    {
      name: "Time",
      type: "date",
      format: "%d/%m/%y %-H:%M"
    },
    {
      name: "Pressure",
      type: "number"
    },
    {
      name: "Type",
      type: "string"
    }
  ];

  var dataStore = new FusionCharts.DataStore();

  new FusionCharts({
    type: "timeseries",
    renderAt: "chart-container",
    width: "100%",
    height: "100%",
    dataSource: {
      series: "Type",
      chart: {
        theme: "fusion",
        palettecolors: ["5d62b5", "f2726f"]
      },
      caption: {
        text: "Weather Report"
      },
      subCaption: {
        text: "Analysis of Atmospheric Pressure"
      },
      yAxis: [
        {
          plot: "Pressure",
          title: "Pressure (in atm)",
          min: "980",
          max: "1040",
          plottype: "area"
        }
      ],
      data: dataStore.createDataTable(data, schema)
    }
  }).render();
});