Column chart: prepareDataFunction

Integration with Highcharts

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<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/4.2.2/highcharts.js"></script>
<div>

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

<button id="addPie">Add pie</button>
<div style="margin-top: 30px; padding-bottom: 25px;" id="highcharts-pie-first-container"></div>
<div style="margin-top: 30px; padding-bottom: 25px;" id="highcharts-pie-second-container"></div>
<div style="margin-top: 30px; padding-bottom: 25px;" id="highcharts-pie-third-container"></div>

</div>

CSS

table {
  width: 100%;
  border-collapse: collapse;
}

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  height: 300,
  toolbar: true,
  report: {
    dataSource: {
      data: getData()
    },
    slice: {
      "rows": [{
        "uniqueName": "Date.Month"
      }],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "reportFilters": [{
        "uniqueName": "Customer Satisfaction",
        "filter": {
          "members": ["customer satisfaction.[very satisfied]"]
        }
      }],
      "measures": [{
          "uniqueName": "Requests",
          "aggregation": "sum"
        },
        {
          "uniqueName": "Answered Calls",
          "aggregation": "sum"
        }
      ],
      "sorting": {
        "column": {
          "type": "desc",
          "tuple": [],
          "measure": {
            "uniqueName": "Answered Calls",
            "aggregation": "sum"
          }
        }
      }
    },
    "options": {
      "showHeaders": false
    }
  },
  reportcomplete: function() {
    pivot.off("reportcomplete");
    createPieChart('highcharts-pie-second-container', [{
        "uniqueName": "Customer Satisfaction",
        "filter": {
          "members": ["customer satisfaction.[satisfied]"]
        }
      }]);
    createPieChart('highcharts-pie-third-container', [{
        "uniqueName": "Customer Satisfaction",
        "filter": {
          "members": ["customer satisfaction.[unsatisfied]"]
        }
      }]);
  }
});

addPie.addEventListener('click', () =>
  createPieChart('highcharts-pie-first-container', [{
        "uniqueName": "Customer Satisfaction",
        "filter": {
          "members": ["customer satisfaction.[neutral]"]
        }
      }]))

function createPieChart(id, reportFilters) {
  pivot.highcharts.getData({
      type: "pie",
      slice: {
        "rows": [{
          "uniqueName": "Customer Satisfaction"
        }],
       ...