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 URL_DATA = 'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/master/assets/datasources/fusiontime/examples/online-sales-multi-variate/data.json';

const jsonify = res => res.json();
const dataFetch = fetch(URL_DATA).then(jsonify);
const schema = [{
    name: "Country",
    type: "string"
  },
  {
    name: "Time",
    type: "date",
    format: "%-m/%-d/%Y",
    column: "Time",
    index: 1
  },
  {
    name: "Sales",
    type: "number",
    column: "Sales",
    index: 2
  },
  {
    name: "Quantity",
    type: "number",
    column: "Quantity",
    index: 3
  },
  {
    name: "Shipping Cost",
    type: "number",
    column: "Shipping Cost",
    index: 4
  },
  {
    name: "_row_id",
    type: "string"
  }
];
Promise.all([
  dataFetch
]).then(([
  data
]) => {
  var fusionTable = new FusionCharts.DataStore().createDataTable(data,
    schema);

  new FusionCharts({
    type: 'timeseries',
    renderAt: 'container',
    width: '95%',
    height: 650,
    dataSource: {
      data: fusionTable,
      chart: {
        exportEnabled: 1
      },
      caption: {
        text: 'Global Online Sales of a SuperStore'
      },
      yAxis: [{
          plot: {
            value: 'Quantity'
          },
          title: 'Quantity Value',
          type: 'log',
          base: 2
        },
        {
          plot: {
            value: 'Shipping Cost'
          },
          title: 'Shipping Cost Value',
          type: 'log',
          base: 2
        },
        {
          plot: {
            value: 'Sales'
          },
          title: 'Sales Value',
          type: 'log',
          base: 2
        }
      ]
    }
  }).render();
});