Step line chart with time axis

Time-series chart with series plotted as step line.

Loading data for chart...
Choose a theme:

The complete code of the above weather report is given below:

JavaScript
React
Angular
jQuery
Vue
Ember
Svelte
AngularJS
PHP
ASP.NET (C#)
Python
js
Copy
Promise.all([
  loadData(
    "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/step-line-data.json"
  ),
  loadData(
    "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/step-line-schema.json"
  )
]).then(function(res) {
  const data = res[0];
  const schema = res[1];

  const dataStore = new FusionCharts.DataStore();
  const dataSource = {
    chart: {},
    caption: {
      text: "Weather Report"
    },
    subcaption: {
      text: "Analysis of Atmospheric Pressure"
    },
    yaxis: [
      {
        plot: "Pressure",
        title: "Pressure (in atm)",
        min: "980",
        max: "1040",
        plottype: "step-line"
      }
    ]
  };
  dataSource.data = dataStore.createDataTable(data, schema);

  new FusionCharts({
    type: "timeseries",
    renderAt: "chart-container",
    width: "100%",
    height: "500",
    dataSource: dataSource
  }).render();
});
html
Copy
<div id="chart-container"></div>