FusionCharts - Gallery Example - Area 2D Chart

Created using FusionCharts Suite XT - www.fusioncharts.com

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<div id="container">FusionCharts will render here</div>

JavaScript

const DATA = [
  ["2020-09-29 05:24:42", 803],
  ["2020-09-29 05:24:42", 803],
  ["2020-09-29 05:24:42", 802],
  ["2020-09-29 05:24:42", 803],
  ["2020-09-29 05:24:42", 803],
  ["2020-09-29 05:24:42", 803],
  ["2020-09-29 05:24:42", 803],
  ["2020-09-29 05:24:42", 803],
  ["2020-09-29 05:24:43", 803],
  ["2020-09-29 05:24:43", 803],
  ["2020-09-29 05:24:43", 803],
  ["2020-09-29 05:24:43", 803],
  ["2020-09-29 05:24:43", 803],
  ["2020-09-29 05:24:43", 803],
  ["2020-09-29 05:24:43", 803],
  ["2020-09-29 05:24:43", 803],
  ["2020-09-29 05:24:43", 803],
  ["2020-09-29 05:24:43", 803],
  ["2020-09-29 05:24:44", 803],
  ["2020-09-29 05:24:44", 803],
  ["2020-09-29 05:24:44", 803],
  ["2020-09-29 05:24:44", 803]
];
const SCHEMA = [{
    name: "Time",
    type: "date",
    format: "%Y-%m-%d %I:%M:%S"
  },
  {
    name: "Products",
    type: "number"
  }
];

var fusionTable = new FusionCharts.DataStore().createDataTable(DATA, SCHEMA);

new FusionCharts({
  type: 'timeseries',
  renderAt: 'container',
  width: "90%",
  height: 490,
  dataSource: {
    data: fusionTable,
    chart: {
      "theme": "fusion"
    },
    caption: {
      text: "Products on pallet."
    },
    yAxis: {
      plot: {
        value: "Products",
        connectnulldata: true,
        type: "line"
      },
    }
  }
}).render();