FusionCharts - Gallery Example - Area 2D Chart

Created using FusionCharts Suite XT - www.fusioncharts.com

by Aniruddha Galgali

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

const jsonify = res => res.json();
//const dataFetch = fetch(URL_DATA).then(jsonify);
const data = [
  [
    "Jan-2011",
    5,
    5
  ],
  [
    "Feb-2011",
    5,
    5
  ],
  [
    "India",
    "Mar-2011",
    5,
    5
  ]
]

const nullDataFetch = [

]
//const schemaFetch = fetch(URL_SCHEMA).then(jsonify);
const schema = [{
    "name": "Time",
    "type": "date",
    "format": "%b-%Y"
  },
  {
    "name": "Feature A",
    "type": "number"
  },
  {
    "name": "Feature B",
    "type": "number"
  }
]

Promise.all([
  data,
  schema
]).then(([
  data,
  schema
]) => {
  var fusionTable = new FusionCharts.DataStore().createDataTable(data,
    schema);

  new FusionCharts({
    type: 'timeseries',
    renderAt: 'container',
    width: '95%',
    height: 650,
    dataSource: {
      subcaption: {
        text: "Subcaption"
      },
      yAxis: [{
        plot: [{
          type: "area",
          style: {
            //"line.null": { } //SVGStyle | String,
          }
        }],
        showGridband: true,
        connectNullData: true
      }],
      datamarker: [{
          value: "Interest Rate",
          time: "Jan-2000",
          identifier: "H",
          timeformat: "%b-%Y",
          tooltext: "As a part of credit control program, under the leadership of Paul Volcker, the Fed tightened the money supply, allowing the federal fund rates to approach 20 percent."
        },
        {
          value: "Interest Rate",
          time: "Jan-2011",
          identifier: "L",
          timeformat: "%b-%Y",
          tooltext: "The FED eases off the monetary brakes, allowing interest rates to fall and the economy to begin a strong...