Flexmonster - Integration with FusionCharts

Demos

by Flexmonster Pivot Table

HTML

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

<script src="https://cdn.fusioncharts.com/fusioncharts/3.19.0/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/3.19.0/themes/fusioncharts.theme.fusion.js"></script>

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

<div class="demo-box">
  <div class="demo-title">Top Countries by Revenue</div>
  <div id="fusionmap-container"></div>
</div>

<div class="demo-box">
  <div class="demo-title">Top Traffic Sources</div>
  <div id="fusionchart-container"></div>
</div>

<div class="demo-box">
  <div class="demo-title">Revenue per Month</div>
  <div id="fusioncolumn-container"></div>
</div>

CSS

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

.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;
  color: #555;
}

JavaScript

const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 440,
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  report: {
    dataSource: {
      type: "json",
      filename: "data/demos/fusioncharts-demo-data.json",
    },
    slice: {
      rows: [{
        uniqueName: "Country",
      }, ],
      columns: [{
          uniqueName: "Traffic",
        },
        {
          uniqueName: "Source",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [{
          uniqueName: "Revenue",
          formula: 'sum("Sales") * sum("Purchase Cost")',
          individual: true,
          caption: "Revenue",
          format: "currency",
        },
        {
          uniqueName: "Conversion Rate",
          formula: 'sum("Leads") / sum("Clicks") ',
          individual: true,
          caption: "Conversion Rate",
          active: false,
        },
      ],
      sorting: {
        column: {
          type: "desc",
          tuple: ["Traffic.[Referral]"],
          measure: {
            uniqueName: "Revenue",
            aggregation: "none",
          },
        },
      },
      expands: {
        rows: [],
        columns: [{
            tuple: ["Traffic.[Organic]"],
          },
          {
            tuple: ["Traffic.[Paid]"],
          },
        ],
      },
    },
    options: {
      grid: {
        showHeaders: false,
      },
    },
    formats: [{
      name: "",
      thousandsSeparator: ",",
      decimalSeparator: ".",
      decimalPlaces: 2,
    }, {
      name: "currency",
      currencySymbol: "$",
    }],
  },
  reportcomplete: () => {
    pivot.off("reportcomplete");
    createMapChart();
    createDoughnutChart();
    createColumnChart();
  },
});

let mapChart, doughnutChart, columnChart;

const backgroundColor = "#fafafa",
  baseFontSize...