FusionCharts - Gallery Example - Bar 2D Chart

Created using FusionCharts Suite XT - www.fusioncharts.com

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<!-- Simple implementation of the Bar 2D chart -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

var jsonify = res => res.json();
var dataFetch = fetch('https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/column-line-combination-data.json').then(jsonify);
var schemaFetch = fetch('https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/column-line-combination-schema.json').then(jsonify);

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

  const dataStore = new FusionCharts.DataStore();
  const dataSource = {
    "caption": {
      "text": "Web visits & downloads",
      outputFormat: "%b %y"
    },
    "subcaption": {
      "text": "since 2015"
    },
    "yaxis": [{
      plot: [{
          value: "Downloads",
          type: "column"
        },
        {
          value: "Web Visits",
          type: "column"
        }
      ],
      "title": "",
      "style": {
        "label": {
          'fill-opacity': "0"
        },
        "tick-mark": {
          'stroke-opacity': 0
        }
      }
    }],
    "chart": {
      "style": {
        "canvas": {
          'stroke-opacity': "0"
        }
      }
    }
  };
  dataSource.data = dataStore.createDataTable(data, schema);

  new FusionCharts({
    type: "timeseries",
    renderAt: "chart-container",
    width: "600",
    height: "500",
    dataSource
  }).render();
});