<script language="javascript" type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/3.20.0/fusioncharts.js"></script>
<script language="javascript" type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/resources/css/ext-all.css"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/adapter/ext/ext-base.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/ext-all.js"></script>

FusionCharts.ready(function () {
  var salesChart;

  salesChart = new FusionCharts({
    type: "overlappedColumn2d",
    width: "100%",
    height: "400",
    dataFormat: "json",
    dataSource: {
      chart: {
        caption: "Comparison of public and private sector",
        subCaption: "in 2017",
        xAxisName: "Country",
        yAxisName: "Amount (in USD)",
        showValues: "0",
        theme: "fusion"
      },
      categories: [
        {
          category: [
            {
              label: "Canada"
            },
            {
              label: "America"
            },
            {
              label: "UK"
            }
          ]
        }
      ],
      dataset: [
        {
          seriesname:
            "Healthcare Expenses per capita (in USD) in Public sector",
          data: [
            {
              value: "4125"
            },
            {
              value: "7459"
            },
            {
              value: "3587"
            }
          ]
        },
        {
          seriesname:
            "Healthcare Expenses per capita (in USD) in Private sector",
          data: [
            {
              value: "7895"
            },
            {
              value: "6978"
            },
            {
              value: "4785"
            }
          ]
        }
      ]
    }
  });

  // Using Sencha ext3.4 creating a viewport frame and a panel, render chart in panel
  // when panel div size changes fusion charts no longer recognizes the change in 3.17.0
  new Ext.Viewport({
    layout: "fit",
    items: [
      {
        xtype: "panel",
        title: "Chart Test",
        bodyStyle: "border: 1px solid red", // so you can see the container size
        listeners: {
          // After Ext panel has rendered, render the Fusion Chart in the div (via the id)
          afterrender: function (p) {
            salesChart.render(p.body.id);
          }
        }
      }
    ]
  });
});