Flexmonster - Integration with amCharts 5

Demos

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdn.flexmonster.com/lib/flexmonster.amcharts.js"></script>

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/map.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/worldHigh.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Responsive.js"></script>

<script src="https://cdn.flexmonster.com/data/demos/amcharts-iconPath.js"></script>

<div id="pivot-container"></div>

<div class="demo-box">
  <div class="demo-title">Overall Cheese Interest by Month</div>
  <div id="amcharts-stacked-container" class="chart-container"></div>
</div>

<div class="demo-box">
  <div class="demo-title">Total Cheese Interest by Country</div>
  <div id="amcharts-pictorial-container" class="chart-container"></div>
  <div>Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
</div>

<div class="demo-box">
  <div class="demo-title">Feta Interest by Month</div>
  <div id="amcharts-pie-container" class="chart-container"></div>
</div>

<div class="demo-box">
  <div class="demo-title">Feta Interest by Country</div>
  <div id="amcharts-map-container" class="chart-container"></div>
</div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

.chart-container {
  height: 450px;
}

.demo-box {
  background-color: #fafafa;
  position: relative;
  padding: 40px 30px 30px 30px;
  border: 1px solid #e9e9e9;
  margin-bottom: 20px;
  margin-top: 40px;
}

.demo-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 24px;
}

.fm-custom-cell {
  display: flex !important;
  align-items: center !important;
  font-size: 12px !important;
}

.fm-custom-cell .flag-icon {
  width: 21px !important;
  height: 16px !important;
  margin-left: 0 !important;
  margin-right: 2px !important;
}

#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-expanded .fm-expanded-icon::before,
#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-collapsed .fm-collapsed-icon::before {
  top: -2px;
  height: 16px;
}

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 440,
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  customizeCell: customizeCell,
  report: {
    dataSource: {
      type: "json",
      filename: "https://cdn.flexmonster.com/data/demos/amcharts-demo-data.json",
      mapping: {
        Date: {
          type: "date",
        },
        Country: {
          type: "string",
        },
        id: {
          type: "string",
        },
        CountryCode: {
          type: "property",
          hierarchy: "Country",
        },
        Feta: {
          type: "number",
        },
        Mozzarella: {
          type: "number",
        },
        "Parmigiano-Reggiano": {
          type: "number",
        },
      },
    },
    slice: {
      rows: [{
          uniqueName: "Date.Month",
          filter: {
            exclude: ["date.month.[december]", "date.month.[november]", "date.month.[october]"],
          },
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      columns: [{
        uniqueName: "Country",
      }, ],
      measures: [{
          uniqueName: "Feta",
          aggregation: "sum",
          grandTotalCaption: "Feta",
        },
        {
          uniqueName: "Mozzarella",
          aggregation: "sum",
          grandTotalCaption: "Mozzarella",
        },
        {
          uniqueName: "Parmigiano-Reggiano",
          aggregation: "sum",
          grandTotalCaption: "Parmigiano-Reggiano",
        },
      ],
    },
    options: {
      grid: {
        showHeaders: false,
        showGrandTotals: "rows",
      },
      showAggregationLabels: false,
    },
  },
  reportcomplete: function() {
    pivot.off("reportcomplete");
    createStackedChart();
    createPictorialChart();
    createPieChart();
    createMapChart();
  },
});

let...