Flexmonster - Integration with Highcharts

Demos

by Flexmonster Pivot Table

HTML

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

<script src="https://code.highcharts.com/12.5.0/highcharts.js"></script>
<script src="https://code.highcharts.com/12.5.0/modules/accessibility.js"></script>

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

<div class="demo-box">
  <div class="demo-title">Requests vs Answered Calls</div>
  <div id="highcharts-container"></div>
</div>

<div class="demo-box">
  <div class="demo-title">Revenue vs Support Cost</div>
  <div id="highcharts-column-container"></div>
</div>

<div class="demo-box">
  <div class="demo-title">Customer Satisfaction</div>
  <div id="highcharts-pie-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;
  color: #555;
}

JavaScript

const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 300,
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  report: {
    dataSource: {
      type: "json",
      filename: "data/demos/highcharts-demo-data.json",
    },
    slice: {
      rows: [{
        uniqueName: "Date.Month",
      }, ],
      columns: [{
        uniqueName: "[Measures]",
      }, ],
      measures: [{
          uniqueName: "Requests",
          aggregation: "sum",
        },
        {
          uniqueName: "Answered Calls",
          aggregation: "sum",
        },
        {
          uniqueName: "Revenue",
          aggregation: "sum",
          format: "currency",
          active: false
        },
      ],
      sorting: {
        column: {
          type: "desc",
          tuple: [],
          measure: {
            uniqueName: "Answered Calls",
            aggregation: "sum",
          },
        },
      },
    },
    formats: [{
        name: "",
        thousandsSeparator: ","
      },
      {
        name: "currency",
        decimalSeparator: ".",
        decimalPlaces: 2,
        currencySymbol: "$",
      }
    ],
    options: {
      showHeaders: false,
    },
  },
  reportcomplete: function() {
    pivot.off("reportcomplete");
    setGlobalChartsOptions();
    createLineChart();
    createColumnChart();
    createPieChart();
  },
});

function setGlobalChartsOptions() {
  Highcharts.setOptions({
    colors: [
      "#4cbf8b",
      "#e8734c",
      "#ffcd4c",
      "#9875e3",
      "#4c9eff",
      "#8acfc3",
      "#cd97e6",
      "#f1d34c",
      "#65d2e7",
    ],
    lang: {
      thousandsSep: ','
    },
    chart: {
      plotBackgroundColor: "#fafafa",
      backgroundColor: "#fafafa",
      style: {
        fontFamily: "Serif Typeface",
      },
    },
  });
}

function createLineChart()...